@nuxtjs/svg-sprite

在 Nuxt 中使用 SVG 文件的优化和简便方式

28.1K 下载•324 星•v1.0.2

farnabaz

SVG Sprite 模块

在 Nuxt.js 中使用 SVG 文件的优化和简便方式

雪碧图有助于提高速度，保持一致的开发工作流程，并加快图标的创建。SVG 雪碧图通常使用形状或形式相似的图标创建，而大型图形则是一次性应用。

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

⚠️ 注意：SVG Sprites 不支持 IE，如果你希望支持 IE，可以使用 svg4everybody。请查看此问题以了解如何操作。

🌈 注意：如果你希望加载单个 SVG 图标，并且不想创建雪碧图，请使用 Nuxt SVG Module。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" />

要创建不同的雪碧图，请在 ~/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`	存储生成雪碧图的目录
defaultSprite	`icons`	默认雪碧图的名称（默认雪碧图包含直接放置在 `input` 目录中的所有 svg 文件）
elementClass	`icon`	所有 `<svg-icon>` 实例的全局类
spriteClassPrefix	`sprite-`	雪碧图特定类的前缀
publicPath	`null`	为雪碧图指定自定义公共路径
iconsPath	`_icons`	图标列表页面的自定义路径（要禁用此页面，请将此选项设置为 `false` 或 `null`）
svgoConfig	`null`	SVGO 的自定义配置对象，如何自定义 SVGO 配置

你可以在 nuxt.config.js 中使用 svgSprite 选项更新它们

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

属性

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

集成

Storybook

此模块提供了一个故事，用于列出和搜索项目中的可用图标。你可以在 stories 目录中查看故事。如果你正在使用 @nuxtjs/storybook，你可以在 Storybook 的 Modules 部分看到 SvgSprites 故事。雪碧图将显示在你的 Storybook 中，除非你使用 Storybook 的 modules 选项禁用/隐藏该故事

开发

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

你也可以直接通过 CodeSandBox 贡献：https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/