👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

使用 NuxtIcon 模組

安裝 NuxtIcon 套件

npm install -D nuxt-icon

修改專案目錄下 nuxt.config.ts 檔案，添加使用 nuxt-icon 至 modules 選項

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

使用 Icon 元件建立 Nuxt Logo 圖示

修改 app.vue 檔案：

<template>
  <div class="flex flex-col items-center">
    <Icon name="logos:nuxt" size="240" />
  </div>
</template>

使用不同圖示集的圖示

使用 heroicons 圖示集的 sun 圖示

<Icon name="heroicons:sun" />

調整圖示大小與設定顏色

使用 Tailwind CSS 類別調整圖示大小與設定顏色為黃色。

<Icon class="h-24 w-24 text-yellow-400" name="heroicons:sun" />

你也可以使用 CSS 樣式規則來調整看看。

使用自訂的圖示元件

在 components/global 目錄下建立一個檔案 ./components/global/NuxtIcon.vue：

<template>
  <svg
    width="900"
    height="900"
    viewBox="0 0 900 900"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z"
      fill="#0C0C0D"
    />
  </svg>
</template>

修改 app.vue 檔案：

<template>
  <div class="flex flex-col items-center">
    <Icon name="NuxtIcon" size="128" />
  </div>
</template>

Icon 元件的 name 屬性若傳入非圖示集與圖示名稱，則會嘗試載入使用自訂的元件，自訂的圖示元件需要放置在模組中約定的 components/global 目錄下，才能正確的載入使用

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 使用 NuxtIcon 模組

參考資料

• Nuxt Modules Directory
• NuxtIcon