feat: 使用 @nuxt/icon module 显示图标

app/components/SocialLinks.vue

@@ -9,14 +9,7 @@
           class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/10 text-text-primary text-sm font-medium transition-all duration-200 hover:bg-primary/20 hover:border-primary/40 hover:text-primary hover:-translate-y-1"
         >
           <span v-if="iconFor(link)" class="inline-flex items-center justify-center w-5 h-5">
-            <i v-if="iconFor(link).fa" :class="iconFor(link).fa" />
-            <NuxtImg
-              v-else
-              :src="iconFor(link).src"
-              :alt="link.name"
-              loading="lazy"
-              class="w-full h-full"
-            />
+            <Icon v-if="iconFor(link).name" :name="iconFor(link).name" width="20" height="20" />
           </span>
           <span>{{ link.name }}</span>
         </NuxtLink>
@@ -26,7 +19,6 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
 defineProps({
   links: {
     type: Array,
@@ -35,44 +27,31 @@ defineProps({
 });
 
 const iconMap = {
-  bilibili: "fa-brands fa-bilibili",
-  github: "fa-brands fa-github",
-  blog: "fa-solid fa-rss",
-  email: "fa-solid fa-envelope",
-  mail: "fa-solid fa-envelope",
-  telegram: "fa-brands fa-telegram",
-  twitter: "fa-brands fa-x-twitter",
-  x: "fa-brands fa-x-twitter",
-  linkedin: "fa-brands fa-linkedin",
-  youtube: "fa-brands fa-youtube",
-  facebook: "fa-brands fa-facebook",
-  instagram: "fa-brands fa-instagram",
-  reddit: "fa-brands fa-reddit",
-  discord: "fa-brands fa-discord",
-  weibo: "fa-brands fa-weibo",
-  zhihu: "fa-brands fa-zhihu",
-  wechat: "fa-brands fa-weixin",
-  weixin: "fa-brands fa-weixin",
-  qq: "fa-brands fa-qq",
+  bilibili: "fa6-brands:bilibili",
+  github: "fa6-brands:github",
+  blog: "fa6-solid:rss",
+  email: "fa6-solid:envelope",
+  mail: "fa6-solid:envelope",
+  telegram: "fa6-brands:telegram",
+  twitter: "fa6-brands:x-twitter",
+  x: "fa6-brands:x-twitter",
+  linkedin: "fa6-brands:linkedin",
+  youtube: "fa6-brands:youtube",
+  facebook: "fa6-brands:facebook",
+  instagram: "fa6-brands:instagram",
+  reddit: "fa6-brands:reddit",
+  discord: "fa6-brands:discord",
+  weibo: "fa6-brands:weibo",
+  zhihu: "fa6-brands:zhihu",
+  wechat: "fa6-brands:weixin",
+  weixin: "fa6-brands:weixin",
+  qq: "fa6-brands:qq",
 };
 
 const iconFor = (link) => {
   const key = (link.name || "").toLowerCase();
-  if (iconMap[key]) return { fa: iconMap[key] };
+  if (iconMap[key]) return { name: iconMap[key] };
   if (link.icon) return { src: link.icon };
   return null;
 };
-
-onMounted(() => {
-  const id = "fa-cdn";
-  if (document.getElementById(id)) return;
-  const link = document.createElement("link");
-  link.id = id;
-  link.rel = "stylesheet";
-  link.href =
-    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap";
-  link.crossOrigin = "anonymous";
-  link.referrerPolicy = "no-referrer";
-  document.head.appendChild(link);
-});
 </script>

app/config/siteConfig.ts

@@ -17,6 +17,7 @@ const siteConfig = {
     { name: "Telegram", url: "https://t.me/RhenCloud" },
     { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
     { name: "Blog", url: "https://blog.rhen.cloud" },
+    { name: "Twitter", url: "https://x.com/RhenCloud75" },
   ],
 
   github: {