在前端开发中，使用 iconfont 是非常普遍的一种方式，不仅可以降低页面加载速度，而且可以提升用户体验。一般情况下，我们使用阿里的 iconfont 就能满足日常开发需求，但在某些情况下，我们需要定制自己的图标 iconfont，就需要用到 webfont-icons-generator 这个 npm 包了。
什么是 webfont-icons-generator
webfont-icons-generator 是一款可将 SVG 图标转换为 WebFont 并生成对应 CSS 的 Node.js 包。它提供了简单的 API 和命令行工具，能够满足大部分的 WebFont 需求。
安装
在使用 webfont-icons-generator 前，你需要先在本地安装 Node.js 环境以及 npm 包管理器。确保你的本地环境中已经安装了 Node.js 和 npm，否则请到 Node.js 官网下载并安装。
然后在命令行执行以下命令安装 webfont-icons-generator：
npm install webfont-icons-generator -g
使用
命令行使用
webfont-icons-generator 提供了命令行工具，通过命令行工具可以快速生成对应的 WebFont 和 CSS 文件。运行以下命令生成对应的 IconFont 和 CSS 文件：
webfont-icons-generator --inputPath=./iconfont --outputPath=./dist --fontName=IconFont
其中，--inputPath 参数在后面跟上 SVG 图标存放的目录路径；--outputPath 参数在后面跟上生成的 WebFont 和 CSS 文件存放的目录路径；--fontName 参赛在后面跟上生成的 WebFont 名称。
API 使用
除了命令行工具之外，webfont-icons-generator 还可以在代码中通过 API 的方式使用。以下是使用 API 生成 WebFont 和 CSS 文件的示例代码：
-- -------------------- ---- ------- ----- --------------------- - ---------------------------------- ----- ---- - --------------- ----- --------- - -------------------- ----------- ----- ---------- - -------------------- ------- ----- -------- - ---------- ----------------------- ---------- ----------- -------- --
示例代码
以下示例代码演示了如何将两个 SVG 图标合并成一个 WebFont，并生成对应的 CSS 文件，通过在页面中引用该 WebFont 文件，可以在页面中使用自定义的图标。
创建两个 SVG 图标文件 iconfont/like.svg 和 iconfont/star.svg，并将以下代码存入 index.html 文件中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----------------------- -- ---------------
----- ---------------- --------------- -------------------------
-------
----- -
------------ -----------
---------- -----
-
------------ -
-------- --------
-
------------ -
-------- --------
-
--------
-------
------
---- ----------- ------------
---- ----------- ------------
------- ---------------------- --------------------------------
-------
-------运行以下命令：
webfont-icons-generator --inputPath=./iconfont --outputPath=./dist --fontName=IconFont
以上命令会生成 dist/iconfont.css 和 dist/iconfont.js 两个文件，通过在 index.html 中引用这两个文件，就可以在页面中使用自定义的图标了。
总结
webfont-icons-generator 是一款非常实用的 npm 包，能够帮助我们将 SVG 图标转换为 WebFont，并生成对应的 CSS 文件，方便我们在前端开发中使用自定义图标。在使用 webfont-icons-generator 时，只需要通过命令行或 API 的方式即可生成自己想要的 WebFont 文件。通过本文的介绍，相信读者已经学会了如何使用 webfont-icons-generator 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cc081e8991b448da5c0