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'
   },
 ]