SVG Sprite 模組

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

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

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

⚠️ 注意：SVG Sprites 無法在 IE 上運作，如果您希望支援 IE，可以使用 svg4everybody。請查看這個 issue 以了解如何操作。

🌈 注意：如果您希望載入單個 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`	儲存產生 sprite 的目錄
defaultSprite	`icons`	預設 sprite 的名稱 (預設 sprite 由直接放置在 `input` 目錄中的所有 svg 組成)
elementClass	`icon`	所有 `<svg-icon>` 實例的全域類別
spriteClassPrefix	`sprite-`	sprite 特定類別的前綴
publicPath	`null`	指定 sprite 的自訂 public 路徑
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	圖示的輔助工具標題，此 prop 將轉換為 `<svg>` 內部的 `<title>` 標籤
desc	圖示的輔助工具描述，此 prop 將轉換為 `<svg>` 內部的 `<desc>` 標籤

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