Finished integrating Shadow DOM icons, first steps towards dynamic theme

pages/social.vue

@@ -3,47 +3,74 @@ const socials = [
   {
     name: 'YouTube',
     url: 'https://go.enderman.ch/youtube',
-    icon: 'youtube-icon',
+    icon: {
+      name: 'logos:youtube-icon',
+      color: 'white',
+    },
   },
   {
     name: 'Andrew',
     url: 'https://go.enderman.ch/andrew',
-    icon: 'youtube-icon',
+    icon: {
+      name: 'logos:youtube-icon',
+      color: 'white',
+    },
   },
   {
     name: 'Twitch',
     url: 'https://go.enderman.ch/twitch',
-    icon: 'twitch',
+    icon: {
+      name: 'fa:twitch',
+      color: '#B68CFF',
+    },
   },
   {
     name: 'TikTok',
     url: 'https://go.enderman.ch/tiktok',
-    icon: 'tiktok-icon',
+    icon: {
+      name: 'logos:tiktok-icon',
+      color: 'white',
+    },
   },
   {
     name: 'Twitter',
     url: 'https://go.enderman.ch/twitter',
-    icon: 'twitter',
+    icon: {
+      name: 'logos:twitter',
+      color: 'white',
+    },
   },
   {
     name: 'Telegram',
     url: 'https://go.enderman.ch/telegram',
-    icon: 'telegram',
+    icon: {
+      name: 'logos:telegram',
+      color: 'white',
+    },
   },
   {
     name: 'Discord',
     url: 'https://go.enderman.ch/discord',
-    icon: 'discord-icon',
+    icon: {
+      name: 'logos:discord-icon',
+      color: 'white',
+    },
   },
   {
     name: 'GitHub',
     url: 'https://go.enderman.ch/github',
-    icon: 'github-icon',
+    icon: {
+      name: 'fa:github',
+      color: 'white',
+    },
   },
   {
     name: 'Steam',
     url: 'https://go.enderman.ch/steam',
-    icon: 'steam',
+    icon: {
+      name: 'fa:steam',
+      color: 'white',
+    },
   },
 ]
 
@@ -100,17 +127,10 @@ useHead({
         <h5 class="alex">Social media</h5>
         <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">
-              <XIcon :name="`logos:${page.icon}`" inline />
-              <a
-                class="link-hi"
-                target="_blank"
-                rel="noopener"
-                :href="page.url"
-              >
-                {{ page.name }}
-              </a>
-            </div>
+            <a class="link-hi" target="_blank" rel="noopener" :href="page.url">
+              <Icon :name="page.icon.name" :color="page.icon.color" inline />
+              <span class="mx-2">{{ page.name }}</span>
+            </a>
           </li>
         </ul>
       </div>