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/'
  }
}

属性

属性	描述
name	格式为 `SPRITE_NAME/ICON_NAME` 的图标路径，对于默认 sprite，可以省略 `SPRITE_NAME`
title	图标的可访问性标题，此属性将转换为 `<svg>` 内部的 `<title>` 标签
desc	图标的可访问性描述，此属性将转换为 `<svg>` 内部的 `<desc>` 标签

集成

Storybook

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

开发

克隆此存储库
使用 yarn install 或 npm install 安装依赖项
使用 npm run dev 启动开发服务器

您也可以使用 CodeSandBox 直接贡献：https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/