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	图标的辅助功能标题，此 prop 将转换为 `<svg>` 内的 `<title>` 标签
desc	图标的辅助功能描述，此 prop 将转换为 `<svg>` 内的 `<desc>` 标签

此模块提供一个 story 来列出和搜索您项目的可用图标。您可以在 stories 目录下看到 stories。如果您正在使用 @nuxtjs/storybook，您可以在 storybook 中的 模块 部分下看到 SvgSprites stories。除非您使用 Storybook 的 modules 选项禁用/隐藏 story，否则 sprites 将显示在您的 Storybook 中