npm 包 nuxt-sprite-svg-inline 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

nuxt-sprite-svg-inline 是一个可以将多张 SVG 图片合并成一张雪碧图的 npm 包。它提供了非常方便的工具，可以让前端工程师在开发过程中更加高效地使用 SVG 图片，以及提升页面性能。

安装

通过 npm 安装 nuxt-sprite-svg-inline：

npm install nuxt-sprite-svg-inline -D

用法

在 nuxt.config.js 中使用 nuxt-sprite-svg-inline 插件：

{
  buildModules: [
    ['nuxt-sprite-svg-inline']
  ]
}

在需要使用的页面中引入目标 SVG 图片，并使用 <svg-inline> 组件进行渲染：

<template>
  <svg-inline :src="require('@/assets/icons/foo.svg')" />
</template>

在 SVG 文件所在的目录中，创建一个空的文件夹。nuxt-sprite-svg-inline 将在编译过程中将 SVG 图片合并，并输出一个雪碧图 png 文件和一个 CSS 文件。名称与该空文件夹的名称相同。这里我们使用 icons 作为目录名称：

- assets/
  - icons/
    - foo.svg
    - bar.svg

最后，在页面中使用雪碧图中的某张图片，只需要替换为 CSS 中提供的 class 名称即可：

<template>
  <div class="icon icon-foo"></div>
</template>

示例代码

以上所有用法的代码，整理如下：

nuxt.config.js

export default {
  buildModules: [
    ['nuxt-sprite-svg-inline']
  ]
}

page.vue

<template>
  <svg-inline :src="require('@/assets/icons/foo.svg')" />
  <svg-inline :src="require('@/assets/icons/bar.svg')" />
  <div class="icon icon-foo"></div>
  <div class="icon icon-bar"></div>
</template>

icons/foo.svg

<svg viewBox="0 0 50 50">
  <circle fill="#FFF" cx="25" cy="25" r="25"/>
</svg>

icons/bar.svg

<svg viewBox="0 0 50 50">
  <rect fill="#FFF" width="50" height="50"/>
</svg>

代码说明

在上面的代码中，我们假设我们在 /pages/foo/bar.vue 页面中使用了两张 SVG 图片。该文件需要包含四部分：

nuxt.config.js - 添加 buildModules，以启用 nuxt-sprite-svg-inline 插件
页面中（例如，/pages/foo/bar.vue） - 引入 SVG 并使用 <svg-inline> 组件进行渲染
/assets/icons 目录中 - 包含所有的 SVG 文件
编译后生成的雪碧图和 CSS 文件 - 输出到 /assets/icons 目录中

通过这些步骤，您的页面应该具有优化效果，并且可以更好地处理 SVG 图片。注意，由于该插件是在编译时进行处理的，因此您不必担心在模板中使用过多 SVG 图片导致性能问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066f963d1de16d83a66dab