Nuxt Icons

一個 Nuxt 3 模組，讓您能夠快速且愉快地使用自己的 SVG 圖示。

安裝

1. npm i nuxt-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>

此模組的作用

此模組檢索 assets/icons 資料夾中的所有 svg 檔案，覆寫它們的高度和寬度以使其可縮放，並使用 <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 在專案開發中提供的寶貴幫助