在做一个由dva+antd构成的前端项目的时候，在使用antd的Icon组件的时候，由于其自带的字体图标无法满足需要，所以要进行扩展。现在把扩展过程分为几个步骤：

1.需要在资源库中建立一个自己项目的icon库，用来存放需要扩展的字体图标：

2.注意要编辑项目，为了和antd配合使用，我的项目配置是这样的：

这里需要注意一下，这里的1、2项的名称配置，不是随便配置的，因为要配置antd的Icon组件的使用，第一项必须要anticon。然后，这里第二项，不同版本的antd可能会有差别，我这里填的anticon是可以使用。如果你填写了anticon页面上的图标还不生效的话，可以利用浏览器查看一下源代码，对比一下，就知道这里填什么了，我的源码是这样的：(ps:有的需要填写anticon-user之类的，我先前也是这样配置的，结果下面的代码中anticon会带上anticon-user)

3.icon官网中你自己项目中的图标是可以做一些简单的配置的：

红圈中的内功就是antd中的组件Icon中type属性引用的图标名称。

4.搜索并添加好自己需要的图标之后， 就可以把项目中的图标下载下来了：

5.下载解压之后，会看见下载下来的东西有如下这些文件：

这些文件中，前面demo前缀的所有文件其实就是教程，你点击打开之后，就是告诉你通过fontclass/symbol/unicode等三种方式使用iconfont。

5.我项目中是用的fontclass这种方式，对于dva+antd的项目，你需要做的事情不多，第一步先把下载下来的文件，除了demo的几个文件，拷进项目中：

6.然后找一个地方定义一个less文件，我就是在src根目录下定义的，如图：

7.common.less定义的内容是这个样子：

/* 引入 icon class 文件 */@import  "/iconfont/iconfont.css";/* 关于这个引用路径，有一个坑，ant.design 我用的dva，默认资源路径为 /public 所以这个引用的实际目录是  /public/fonts/iconfont/iconfont.css *//* 设置使用字体的优先级 anticon-user 高 */:global(.anticon) {  /* :global() 是为了覆盖全局class .anticon 的样式 */  &:before {    font-family: "anticon", "anticon-user" !important;    /* 默认样式是这样        font-family: "anticon" !important;    */  }}

8.最后只需要在一个地方引用这个less就可以了，我是在index.js文件中导入这个样式。理论上，不管在哪个js中引用都可以，但是由于项目的结构和加载的方式不一样，建议从最上层的js中引入，防止有意外。

其他的方面应该不用配置了，不出意外的话，应用就可以使用额外的字体图标了。

参考博客：https://www.jianshu.com/p/2934316a5899