FIX: nuxt icon

Nuxt icon implementation

assets/css/header.css

@@ -57,6 +57,7 @@
         font-size: 1.2rem;
         display: flex;
         justify-content: space-between;
+        align-items: center;
     }
 
     & > .wrapper {
@@ -144,21 +145,11 @@
             &:hover {
                 transform: scale(1.15);
                 color: var(--color-orange);
-
-                & .icon {
-                    filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
             }
         }
     }
 }
 
-    nav .icon {
-        transition: 250ms;
-        filter: invert(1);
-        height: 30px;
-    }
-}
-
 
 
 @media screen and (width < 1180px) {
@@ -188,11 +179,6 @@
                 height: max-content;
                 gap: 3rem;
                 padding-bottom: 2rem;
-
-                & img {
-                    height: 2rem;
-                    width: 2rem;
-                }
             }
 
             & ul {

components/Header.vue

@@ -35,7 +35,7 @@
         <ul class="socials">
           <li v-for="({icon, ...rest}) in socials" :key="rest.href" @click="isBurgerOpen = false">
             <a v-bind="rest" target="_blank">
-              <img class="icon" :src="icon" :alt="rest['aria-label']" width="30" height="30" />
+              <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
             </a>
           </li>
         </ul>
@@ -45,9 +45,6 @@
 </template>
 
 <script lang="ts" setup>
-import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
-import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
-
 let observer: IntersectionObserver
 const header = ref<HTMLElement | null>(null)
 const headerWrapper = ref<HTMLElement | null>(null)
@@ -77,23 +74,23 @@ const nav = [
 const socials = [
   {
     href: 'https://www.linkedin.com/in/webfussel/',
-    icon: LinkedInIcon,
+    icon: 'ri:linkedin-box-line',
     'aria-label': 'Externer Link: LinkedIn Profil'
   },
   {
     href: 'https://mastodontech.de/@webfussel',
-    icon: MastodonIcon,
+    icon: 'ri:mastodon-line',
     rel: 'me',
     'aria-label': 'Externer Link: Mastodon Profil'
   },
   {
     href: 'https://bsky.app/profile/webfussel.de',
-    icon: '/img/icons/bsky.svg',
+    icon: 'ri:bluesky-line',
     'aria-label': 'Externer Link: Bluesky Profil'
   },
   {
     href: 'https://ko-fi.com/webfussel',
-    icon: '/img/icons/kofi.svg',
+    icon: 'wf:kofi',
     'aria-label': 'Externer Link: KoFi Profil'
   },
 ]

components/Services.vue

@@ -15,7 +15,7 @@
         <Button :href="service.link" class="cta" :label="service.button" aria-label="Zur externen Seite von zur Terminbuchung" />
         <ul class="flex-col">
           <li v-for="point in service.list">
-            <img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
+            <Icon class="color-icon" name="ri:check-double-line" aria-hidden="true" alt="checkmark icon" size="1.5em" />
             <span>{{point}}</span>
           </li>
         </ul>
@@ -24,7 +24,7 @@
     <article class="z-2 card flex-col default-gap margin-top">
       <h3>Keinen Bock auf Telen? Understandable.</h3>
       <p>Dann schreib mir einfach gerne direkt eine E-Mail an
-        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<img :src="mail" aria-hidden="true" alt="" /></a></ClientOnly>
+        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ri:mail-line" aria-hidden="true" alt="mail icon" /></a></ClientOnly>
       </p>
       <h3>Keine Kohle? Kommt vor.</h3>
       <p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
@@ -44,8 +44,6 @@
 </template>
 
 <script setup lang="ts">
-import check from 'iconoir/icons/regular/double-check.svg'
-import mail from 'iconoir/icons/regular/mail.svg'
 import Person from '~/components/Person.vue'
 
 const slots : number = 0

nuxt.config.ts

@@ -48,5 +48,23 @@ export default defineNuxtConfig({
     }
   },
 
+  modules: [
+    '@nuxt/icon'
+  ],
+
+  icon: {
+    customCollections: [
+      {
+        prefix: 'wf',
+        dir: './public/img/icons'
+      }
+    ],
+    provider: 'iconify',
+    serverBundle: 'local',
+    clientBundle: {
+      scan: true,
+    },
+  },
+
   compatibilityDate: '2024-12-04'
 })

package-lock.json

@@ -6,10 +6,9 @@
     "": {
       "name": "nuxt-app",
       "hasInstallScript": true,
-      "dependencies": {
-        "iconoir": "^7.7.0"
-      },
       "devDependencies": {
+        "@iconify-json/ri": "^1.2.5",
+        "@nuxt/icon": "^1.10.3",
         "nuxt": "^3.15.3",
         "postcss-nesting": "^13.0.0"
       }
@@ -28,6 +27,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.0.0.tgz",
+      "integrity": "sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.8",
+        "tinyexec": "^0.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@antfu/utils": {
       "version": "0.7.10",
       "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
@@ -1024,6 +1037,106 @@
         "node": ">=18"
       }
     },
+    "node_modules/@iconify-json/ri": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.2.5.tgz",
+      "integrity": "sha512-kWGimOXMZrlYusjBKKXYOWcKhbOHusFsmrmRGmjS7rH0BpML5A9/fy8KHZqFOwZfC4M6amObQYbh8BqO5cMC3w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.515",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.515.tgz",
+      "integrity": "sha512-4aJAgfv31fST8LYjuGy14ZQN8zIDQpKuHRQXZgilQMDh6SW2YFiIWMWKd7MSEmRXwRQdygwPrAydelBNHW+qqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/@antfu/utils": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.0.tgz",
+      "integrity": "sha512-XPR7Jfwp0FFl/dFYPX8ZjpmU4/1mIXTjnZ1ba48BLMyKOV62/tiRjdsFcPs2hsYcSud4tzk7w3a3LjX8Fu3huA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.14.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.14.0.tgz",
+      "integrity": "sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/local-pkg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.0.0.tgz",
+      "integrity": "sha512-bbgPw/wmroJsil/GgL4qjDzs5YLTBMQ99weRsok1XCDccQeehbHA/I1oRvk2NPtr7KGZgT/Y5tPRnAtMqeG2Kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.3.0.tgz",
+      "integrity": "sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -1676,6 +1789,36 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-1.10.3.tgz",
+      "integrity": "sha512-ESIiSIpETLLcn5p4U8S0F3AQ5Mox0MoHAVKczamY4STh3Dwrc8labLhtN6lunwpQEv6UGuiutdvfkJ88zu44Ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.496",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.2.1",
+        "@iconify/vue": "^4.2.0",
+        "@nuxt/devtools-kit": "^1.6.4",
+        "@nuxt/kit": "^3.14.1592",
+        "consola": "^3.2.3",
+        "local-pkg": "^0.5.1",
+        "mlly": "^1.7.3",
+        "ohash": "^1.1.4",
+        "pathe": "^1.1.2",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.8.0",
+        "tinyglobby": "^0.2.10"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@nuxt/kit": {
       "version": "3.15.3",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.15.3.tgz",
@@ -5481,16 +5624,6 @@
         "node": ">=14.18.0"
       }
     },
-    "node_modules/iconoir": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/iconoir/-/iconoir-7.10.1.tgz",
-      "integrity": "sha512-cSH+dBz1YOtvsYBRsrvDnVHX1w8OtiylGSIgbzjc8l8+AiXlD+oDVLAA+yfoYV6eL8LypWlrbnHkYcBif+7BvQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/iconoir"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",

package.json

@@ -14,10 +14,9 @@
     "build:deploy": "nuxt build && firebase deploy --only hosting"
   },
   "devDependencies": {
+    "@iconify-json/ri": "^1.2.5",
+    "@nuxt/icon": "^1.10.3",
     "nuxt": "^3.15.3",
     "postcss-nesting": "^13.0.0"
-  },
-  "dependencies": {
-    "iconoir": "^7.7.0"
   }
 }

public/img/icons/bsky.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.98 21.29">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: none;
-        stroke: #000;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        stroke-width: 1.5px;
-      }
-    </style>
-  </defs>
-  <path class="cls-1" d="M5.62,2.08c2.58,1.93,5.35,5.86,6.37,7.96,1.02-2.11,3.79-6.03,6.37-7.96,1.86-1.4,4.87-2.48,4.87.96,0,.69-.39,5.77-.62,6.59-.8,2.87-3.73,3.6-6.33,3.16,4.55.77,5.7,3.34,3.2,5.9-4.74,4.87-6.82-1.22-7.35-2.78-.1-.29-.14-.42-.14-.31,0-.11-.05.02-.14.31-.53,1.56-2.61,7.65-7.35,2.78-2.5-2.56-1.34-5.13,3.2-5.9-2.6.44-5.52-.29-6.33-3.16-.23-.82-.62-5.9-.62-6.59,0-3.44,3.01-2.36,4.87-.96h0Z"/>
-</svg>

public/img/icons/kofi.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 <g>
-	<path d="M509.5,190.9c-16.5-87.2-103.7-98-103.7-98H15.4c-12.9,0-14.5,17-14.5,17s-1.7,156.3-0.4,252.3c3.5,51.6,55.2,57,55.2,57
+	<path fill="currentColor" d="M509.5,190.9c-16.5-87.2-103.7-98-103.7-98H15.4c-12.9,0-14.5,17-14.5,17s-1.7,156.3-0.4,252.3c3.5,51.6,55.2,57,55.2,57
 		s176.3-0.5,255.2-1.1c52-9.1,57.3-54.8,56.7-79.7C460.5,343.5,525.9,278,509.5,190.9L509.5,190.9z M273.5,265.8
 		c-26.6,30.9-85.6,84.8-85.6,84.8s-2.6,2.6-6.7,0.5c-1.6-1.2-2.2-1.9-2.2-1.9c-9.5-9.4-71.8-65-86.1-84.3
 		c-15.1-20.6-22.2-57.6-1.9-79.2c20.2-21.5,64.1-23.2,93.1,8.7c0,0,33.3-38,74-20.5C298.6,191.3,297.2,238,273.5,265.8z M405.2,276