@nuxtjs/svg-sprite

在 Nuxt 中使用 SVG 檔案的最佳化且簡便方式

SVG Sprite 模組

npm (scoped with tag)npm

在 Nuxt.js 中使用 SVG 檔案的最佳化且簡便方式。

精靈圖有助於提高速度,保持一致的開發工作流程,並使圖示的建立更快。SVG 精靈圖通常使用形狀或形式相似的圖示建立,而更大規模的圖形則是一次性應用。

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

⚠️ 注意:SVG Sprites 不適用於 IE,如果您希望支援 IE,可以使用 svg4everybody。請檢視此問題以瞭解如何操作。

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

安裝

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

使用

@nuxtjs/svg-sprite 新增到 nuxt.config.jsbuildModules 部分

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

將您的 SVG 檔案放在 ~/assets/sprite/svg/ 中,例如 sample.svg,然後使用全域性註冊的 svg-icon 元件來使用您的圖片

<svg-icon name="sample" />

要建立不同的精靈圖,請在 ~/assets/sprite/svg/ 中建立自定義目錄,並將您的 svg 檔案放入其中,然後在圖示名稱前加上目錄名稱(例如:~/assets/sprite/svg/my-sprite/my-image.svg

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

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

選項

模組預設選項

選項預設描述
輸入~/assets/sprite/svg原始 SVG 檔案的目錄
輸出~/assets/sprite/gen儲存生成的精靈圖的目錄
預設精靈圖icons預設精靈圖的名稱(預設精靈圖包含直接放置在 input 目錄中的所有 SVG)
元素類icon所有 <svg-icon> 例項的全域性類
精靈圖類字首sprite-精靈圖特定類的字首
公共路徑null為精靈圖指定自定義公共路徑
圖示路徑_icons圖示列表頁面的自定義路徑(要停用此頁面,請將此選項設定為 falsenull
svgoConfignullSVGO 的自定義配置物件,如何自定義 SVGO 配置

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

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

屬性

屬性描述
name圖示路徑,格式為 SPRITE_NAME/ICON_NAME,對於預設精靈圖可以省略 SPRITE_NAME
標題圖示的可訪問性標題,此屬性將轉換為 <svg> 標籤內的 <title> 標籤
描述圖示的可訪問性描述,此屬性將轉換為 <svg> 標籤內的 <desc> 標籤

整合

Storybook

此模組提供了一個故事,用於列出和搜尋您專案中的可用圖示。您可以在 stories 目錄下檢視故事。如果您正在使用 @nuxtjs/storybook,您可以在 Storybook 的 Modules 部分下檢視 SvgSprites 故事。精靈圖將在您的 Storybook 中顯示,除非您使用 Storybook 的 modules 選項停用/隱藏該故事

開發

  • 克隆此倉庫
  • 使用 yarn installnpm install 安裝依賴項
  • 使用 npm run dev 啟動開發伺服器

您也可以透過 CodeSandBox 直接貢獻:https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

許可證

MIT 許可證 版權所有 (c) Nuxt Community - Ahad Birang