关于antd的icon字体图标的扩展

在作一个由dva+antd构成的前端项目的时候，在使用antd的Icon组件的时候，因为其自带的字体图标没法知足须要，因此要进行扩展。如今把扩展过程分为几个步骤：

1.须要在icon官方资源库中创建一个本身项目的icon库，用来存放须要扩展的字体图标：

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

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

<span><i class="anticon anticon-message-back"></i></span>

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