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" />
+            <Icon v-if="iconFor(link).name" :name="iconFor(link).name" width="20" height="20" />
-            <NuxtImg
-              v-else
-              :src="iconFor(link).src"
-              :alt="link.name"
-              loading="lazy"
-              class="w-full h-full"
-            />
           </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",
+  bilibili: "fa6-brands:bilibili",
-  github: "fa-brands fa-github",
+  github: "fa6-brands:github",
-  blog: "fa-solid fa-rss",
+  blog: "fa6-solid:rss",
-  email: "fa-solid fa-envelope",
+  email: "fa6-solid:envelope",
-  mail: "fa-solid fa-envelope",
+  mail: "fa6-solid:envelope",
-  telegram: "fa-brands fa-telegram",
+  telegram: "fa6-brands:telegram",
-  twitter: "fa-brands fa-x-twitter",
+  twitter: "fa6-brands:x-twitter",
-  x: "fa-brands fa-x-twitter",
+  x: "fa6-brands:x-twitter",
-  linkedin: "fa-brands fa-linkedin",
+  linkedin: "fa6-brands:linkedin",
-  youtube: "fa-brands fa-youtube",
+  youtube: "fa6-brands:youtube",
-  facebook: "fa-brands fa-facebook",
+  facebook: "fa6-brands:facebook",
-  instagram: "fa-brands fa-instagram",
+  instagram: "fa6-brands:instagram",
-  reddit: "fa-brands fa-reddit",
+  reddit: "fa6-brands:reddit",
-  discord: "fa-brands fa-discord",
+  discord: "fa6-brands:discord",
-  weibo: "fa-brands fa-weibo",
+  weibo: "fa6-brands:weibo",
-  zhihu: "fa-brands fa-zhihu",
+  zhihu: "fa6-brands:zhihu",
-  wechat: "fa-brands fa-weixin",
+  wechat: "fa6-brands:weixin",
-  weixin: "fa-brands fa-weixin",
+  weixin: "fa6-brands:weixin",
-  qq: "fa-brands fa-qq",
+  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: {

nuxt.config.ts

@@ -5,7 +5,7 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
   compatibilityDate: "2025-12-12",
   srcDir: "app/",
-  modules: ["@nuxt/image", "@nuxt/eslint", "@nuxtjs/sitemap", "@nuxtjs/seo"],
+  modules: ["@nuxt/image", "@nuxt/eslint", "@nuxtjs/sitemap", "@nuxt/icon", "@nuxtjs/seo"],
 
   // 禁用 Vue Router 的非关键警告
   vue: {
@@ -47,27 +47,6 @@ export default defineNuxtConfig({
         { rel: "dns-prefetch", href: siteConfig.siteMeta.url },
         { rel: "preconnect", href: siteConfig.siteMeta.url },
         { rel: "icon", href: siteConfig.siteMeta.favicon },
-        // Font Awesome CDN 预加载和优化
-        {
-          rel: "preload",
-          as: "style",
-          href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?font-display=swap",
-          crossorigin: "anonymous",
-        },
-        {
-          rel: "preload",
-          as: "font",
-          href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2?font-display=swap",
-          type: "font/woff2",
-          crossorigin: "anonymous",
-        },
-        {
-          rel: "preload",
-          as: "font",
-          href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2?font-display=swap",
-          type: "font/woff2",
-          crossorigin: "anonymous",
-        },
       ],
     },
     pageTransition: { name: "page", mode: "out-in" },

package.json

@@ -15,7 +15,9 @@
   "dependencies": {
     "@giscus/vue": "^3.1.1",
     "@jaseeey/vue-umami-plugin": "^1.4.0",
+    "@nuxt/icon": "^2.2.0",
     "@nuxt/image": "2.0.0",
+    "@nuxtjs/icon": "^3.0.0-beta.16",
     "@nuxtjs/seo": "3.3.0",
     "@nuxtjs/sitemap": "^7.5.0",
     "nodemailer": "^7.0.11",