前言
在开发一个 Web 页面时，有时需要使用到自定义的字体图标，在以往人们会使用 css 的 @font-face 进行处理，这种方式存在一些繁琐的操作和兼容性问题。随着技术的不断发展，出现了使用 iconfont 的做法，它更加简便、灵活，并且消除了兼容性问题。
在使用 iconfont 时，我们需要把设计师提供的字体图标转成字体文件，这个过程通常使用阿里的在线转换工具，但是一旦字体库庞大，会给打包带来不少麻烦，webpack-iconfont-plugin-temp-fork 就是为解决这个问题出现的。
本篇文章将详细介绍如何使用 webpack-iconfont-plugin-temp-fork 进行字体图标的打包。
安装
使用 npm 安装该插件：
--- ------- ---------- ---------------------------------
使用
1. 配置 Webpack
在 webpack 配置类中引入插件，并配置一些参数：
----- -------------- - ---------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
--------- ----------
---- -------------------------
---------- -
---- --------------------------------
-
--
-
--以上配置的含义如下：
fontName：生成的字体文件名。svg：储存 svg 文件的路径。templates：模板文件的路径，用于定义生成的 css 样式。
2. 创建模板文件
创建一个 Handlebars 模板文件，用于描述 css 样式：
---------- -
------------ ---------------
---- -------------------------------- ----------------------------
-------------------------- ---------------
------------------------- -------------------
-------------------------------------- --------------
------------ -------
----------- -------
-
----------------- --------- ------- -
------------ -------------- -----------
---------- ---- -----------
----------- -------
------------ -------
------------ --
----------------------- ------------
------------------------ ----------
-
------- -------
---------------------- -
-------- ---------------
-
---------这里的 {{fontName}} 相当于占位符，运行时会被 webpack 替换为实际的字体名称。{{#each icons}} 和 {{/each}} 之间的是循环语句，用来生成每个图标的样式。
3. 生成字体文件
在终端中运行 webpack 命令，webpack 将调用插件开始生成字体文件和 css 文件。
这里假定所有的 svg 文件放在 ./src/assets/svg/ 下。
--- --- -----
生成的字体文件及 css 文件将分别储存在 output.path 所指定的目录下。
4. 使用
在 html 页面中引入 css，然后通过添加类名使用到相应的图标中。
--------- ----- ------ ------ ----- ---------------- --------------- ------------ ----- ------------------------ ----------------- ------- ------ -- ---------------------- ------- -------
总结
webpack-iconfont-plugin-temp-fork 是一个非常实用的插件，它可以让我们轻松地生成字体库和 css 样式。本文详细讲解了插件的使用方法，同时提供了完整的示例代码，希望读者可以通过本文轻松学会如何使用该插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671058dd3466f61ffdd0e