npm 包 gulp-svg2symbol 使用教程

在前端开发中，我们常常需要在网页中使用 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