在项目中基本上所有的图片都能用 url-loader 转换成 base64，但是有种特殊的图片不能转换成 base64，那就是 icon，这种 icon 一般都是通过字体引入的，如下：

获取 icon 库

这边我们就用 阿里巴巴矢量图标库
在图标库中找到我的项目，如下：
image.png
选择我发起的项目或者我参与的项目，如下：
image.png
这边我已经添加了几个图标了。接下来就是下载到本地，如下：
image.png
下载完成之后，得到以下一个压缩包，将这些文件移到项目中即可。
image.png

项目中引入 icon

从 iconfont 下载的文件放到项目中，我放到了 ./src/iconfont/ 这个路径中：
image.png

webpack 配置

对于字体文件的打包，webpack 4 和 5 存在差异

webpack 4

在4 中对于字体文件需要用 file-loader。不能用 url-loader 转化为 base64。如下：

  1. module.exports = {
  2.   //...
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.(ttf|woff|woff2|eot|svg)$/,
  7.         use: 'file-loader'
  8.       }
  9.     ]
  10.   }
  11.   //...
  12. }

webpack 5

在 5 中不需要配置字体文件的打包，在本事例中使用的是 5 ，所以打包结果也是5的。

代码中如何使用

有一个固定的类名 iconfont，再加上 icon 的名字，如 icon-pingguo。如下

  1. /** ./src/index.js **/
  2. import style from './iconfont/iconfont.css';
  3. let i = document.createElement('i');
  4. i.className = `${style['iconfont']} ${style['icon-pingguo']}`;
  5. document.body.appendChild(i);

打包结果

image.png
webpack 会生成字体文件放入到打包结果中。

页面结果

成功显示图标。
image.png