Nuxt 圖示

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

安裝

1. npm i nuxt-icons
2. 將 nuxt-icons 加入到模組中，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 在專案開發中提供的寶貴幫助