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