当我们在前端项目中需要使用大量的 SVG 图片时，通常需要一个个将它们引入到 HTML 文件中，这种方法既繁琐又不灵活。为了解决这个问题，我们可以使用一个自动化工具——grunt-svgstore，它可以将多个 SVG 图片合并成一个 SVG sprite，并生成一个引用该 sprite 的 HTML 文件，从而实现自动化、高效的引入 SVG 图片的方式。
安装
在使用之前，我们需要先安装 grunt-svgstore，可以通过 npm 进行安装：
npm install grunt-svgstore --save-dev
配置
安装完成后，在 Gruntfile.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
--------- -
-------- -
------
--
------------ -
------ -
--------
-
-
-
---
------------------------------------- ------
----------------------------- -------------- ------
--配置选项
在 options 中可以配置以下选项：
- prefix: 指定 sprite 中每个 SVG 的 ID 前缀，默认为“svg-”；
- svg: 每个 SVG 文件的模板，可以在模板中使用 {svg} 作为占位符，表示该 SVG 文件；
- includeTitleElement: 是否将每个 SVG 文件的标题包含在 sprite 中，默认为 false；
- cleanup: 清除 SVG 文件中的空格和换行符，默认为 true；
- svgmin: SVG 代码压缩选项。
例如，在以下 Gruntfile.js 中，我们设置了 ID 前缀为“icon-”，并且将每个 SVG 文件的标题包含在 sprite 中：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
--------- -
-------- -
------- --------
---- -
------ ----------------
------ ----------------------------
--
-------------------- ----
--
------------ -
------ -
----------------- -------------
-
-
-
---
-------------------------------------
----------------------------- --------------
--生成文件路径
在 files 对象中可以配置生成的 sprite 文件路径和需要合并的 SVG 文件路径，例如：
your_target: {
files: {
'dest/icons.svg': ['src/*.svg']
}
}上述代码表示，合并 src 文件夹下的所有 SVG 文件，并将合并后的 sprite 文件保存到 dest 文件夹下的 icons.svg 文件中。
运行任务
在配置完成后，我们可以通过运行以下命令来生成 SVG sprite：
grunt svgstore
示例代码
以下代码是一个基本的 Gruntfile.js 文件，它将 src 文件夹下的所有 SVG 文件合并成一个 SVG sprite，并将每个 SVG 文件的 ID 前缀设置为“icon-”，每个 SVG 文件的标题包含在 sprite 中，最终生成的 sprite 文件保存在 dest 文件夹下的 icons.svg 中：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
--------- -
-------- -
------- --------
---- -
------ ----------------
------ ----------------------------
--
-------------------- ----
--
------------ -
------ -
----------------- -------------
-
-
-
---
-------------------------------------
----------------------------- --------------
--总结
使用 grunt-svgstore 可以方便地将多个 SVG 文件合并成一个 SVG sprite，并自动生成引用该 sprite 的 HTML 文件，从而实现高效、自动化的引入 SVG 图片的方式。在配置选项中，可以通过设置 ID 前缀、模板、压缩选项等来控制生成的 sprite 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79346