SVG Sprite 模組

在 Nuxt.js 中使用 SVG 檔案的優化且簡單的方法

Sprites 有助於提高速度、維持一致的開發流程，並使圖示的創建速度更快。 SVG sprites 通常使用形狀或形式相似的圖示建立，而較大規模的圖形則是一次性應用。

範例: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

⚠️ 注意: SVG Sprites 不適用於 IE，如果您希望支援 IE，可以使用 svg4everybody。請查看這個議題以了解如何操作。

🌈 注意: 如果您希望載入單個 SVG 圖示，並且不想建立 sprites，請使用 Nuxt SVG 模組。適用於 Nuxt.js 的 SVG 模組允許您根據您提供的資源查詢以多種方式匯入 .svg 檔案。

安裝

yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite

使用方式

將 @nuxtjs/svg-sprite 加入到 nuxt.config.js 的 buildModules 部分

{
  buildModules: [
    '@nuxtjs/svg-sprite',
  ],
  svgSprite: {
    // manipulate module options
  }
}

將您的 svg 檔案放在 ~/assets/sprite/svg/ 中，例如 sample.svg，並使用全域註冊的 svg-icon 元件來使用您的圖像

<svg-icon name="sample" />

要建立不同的 sprites，請在 ~/assets/sprite/svg/ 內部建立自訂目錄，並將您的 svg 檔案放入其中，並在圖示名稱前放置目錄標題 (範例: ~/assets/sprite/svg/my-sprite/my-image.svg)

<svg-icon name="my-sprite/my-image" />

模組會建立一個頁面，列出您的所有圖示，預設情況下您可以在 /_icons 路徑中看到此頁面。
注意：此頁面是在 dev 模式下建立的，因此您無法在生產環境中看到它。

選項

模組預設選項

選項	預設值	描述
input	`~/assets/sprite/svg`	原始 svg 檔案的目錄
output	`~/assets/sprite/gen`	儲存產生的 sprites 的目錄
defaultSprite	`icons`	預設 sprite 的名稱 (預設 sprite 由直接放置在 `input` 目錄中的所有 svg 組成)
elementClass	`icon`	所有 `<svg-icon>` 實例的全域類別
spriteClassPrefix	`sprite-`	sprite 特定類別的前綴
publicPath	`null`	為 sprites 指定自訂公開路徑
iconsPath	`_icons`	圖示清單頁面的自訂路徑 (為了停用此頁面，請將 `false` 或 `null` 傳遞給此選項)
svgoConfig	`null`	SVGO 的自訂設定物件，如何自訂 SVGO 設定

您可以使用 nuxt.config.js 中的 svgSprite 選項來更新它們

export default {
  buildModules: ['@nuxtjs/svg-sprite'],
  svgSprite: {
    input: '~/assets/svg/'
  }
}

Props

Prop	描述
name	圖示路徑格式為 `SPRITE_NAME/ICON_NAME`，預設 sprite 可以省略 `SPRITE_NAME`
title	圖示的輔助功能標題，此 props 將轉換為 `<svg>` 內部的 `<title>` 標籤
desc	圖示的輔助功能描述，此 props 將轉換為 `<svg>` 內部的 `<desc>` 標籤

整合

Storybook

此模組提供一個故事來列出和搜尋您專案中可用的圖示。您可以在 stories 目錄下看到故事。如果您正在使用 @nuxtjs/storybook，您可以在 storybook 中的 Modules 區段下看到 SvgSprites 故事。除非您使用 Storybook 的 modules 選項停用/隱藏故事，否則 Sprites 會顯示在您的 Storybook 中