做前端开发的时候，我们经常需要将 SVG 格式的图片嵌入到 HTML 或 CSS 中。手写 SVG 代码需要花费大量时间和精力，而且不利于维护。由此，一些方便快捷的工具应运而生。本文将介绍 npm 包 gulp-svg-to-css-promise 的使用方法，通过这个工具可以将 SVG 转换成可以直接在 CSS 中使用的代码。
安装
在安装前，请先确保已经安装了 Node.js 和 gulp。
在终端中，运行以下命令进行安装：
npm install gulp-svg-to-css-promise --save-dev
使用方法
- 在项目的
gulpfile.js文件中引入该包，并为要处理的 SVG 文件设置一个变量：
var svgToCss = require('gulp-svg-to-css-promise');
var svgPath = 'img/*.svg';- 使用
gulp.src()方法获取要处理的 SVG 文件，将其传给svgToCss()方法：
gulp.src(svgPath)
.pipe(svgToCss())
.pipe(gulp.dest('dist/css'));- 在 CSS 中使用生成的代码。 SVG 代码会被转换成类似于下面的 CSS 代码：
.svg-icon-1:before {
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci");
}其中，.svg-icon-1 为根据输入 SVG 文件名自动生成的 CSS 类名。
配置
.pipe(svgToCss()) 方法可以接受一个可选的配置对象作为参数，用于自定义生成代码的选项。默认的配置选项如下：
-- -------------------- ---- -------
-
-------- ----------
---------------- ---
------- -----
------- --------
-------- --
------------- -----------
--------- --- --------------- ------------- -- - ---------- - - ------- --------- -- -
--------- -------- --- ------ --------- ------ -
---- --- ----
---------- --- ----------------
-cssFile：生成的 CSS 文件名，默认为svg.css。prefix：自定义 CSS 类的前缀，默认为.svg-。startId：自定义 CSS 类的起始编号，默认为 1。svgClassname：用于选择 SVG 元素的类名，默认为svg-icon。base64：是否使用 Base64 编码，默认为true。customClassName：是否使用自定义的 CSS 类名，默认为''。template：用于创建 CSS 规则的 template，默认为：
'<% _.forEach(svgs, function(svg, i) { %>.svg-<%= i + startId %>:before {' +
'content: url("<%= svg %>?<%= timestamp %>");' +
'}<% }); %>'其中，<%= i + startId %> 会提示插入自增的数字编号作为 CSS 类名。
示例代码
以下代码演示了如何使用 gulp-svg-to-css-promise，将 SVG 文件转换成可嵌入到 CSS 中的代码：
-- -------------------- ---- -------
-- -----------
--- ---- - ----------------
--- -------- - -----------------------------------
--- ------- - ------------
----------------------- -------- -- -
------ -----------------
----------------
-------- ----------
------- --------
-------- --
------------- -----------
--------- --- --------------- ------------- -- - ---------- - - ------- --------- -- -
--------- -------- --- ------ --------- ------ -
---- --- ----
---------- --- ----------------
---
-----------------------------
---在执行 gulp svg-to-css 之后，会在 dist/css 目录下生成一个名为 svg.css 的文件，用于存储生成的 CSS 代码。在 HTML/CSS 中，可以通过类似于下面的方式使用 SVG 图像：
<i class="svg-icon svg-icon-1"></i> <i class="svg-icon svg-icon-2"></i>
总结
任何一个工具都需要灵活运用，gulp-svg-to-css-promise 不同的配置选项可以根据项目需求进行设置，在处理 SVG 图像的时候可以大大减少我们的时间和精力。同时，这个工具的源码也可以作为学习 Gulp 的参考资料，帮助我们更好地理解 Gulp 的使用以及插件的开发方式。相信通过本文的介绍，在项目中使用 Gulp 插件不再是难事。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e296b