在前端开发中，我们常常需要在网页中使用 SVG 图标。而 gulp-svg2symbol 这个 npm 包可以方便地将多个 SVG 图标合并成一个符号（symbol），并生成一个包含所有符号的 SVG 文件。使用这个包可以大大减少页面中 SVG 图标的数量，提高性能。
安装
首先需要安装 gulp-svg2symbol：
npm install gulp-svg2symbol
使用方法
假设我们有如下几个 SVG 图标文件：
src/ ├── icon1.svg ├── icon2.svg └── icon3.svg
我们希望将它们合并成一个包含所有符号的 SVG 文件 symbol-svg/icons.svg。
首先，在 gulpfile.js 中引入 gulp 和 gulp-svg2symbol：
const gulp = require('gulp');
const svg2symbol = require('gulp-svg2symbol');然后，编写一个任务来处理 SVG 文件：
gulp.task('svg-symbols', function() {
return gulp.src('src/*.svg')
.pipe(svg2symbol({
id: 'icon-%f',
className: '.icon-%f',
}))
.pipe(gulp.dest('symbol-svg'));
});上述代码的含义是：
- 使用通配符
*匹配所有 SVG 文件。 - 使用
svg2symbol将 SVG 文件合并为符号。 - 配置符号的 ID 和类名格式。ID 格式为
icon-文件名，类名格式为icon-文件名。 - 将合并后的 SVG 文件保存到
symbol-svg目录下。
最后，运行 gulp svg-symbols 命令即可生成 symbol-svg/icons.svg 文件，其中包含了所有 SVG 图标的符号。
示例代码
为了更好地理解上述步骤，我们给出一个完整的示例代码。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
----- ---------- - ---------------------------
------------------------ ---------- -
------ ---------------------
---------------
------------------
--- ----------
---------- -----------
---
-------------------------------
---上述代码中，我们新增了一个 svgmin 插件用于压缩 SVG 文件。使用这个插件可以大幅缩小 SVG 文件大小，提高网页加载速度。
总结
使用 gulp-svg2symbol 这个 npm 包，可以方便地合并多个 SVG 图标为一个符号。通过该文章的介绍，您应该可以快速上手使用这个工具，并加速网页的 SVG 图标处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540c81e8991b448d164b