Move over to iconify-icon, wrap around

.stylelintcache

@@ -1 +1 @@
-[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Dialog.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"16"},{"size":165,"mtime":1700688268778,"hashOfConfig":"17"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"17"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"17"},{"size":804,"mtime":1700688952880,"hashOfConfig":"17"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"17"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"17"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"17"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"17"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"17"},{"size":761,"mtime":1706186305129,"hashOfConfig":"17"},{"size":2045,"mtime":1706266444695,"hashOfConfig":"17"},{"size":1236,"mtime":1706205683132,"hashOfConfig":"17"},{"size":1135,"mtime":1706030243608,"hashOfConfig":"17"},{"size":979,"mtime":1706003786966,"hashOfConfig":"17"},{"size":1519,"mtime":1706031675155,"hashOfConfig":"17"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"17"},"5tgxr3"]
+[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\TransitionY.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"15"},{"size":165,"mtime":1700688268778,"hashOfConfig":"16"},{"size":1513,"mtime":1700430002840,"hashOfConfig":"16"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"16"},{"size":804,"mtime":1700688952880,"hashOfConfig":"16"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"16"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"16"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"16"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"16"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"16"},{"size":1989,"mtime":1706379493817,"hashOfConfig":"16"},{"size":2045,"mtime":1706266444695,"hashOfConfig":"16"},{"size":1236,"mtime":1706205683132,"hashOfConfig":"16"},{"size":1135,"mtime":1706030243608,"hashOfConfig":"16"},{"size":979,"mtime":1706003786966,"hashOfConfig":"16"},{"size":16911,"mtime":1706027251875,"hashOfConfig":"16"},"5tgxr3"]

components/blocks/Options.vue

@@ -1,40 +1,74 @@
 <script setup lang="ts">
-import Dialog from '~/components/ui/Dialog.vue'
 import cogIcon from '~/assets/images/icons/cog.png'
 import pearlIcon from '~/assets/images/icons/pearl.gif'
 
-function optionsMenu() {}
+const active = ref(false)
 </script>
 
 <template>
-  <div class="options-layout pass-through">
+  <VDialog>
-    <div class="options clickable" @click="optionsMenu()">
+    <template #activator="{ props }">
-      <img
+      <div v-bind="props" class="options clickable">
-        class="logo user-select-none"
+        <img
-        draggable="false"
+          class="logo user-select-none"
-        :src="cogIcon"
+          draggable="false"
-        alt="Options"
+          :src="cogIcon"
-      />
+          alt="Options"
-    </div>
+        />
-  </div>
+      </div>
+    </template>
+    <template #default="{ isActive }">
+      <VCard title="Dialog">
+        <VCardText>
+          <div class="overlay background"></div>
+          <div class="overlay content">
+            <img
+              class="icon-badge user-select-none"
+              draggable="false"
+              :src="pearlIcon"
+              alt="Pearl"
+            />
+            <div>
+              <h3 class="alex text-align-center">Site options</h3>
+              <div class="row">
+                <div class="col-12 col-sm-6">
+                  <p>
+                    <strong>Theme</strong><br />
+                    Available in all flavors, vanilla and chocolate.
+                  </p>
+                </div>
+                <div class="col-12 col-sm-6">
+                  <p>
+                    <strong>Animation</strong><br />
+                    Some computers may have issues rendering that gorgeous
+                    background animation. Enabling it substantially increases
+                    power consumption.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </VCardText>
+        Report a bug
+        <VCardActions>
+          <VSpacer></VSpacer>
+
+          <VBtn text="Close Dialog" @click="isActive.value = false"></VBtn>
+        </VCardActions>
+      </VCard>
+    </template>
+  </VDialog>
 </template>
 
 <style scoped lang="scss">
 .options {
   display: flex;
-  flex-direction: row;
+  position: fixed;
 
-  justify-content: center;
+  top: 0;
-  align-items: center;
+  right: 0;
 
   padding: 10px;
-
-  &-layout {
-    position: fixed;
-
-    top: 0;
-    right: 0;
-  }
 }
 
 .logo {

components/ui/Dialog.vue

@@ -1,76 +0,0 @@
-<script setup>
-const props = defineProps({
-  icon: {
-    type: String,
-    default: '',
-  },
-  alt: {
-    type: String,
-    default: 'Icon',
-  },
-})
-
-const theme = ref(false)
-const animation = ref(true)
-</script>
-
-<template>
-  <p>FALSE</p>
-  <!--  <QDialog ref="dialogRef" @hide="onDialogHide">-->
-  <!--    <QCard class="dialog">-->
-  <!--      <div class="overlay background"></div>-->
-  <!--      <div class="overlay content">-->
-  <!--        <img-->
-  <!--          class="icon-badge user-select-none"-->
-  <!--          draggable="false"-->
-  <!--          :src="props.icon"-->
-  <!--          :alt="props.alt"-->
-  <!--        />-->
-  <!--        <QCardSection>-->
-  <!--          <h3 class="alex text-align-center">Site options</h3>-->
-  <!--          <div class="row">-->
-  <!--            <div class="col-12 col-sm-6">-->
-  <!--              <p>-->
-  <!--                <strong>Theme</strong><br />-->
-  <!--                Available in all flavors, vanilla and chocolate.-->
-  <!--              </p>-->
-  <!--              <QToggle-->
-  <!--                v-model="theme"-->
-  <!--                class="px-5"-->
-  <!--                color="black"-->
-  <!--                dense-->
-  <!--                size="xl"-->
-  <!--                :unchecked-icon="mdiWhiteBalanceSunny"-->
-  <!--                :checked-icon="mdiWeatherNight"-->
-  <!--                icon-color="primary"-->
-  <!--                @change="theme = !theme"-->
-  <!--              />-->
-  <!--              <QCheckbox v-model="theme" />-->
-  <!--            </div>-->
-  <!--            <div class="col-12 col-sm-6">-->
-  <!--              <p>-->
-  <!--                <strong>Animation</strong><br />-->
-  <!--                Some computers may have issues rendering that gorgeous-->
-  <!--                background animation. Enabling it substantially increases power-->
-  <!--                consumption.-->
-  <!--              </p>-->
-  <!--              <QToggle-->
-  <!--                v-model="animation"-->
-  <!--                color="purple"-->
-  <!--                dense-->
-  <!--                size="xl"-->
-  <!--                :unchecked-icon="mdiStop"-->
-  <!--                :checked-icon="mdiPlay"-->
-  <!--                @change="theme = !theme"-->
-  <!--              />-->
-  <!--            </div>-->
-  <!--          </div>-->
-  <!--          Report a bug-->
-  <!--          <QCardActions>-->
-  <!--            <QBtn label="OK" @click="onDialogOK" />-->
-  <!--          </QCardActions>-->
-  <!--        </QCardSection>-->
-  <!--      </div>-->
-  <!--    </QCard>-->
-  <!--  </QDialog>-->
-</template>

components/ui/XIcon.vue

@@ -1,20 +1,52 @@
 <script setup lang="ts">
+import 'iconify-icon'
+import type { IconifyRenderMode } from 'iconify-icon'
+import type { PropType } from 'vue'
+
 const props = defineProps({
   name: {
     type: String,
     required: true,
   },
-  size: {
+  mode: {
-    type: String,
+    type: String as PropType<IconifyRenderMode>,
-    default: 'md',
+    default: 'svg',
   },
-  color: {
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
     type: String,
-    default: 'currentColor',
+    default: '1em',
+  },
+  height: {
+    type: String,
+    default: '1em',
+  },
+  flip: {
+    type: String,
+    default: '',
+  },
+  rotate: {
+    type: [String, Number],
+    default: '',
   },
 })
+
+const icon = props.name?.split(':')?.[0] === 'local' ?
 </script>
 
-<template></template>
+<template>
+  <iconify-icon
+    :icon="props.name"
+    :mode="props.mode"
+    :inline="props.inline"
+    :width="props.width"
+    :height="props.height"
+    :flip="props.flip"
+    :rotate="props.rotate"
+  />
+</template>
 
 <style scoped lang="scss"></style>

nuxt.config.ts

@@ -53,7 +53,6 @@ export default defineNuxtConfig({
     '@nuxt/content',
     'vuetify-nuxt-module',
     '@nuxtjs/google-fonts',
-    'nuxt-icon',
     'nuxt-site-config',
     'nuxt-simple-sitemap',
     'nuxt-simple-robots',
@@ -72,7 +71,9 @@ export default defineNuxtConfig({
     moduleOptions: {
       importComposables: true,
       prefixComposables: true,
-      styles: 'none',
+      styles: {
+        configFile: './assets/styles/vuetify.scss',
+      },
       includeTransformAssetsUrls: true,
       ssrClientHints: {
         reloadOnFirstRequest: false,

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "index",
+  "name": "enderapp",
   "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "index",
+      "name": "enderapp",
       "version": "0.1.3",
       "hasInstallScript": true,
       "dependencies": {
@@ -30,8 +30,8 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-nuxt": "^4.0.0",
         "eslint-plugin-prettier": "^5.1.3",
+        "iconify-icon": "^1.0.8",
         "nuxt": "^3.9.3",
-        "nuxt-icon": "^0.6.8",
         "nuxt-link-checker": "^3.0.0-rc.6",
         "nuxt-og-image": "^3.0.0-rc.29",
         "nuxt-simple-robots": "^4.0.0-rc.13",
@@ -10929,6 +10929,18 @@
         "node": ">=14.18.0"
       }
     },
+    "node_modules/iconify-icon": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-1.0.8.tgz",
+      "integrity": "sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",

package.json

@@ -32,8 +32,8 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "iconify-icon": "^1.0.8",
     "nuxt": "^3.9.3",
-    "nuxt-icon": "^0.6.8",
     "nuxt-link-checker": "^3.0.0-rc.6",
     "nuxt-og-image": "^3.0.0-rc.29",
     "nuxt-simple-robots": "^4.0.0-rc.13",

pages/social.vue

@@ -101,7 +101,7 @@ useHead({
         <ul class="list-style-type-none p-0">
           <li v-for="(page, index) in socials" :key="index">
             <div class="d-flex flex-row align-items-center gap-1">
-              <Icon :name="`logos:${page.icon}`" />
+              <XIcon :name="`logos:${page.icon}`" inline />
               <a
                 class="link-hi"
                 target="_blank"