前言
使用 SVG 图标在网页中已经变得越来越流行，因为 SVG 图标具有不失真、体积小、可复用等优点。但在实际使用中，直接引用多个 SVG 图标会增加网络请求次数，从而影响网页加载速度，影响用户体验。本文介绍了一款常用的 npm 包 svg-sprite-gulp-thegod，它能将多个 SVG 图标合并为一张图，并生成对应的 CSS，从而减少网络请求次数，提升网页载入速度。
工具介绍
svg-sprite-gulp-thegod 是基于 svg-sprite 进行封装，其中 gulp 是自动化构建的工具，非常适用于整合多个 SVG 图标。同时，它还自动生成了相应的 CSS 文件，在网站实际应用过程中可以灵活的应用。
环境准备
在开始使用之前，需要确保已经安装以下软件：
- node.js
- npm
- gulp.js
如果还未安装这些软件，可以使用以下命令进行安装：
# node.js sudo apt-get install nodejs # npm sudo apt-get install npm # gulp.js sudo npm install -g gulp
安装
在项目目录下，使用以下命令安装 svg-sprite-gulp-thegod：
npm install svg-sprite-gulp-thegod --save-dev
安装完成后，在 package.json 文件中可以看到 svg-sprite-gulp-thegod 的依赖关系。
使用
svg-sprite-gulp-thegod 的使用和 gulp 的使用类似，需要创建 gulpfile.js 文件来编写任务。
创建任务
使用如下代码创建一个 svg 任务：
-- -------------------- ---- -------
--- ---- - ----------------
---------- - ----------------------------------
---------- - -
----- -
------- -
------- -------------------------
-------- ---- ------------------------
-
-
--
---------------- -------- -- -
------ -------------------------
-----------------------------
--------------------------
---配置参数
mode.symbol.sprite： 打包生成的 SVG 图标所在的绝对路径。mode.symbol.example：是否在打包生成的 SVG 图标文件夹中添加一个 HTML 文件，使得我们能够快速在浏览器中预览效果。
示例
假设，项目中有两个 SVG 图标文件 icon1.svg和 icon2.svg， 通过以下代码将它们合并成一个 SVG 文件：
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon1" viewBox="0 0 100 100">
<path d="M50,50 L20,20 L80,20 Z"/>
</symbol>
<symbol id="icon2" viewBox="0 0 100 100">
<path d="M50,50 L20,80 L80,80 Z"/>
</symbol>
</svg>合并后的 SVG 文件可以在其他页面中使用以下代码进行引用：
<svg> <use xlink:href="path/to/svg/sprites.svg#icon1"></use> <use xlink:href="path/to/svg/sprites.svg#icon2"></use> </svg>
这样，我们可以在一个请求之内，同时加载多个图标，从而减少了请求次数和优化了页面体验。
总结
svg-sprite-gulp-thegod 是一款非常实用的 npm 包，能够实现多个 SVG 图标的合并，极大优化了页面的加载效率。在项目中使用它可以为用户提供更良好的体验，同时也可以提高项目的质量以及开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067378890c4f72775840e3