在前端开发中，使用 SVG 图标可以让网站在各种设备上显示效果一致。而使用 SVG 符号库能够让我们更好地管理和重复利用图标资源。本文将介绍 gulp-svg-symbols 这个 npm 包的使用教程，并帮助你理解如何创建 SVG 符号库。
安装 gulp-svg-symbols
首先，在项目中安装 gulp-svg-symbols：
npm install gulp-svg-symbols --save-dev
创建一个基础的 SVG 文件
在开始使用 gulp-svg-symbols 之前，需要先准备一个基础的 SVG 文件，这里以一个简单的“搜索”图标为例：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="#000" d="M23.367 21.573l-5.083-5.084a9.324 9.324 0 1 0-1.414 1.414l5.083 5.084a1 1 0 0 0 1.414-1.414zM2 9.5a7.5 7.5 0 1 1 7.5 7.5 7.5 7.5 0 0 1-7.5-7.5z"/> </svg>
配置 gulpfile.js 文件
接下来，需要在 gulpfile.js 文件中配置任务。以下是一个基础的配置：
const gulp = require('gulp'); const svgSymbols = require('gulp-svg-symbols'); gulp.task('symbols', function() { return gulp.src('path/to/svg/files/*.svg') .pipe(svgSymbols()) .pipe(gulp.dest('path/to/output/folder')); });
这里，gulp.src 指定了 SVG 文件的路径，而 svgSymbols() 就是我们使用 gulp-svg-symbols 的关键。最后，通过 gulp.dest 将生成的符号库文件输出到指定的目录。
创建 SVG 符号库
现在运行任务：
gulp symbols你应该会在指定的 output/folder 目录下看到一个名为 symbols.svg 的文件，这就是生成的符号库！
让我们来看一下这个文件的内容。你会发现它与我们之前准备的 search.svg 文件有所不同：
<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol viewBox="0 0 24 24" id="icon-search"> <path fill="#000" d="M23.367 21.573l-5.083-5.084a9.324 9.324 0 1 0-1.414 1.414l5.083 5.084a1 1 0 0 0 1.414-1.414zM2 9.5a7.5 7.5 0 1 1 7.5 7.5 7.5 7.5 0 0 1-7.5-7.5z"/> </symbol> </svg>
这里，<symbol> 元素是 gulp-svg-symbols 自动生成的，它包含了我们之前准备的 SVG 图标。在此基础上，我们就可以在页面中使用这个符号库。
在网页中使用 SVG 符号库
下面是一个示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --- ----------- ------- --- - ------ ----- ------- ----- - -------- ------- ------ --------- ------------------------------------------------- ------- -------展开代码
这里，我们使用 <use> 元素来引用符号库中的图标，其中 xlink:href 属性指定了要使用的图标 ID。同时，我们还通过 CSS 设置了 SVG 图
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/55100
