简介
使用 iconfont 可以方便的将一些小图标转换成字体图标，达到优化性能、减少请求的效果。而 @bestminr/gulp-iconfont-css 是一个帮助我们将 SVG 文件转换成 iconfont 并生成对应 CSS 文件的 Gulp 插件，使用十分方便。
安装
在使用之前，需要先确保已经安装了 Node.js 和 Gulp，然后在项目根目录下通过命令行安装 @bestminr/gulp-iconfont-css。
npm install @bestminr/gulp-iconfont-css --save-dev
使用方式
1. 下载 SVG 图标
首先需要准备好需要转换成字体图标的 SVG 图标文件，并放置在项目中的一个目录下。
2. 创建 gulpfile.js
在项目根目录下创建一个 gulpfile.js，然后导入 @bestminr/gulp-iconfont-css。
var gulp = require('gulp')
var iconfont = require('@bestminr/gulp-iconfont-css')3. 配置插件参数
接着设置插件的一些参数，包括字体名称、图标名称、字体文件存放路径等。
var options = {
fontName: 'myfont', // 字体名称
path: 'src/icons/*.svg', // SVG 文件路径
targetPath: 'dist/fonts/myfont.css', // 生成的 CSS 文件存放路径
fontPath: '../fonts/' // CSS 中字体文件存放的相对路径
}4. 调用插件
最后，只需要将所需要转换的 SVG 图标文件通过 Gulp 流工具传递给 @bestminr/gulp-iconfont-css 插件即可。
gulp.task('iconfont', function() {
return gulp.src(options.path)
.pipe(iconfont(options))
.pipe(gulp.dest('dist/fonts'))
})5. 生成 CSS 文件
在运行 Gulp 任务后，@bestminr/gulp-iconfont-css 会自动生成对应的字体文件和 CSS 文件。
-- -------------------- ---- -------
-- --------- -- --------------------------- --
---------- -
------------ --------- -- ---- --
---- --------------------------- -- -------- --
---- --------------------------------- ----------------------------
-------------------------- -------------------
---------------------------- ----------------
--------------------------- ---------------
--------------------------------- --------------
------------ ------- -- ---- --
----------- ------- -- ---- --
-
----- -
------------ --------- -- ---- --
---------- ----- -- ---- --
----------- ------- -- ---- --
------------ ------- -- ---- --
------------ -- -- -- --
---------------- -------- -- ---- --
--------------- ------------------- -- ---- --
----------------------- ------------ -- ------ ----- --
------------------------ ---------- -- ------- ----- --
-示例代码
-- -------------------- ---- -------
--- ---- - ---------------
--- -------- - --------------------------------------
--- ------- - -
--------- ---------
----- ------------------
----------- ------------------------
--------- -----------
-
--------------------- ---------- -
------ ----------------------
------------------------
------------------------------
--总结
使用 @bestminr/gulp-iconfont-css 可以便捷地将一些小图标转换成字体图标，并优化性能、减少请求。本文详细地介绍了该插件的使用方式，通过示例代码可以更快更准确地上手开始使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66a45