如何在 Nuxt 或 Vue 中使用任何圖標？

Question

當我嘗試使用 vue-fontawesome 框架以及 @nuxtjs/fontawesome 框架時，我遇到了 Nuxtjs 錯誤，這是錯誤：

[nuxt] [request error] Cannot read properties of undefined (reading 'component')
    at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
    at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)

這是我在nuxt.config.ts中的代碼：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/fontawesome'
  ],

  fontawesome: {
    icons: {
      solid: ['faXmark']
    }
  }
})

這是我要使用圖標的組件：

<template>
  <div :class="props.className">
    <font-awesome-icon icon="xmark" />
    <slot />
  </div>
</template>

順便說一句，錯誤只是在我嘗試加載頁面時出現，而不是在我運行它時出現。

Answer 1

我推薦antfu的這個解決方案，這是 IMO 迄今為止處理任何類型圖標的最佳方法： https ://github.com/antfu/unplugin-icons
查看更深入的文章，解釋整個事情的原因和方式。

---

這是如何將它與 Nuxt3 一起使用的快速方法，首先要滿足以下要求：

• 請務必使用 Node v16 或更高版本
• 開始一個新的 Nuxt3 項目： pnpm dlx nuxi init nuxt3-unplugin-icons
• 我正在使用 PNPM，所以pnpm i --shamefully-hoist
• 使用pnpm add -D unplugin-icons添加上述軟件包

在你的nuxt.config.ts文件中獲取它

// @ts-nocheck
import { defineNuxtConfig } from 'nuxt'
import Icons from 'unplugin-icons/vite'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Icons({
        // the feature below is experimental ⬇️
        autoInstall: true
      })
    ]
  }
})

我不知道如何修復類型，所以我忽略了這里的檢查。

---

完成后，您可以轉到icones.js並查找您的特定圖標，單擊它，您會看到這個

注意格式是[collection-id]:[name] ，所以在你的情況下它是fa6-solid:xmark 。

現在您可以轉到任何.vue文件並在導入時將fa6-solid:xmark格式轉換為~icons/fa6-solid/xmark 。

<script setup>
import IconXmark from `~icons/fa6-solid/xmark`
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
</template>

現在，您的 Nuxt3 項目將能夠為您自動安裝相關軟件包。

就這樣！ 🎉

---

此autoInstall功能大部分時間都有效，但並非 100% 經受住考驗。
我注意到它只能同時安裝 2 個圖標包（服務器的簡單重啟解決了這個問題）。

如果自動安裝功能失敗，您可以隨時轉到 npm 並在您的情況下查找@iconify-json/[your collection id] aka @iconify-json/fa6-solid 。
NPM 非常擅長從我所見的建議中提出好的建議。

---

這是一個關於如何使用其他圖標的示例

<script setup>
import IconXmark from '~icons/fa6-solid/xmark'
import IconAccountBox from '~icons/mdi/account-box'
import TastyPizza from '~icons/noto-v1/pizza'
import IconPs from '~icons/ri/playstation-line'
</script>

<template>
  <icon-xmark style="font-size: 2em; color: blue" />
  <icon-account-box style="font-size: 2em; color: red" />
  <tasty-pizza style="font-size: 2em" />
  <icon-ps style="font-size: 2em" />
</template>

如您所見，實際結果完全可以使用 CSS 自定義

如果需要，您可以查看我的github 存儲庫以獲取完整的工作示例。

PS：自動導入功能正在開發中。 歡迎訂閱 Github PR 以獲取更多更新。

Answer 2

您還可以使用相當新的 package nuxt-icon ，它由NuxtLabs 的 CEO 制作並用於 nuxt3/content2 啟動模板content-wind 。

Answer 3

僅在使用自定義 svg 圖標時適用

當我使用自定義 svg 圖標（無圖標框架）時，我通常使用vite-svg-loader 。 這也適用於 Nuxt 3。

yarn add vite-svg-loader --dev

nuxt.config.ts

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  vite: {
    plugins: [
      svgLoader({})
    ]
  }
})

設置完成后，我創建了一個新組件，稍后我可以在其他組件中使用它 (components/IconLoader.vue)：

<template>
  <component :is="icon" />
</template>

<script>
  const props = defineProps<{ name: string }>()
  const icon = computed(() => 
    defineAsyncComponent(() => import(`../assets/icons/${props.name}.svg`))
  )
</script>

現在我可以使用我們新的自定義圖標加載器組件（例如 App.vue）輕松顯示圖標：

<template>
  <icon-loader name="calendar" /> // assuming there is a calendar.svg file in your assets folder.
</template>

我通常從https://heroicons.dev獲取我的圖標，它們與 Tailwind 配合得很好。