在前端开发中，icon 是不可缺少的一个元素。在项目中，我们往往会选择使用 IcoMoon 字体库来管理和使用 icon，本文将介绍如何使用 npm 包 gulp-icomoon-builder 来自动生成 IcoMoon 字体库。
1. 安装 gulp-icomoon-builder
在终端中进入项目的根目录，执行以下命令：
npm install gulp-icomoon-builder --save-dev
2. 下载 IcoMoon 的字体文件
在 IcoMoon 官网 创建一个项目，选择需要的 icon，然后点击右上角的“Generate Font”按钮，下载压缩包。解压后可以得到以下文件：
- fonts/icomoon.eot
- fonts/icomoon.svg
- fonts/icomoon.ttf
- fonts/icomoon.woff
将这些文件复制到项目的某个目录下，例如 src/assets/fonts。
3. 配置 gulpfile.js
在项目的根目录中创建 gulpfile.js，加入以下代码：
-- -------------------- ---- -------
--- ---- - ----------------
--- -------- - -------------------------
--- ----------- - -----------------------------
--- ------------ - --------------------- - ------
--------------------- -----------
------ ------------------------------------
-------------------
--------- ----------
----- ----------------------------------
----------- --------------------------------
--------- -----------
---
----------------
--------- ----------
--------------- -----
-------- -------- -------- ------ ------ -------
---------- ------------
---
--------------------------------------
---- 第 1 行：引入 gulp 模块。
- 第 2 行：引入 gulp-iconfont 模块，用于生成字体文件。
- 第 3 行：引入 gulp-iconfont-css 模块，用于生成 css 文件。
- 第 4 行：用于获取当前时间戳，作为字体版本号。
- 第 6 行：定义一个任务名为“iconfont”。
- 第 8 行：从指定目录中读取所有的 .svg 文件。
- 第 9~14 行：使用 gulp-iconfont-css 生成 css 文件，其中 fontName 为生成的字体名称，path 为包含 css 模板信息的文件路径，targetPath 为生成的 css 文件的相对路径，fontPath 为字体文件的相对路径。
- 第 16~26 行：使用 gulp-iconfont 生成字体文件，其中 fontName 为字体的名称，prependUnicode 表示是否在 Unicode 前面加上反斜杠，formats 表示生成的字体格式，timestamp 表示字体的版本号。
- 第 27 行：指定字体文件的输出目录。
4. 创建 css 模板文件
在 src/assets/templates 目录下创建 _icons.css 文件，输入以下代码：
-- -------------------- ---- -------
---------- -
------------ ----------
---- -----------------------------------------------
---- ---------------------------------------------------- ----------------------------
---------------------------------------------- -------------------
----------------------------------------------- ---------------
------------------------------------------------------ --------------
------------ -------
----------- -------
-
----------------- --------- ------- -
-- --- ---------- -- ------- ------ ---- ------- ---------- ---- ------ ----- --
------------ --------- -----------
------ ------
----------- -------
------------ -------
------------- -------
--------------- -----
------------ --
----------------------- ------------
------------------------ ----------
-
----------------- -
-------- --------
-其中：
- font-family 表示生成的字体名称。
- src 为字体文件的地址，其中 [[fontPath]] 和 [[timestamp]] 分别会被 gulp-iconfont-css 插件替换成实际值。
- [class^="icon-"], [class*=" icon-"] 表示所有类名以“icon-”开头或包含“ icon-”的元素都使用这个字体。
- .icon-home:before 表示将 icon 的类名“icon-home”对应的字符设置为实际图标。
5. 使用
执行以下命令：
gulp iconfont
便可在 src/assets/fonts 目录下生成以下文件：
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
- icomoon.woff2
并在 src/stylesheets 目录下生成 _icons.scss 文件，其中包含了所有图标的类名和对应字符的设置。在项目中只需要引入 _icons.scss 文件即可。
例如项目的 index.html 文件中使用“icon-home”图标：
-- -------------------- ---- -------
------
------
-------------------
----- ---------------- -----------------------------
-------
------
---- ------------------------
-------
-------在 stylesheets/index.css 文件中加入：
@import "icons";
便可使用图标。
总结
使用 gulp-icomoon-builder 可以自动生成 IcoMoon 字体库，前端开发者无需手动生成和维护字体文件和 css 文件，极大地提高了开发效率。通过本文的学习，相信读者已经会使用 gulp-icomoon-builder 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc69c