FIX: nuxt icon

Nuxt icon implementation

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