Nuxt 圖示

一個 Nuxt 4 模組，可讓您快速愉快地使用自己的 SVG 圖示。

安裝

1. `npx nuxi@latest module add icons
2. 將 nuxt-icons 新增到 modules，在 nuxt.config.ts 中

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

使用

1. 在 assets 中建立一個 icons 資料夾： assets/icons
2. 將您的 **.svg** 副檔名圖示拖放到 icons 資料夾中
3. 在專案中，使用 <nuxt-icon name="">，其中 name 是您資料夾中 svg 圖示的名稱

如果您需要使用 svg 檔案中的原始顏色（例如，如果您的圖示有 defs），您需要使用 filled 屬性
<nuxt-icon name="mySuperIcon" filled />

子資料夾

如果您想使用更復雜的資料夾排列，您將必須使用 /icons 中的路徑

如果您在巢狀目錄中有 svg 圖示，例如

📁icons
  └📁admin
  ⠀⠀└ badge.svg
  └📁user
  ⠀⠀└ badge.svg

那麼圖示的名稱將基於其自身的路徑目錄和檔名。因此，圖示的名稱將是

<nuxt-icon name="admin/badge"> and <nuxt-icon name="user/badge">

我不喜歡分配給圖示的基本樣式！

為圖示建立的樣式如下

width: 1em;
height: 1em;
margin-bottom: 0.125em;
vertical-align: middle;

您可以使用常規 CSS 輕鬆更改這些樣式，例如在您的 index.vue 檔案中

<style>
.nuxt-icon svg{
  margin-bottom: 0;
}
</style>

我想使用線上圖示包中的圖示

您可以下載 SVG 格式的圖示並將它們放在 /icons 資料夾中，或者使用另一個原生支援此功能的模組： nuxt-icon

這個模組做了什麼

該模組從 assets/icons 資料夾中檢索所有 svg 檔案，覆蓋它們的 height 和 width 以使其可伸縮，並使用 <nuxt-icon> 元件允許它們被使用。<nuxt-icon> 直接將 SVG 程式碼注入到 <span> 中。

功能

• 簡單的 SVG 圖示管理 ✅
• HMR（您無需重置專案即可重新載入圖示）✅
• 能夠像操作字型一樣操作圖示，例如使用 color、font-size 而不是 fill、width、height ✅
• 能夠使用 filled 屬性為複雜圖示使用原始配色方案 ✅
• 圖示僅在使用時載入 ✅

開發

• 執行 npm run dev:prepare 以生成型別存根。
• 使用 npm run dev 以開發模式啟動 playground。

想法和待辦事項

• 自動 svg 檔案最佳化
• 自動縮放具有非方形尺寸的圖示以保持其比例（可能使用 preserveAspectRatio）
• 可用於以前的 nuxt 版本（只需使用 類似這個）
• 如果頁面上使用了大量相同的圖示，則建立一個單獨的 svg sprite（效能顯著提高）

非常感謝 @Diizzayy 在專案開發中提供的寶貴幫助