在 Web 开发中，图标已成为网页设计不可或缺的一部分。为了方便地制作和使用图标，我们可以使用 npm 包 ficons-webfont-generator。它可以将 SVG 图标转换为 Webfont 格式，并生成一组字体图标。
安装 ficons-webfont-generator
通过以下命令可以安装 ficons-webfont-generator：
npm i ficons-webfont-generator
使用 ficons-webfont-generator
- 在项目中创建一个包含 SVG 图标的文件夹，例如 icons。
- 在 icons 文件夹中创建一个名为 ficons.json 的 JSON 文件，它定义了要包括在 Webfont 中的 SVG 图标。
- 运行以下命令来生成 Webfont：
ficons-webfont-generator -d ./icons -c ./icons/ficons.json -o ./fonts/ficons
这将在 fonts 文件夹中创建一个名为 ficons 的 Webfont。
- 将以下代码添加到 HTML 文件的头部，以使用 ficons Webfont：
<link rel="stylesheet" href="./fonts/ficons/ficons.css" />
- 将以下代码添加到 HTML 文件的主体中，以显示一个 ficons 图标：
<i class="ficons ficons-[icon-name]"></i>
其中 icon-name 是在 ficons.json 文件中定义的 SVG 图标名称。
优化 Webfont
默认情况下，ficons-webfont-generator 会将所有 SVG 图标包含在 Webfont 中。然而，在某些情况下，我们可能只需要使用某些 SVG 图标。
通过以下方式，我们可以通过 ficons.json 文件删除某些 SVG 图标：
- 在 ficons.json 文件中将 SVG 图标名称添加到“exclude”数组中：
-- -------------------- ---- -------
-
---------- -
--------
-------
--
---------- -
-------
-
-这将删除名为“icon3”的 SVG 图标。
- 运行以下命令重新生成 Webfont：
ficons-webfont-generator -d ./icons -c ./icons/ficons.json -o ./fonts/ficons --subset
这将使用“exclude”数组中定义的 SVG 图标子集重新生成 Webfont。
示例代码
假设我们有以下 SVG 图标：
icons/ alarm.svg clipboard.svg disk.svg file.svg
我们可以在 icons 文件夹中创建一个名为 ficons.json 的文件，定义以下内容：
{
"include": [
"alarm",
"clipboard",
"disk",
"file"
]
}然后，我们可以使用以下命令来生成 Webfont：
ficons-webfont-generator -d ./icons -c ./icons/ficons.json -o ./fonts/ficons
这将在 fonts 文件夹中创建一个名为 ficons 的 Webfont。
最后，我们可以将以下代码添加到 HTML 文件中来使用 Webfont：
<link rel="stylesheet" href="./fonts/ficons/ficons.css" /> <i class="ficons ficons-alarm"></i> <i class="ficons ficons-clipboard"></i> <i class="ficons ficons-disk"></i> <i class="ficons ficons-file"></i>
这将显示四个 ficons 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38e7