npm 包 svg-sprite-boilerplate-god 使用教程

介绍

SVG-sprite-boilerplate-god 是一个基于 webpack 和 svg-sprite-loader 的 npm 包，它可以让你快速创建一个 SVG sprites，将多个 SVG 文件合并成单个文件，并生成相应的 CSS 文件。同时，该 npm 包还提供了一些字符替换和自定义配置的功能，方便 SVG 在多个浏览器中的使用。

安装

为了使用 SVG-sprite-boilerplate-god，你需要先在你的项目中安装它。你可以使用 npm 或者 yarn 安装。

npm i svg-sprite-boilerplate-god
# 或者
yarn add svg-sprite-boilerplate-god

使用

基本使用

安装完成后，在你的项目中配置好所需的 webpack 配置，然后，你可以在你的 JavaScript 文件中导入 SVG-sprite-boilerplate-god，将其实例化，然后调用 createSprite 方法实现 SVG sprite 的创建。

const SvgSprite = require('svg-sprite-boilerplate-god');

const svgSprite = new SvgSprite(); // 实例化

svgSprite.createSprite({
  glob: 'path/to/svg/files/*.svg',
  output: 'path/to/output/files/',
});

以上代码将会把 path/to/svg/files/ 目录下的所有 SVG 文件合并成单个文件存储在 path/to/output/files/ 目录下，并生成相应的 CSS 文件。其中，glob 参数为 SVG 文件的匹配模式，output 参数指定生成的文件存储目录。

其他配置

SVG-sprite-boilerplate-god 还提供了其他配置项，以便你对 SVG sprite 的生成进行更细致的控制。以下是一些常见的配置项：

• prefix：CSS class 前缀，默认为 icon-
• svgProps：SVG 属性对象，默认为空对象
• vars：字符替换表，用于定制 SVG 的字符替换规则，默认为空对象
• spriteFilename：SVG sprite 文件名，默认为 svg-sprite.svg
• spritePluginFn：SVG sprite 文件生成后的回调函数，默认为空函数
• cssPluginFn：CSS 文件生成后的回调函数，默认为空函数

你可以在 createSprite 方法的第二个参数中传入这些配置项：

-- -------------------- ---- -------
------------------------
  ----- --------------------------
  ------- ------------------------
-- -
  ------- --------
  ----- -
    ------------- ---------
    -------------- ---------
  --
---

在 HTML 中使用 SVG sprite

当 SVG sprite 生成后，你可以在你的 HTML 文件中使用它。可以通过以下代码将 SVG sprite 插入到 html 文件中：

<svg class="icon">
  <use xlink:href="path/to/output/files/svg-sprite.svg#icon-arrow-right"></use>
</svg>

其中，.icon 类用于定义 SVG sprite 的样式，xlink:href 属性指定 SVG sprite 的路径，#icon-arrow-right 参数用于指定使用的 SVG。

总结

通过本文，你应该已经了解了如何使用 SVG-sprite-boilerplate-god 创建 SVG sprite，并掌握了常用的配置项和 HTML 中使用 SVG sprite 的方法。希望这篇文章对你有所帮助，并且你可以在你的项目中使用 SVG-sprite-boilerplate-god 实现 SVG sprite 的快速生成。

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