@nuxtjs/svg-sprite

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

2.71 万次下载•323 星•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 模块。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 模式下创建，因此您无法在生产环境中看到它。

选项

模块默认选项

选项	默认	描述
输入	`~/assets/sprite/svg`	原始 SVG 文件的目录
输出	`~/assets/sprite/gen`	存储生成的精灵图的目录
默认精灵图	`icons`	默认精灵图的名称（默认精灵图包含直接放置在 `input` 目录中的所有 SVG）
元素类	`icon`	所有 `<svg-icon>` 实例的全局类
精灵图类前缀	`sprite-`	精灵图特定类的前缀
公共路径	`null`	为精灵图指定自定义公共路径
图标路径	`_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_NAME`
标题	图标的可访问性标题，此属性将转换为 `<svg>` 标签内的 `<title>` 标签
描述	图标的可访问性描述，此属性将转换为 `<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/