Ant Design 自定义Icon

起因：系统菜单前面的Icon要换成产品给的svg文件，还要收起菜单时Icon和菜单的样式不能乱

本来可以这么做：①找到原来的Icon的before样式，把里面的content属性替换；②直接把菜单前的Icon组件替换成img标签

实际没有这样做：①替换的content值不知道；②样式会乱，就是把菜单收起来后不是直接显示的图标

Antd的图标都是默认托管在 iconfont.cn上的，iconfont.cn上也有相关文字介绍

image.png

本文仅是对自己的操作步骤进行的记录，欠缺之处，还望体谅

1. 开始

首先登录iconfont.cn，进入菜单： 图标管理->我的项目，然后新建项目

image.png

填写完成后点击【新建】按钮

**2. **
①从图标库随便添加若干个图标至购物车

image.png

②从购物车选择图标加入项目

image.png

3. 对图标进行编辑

image.png image.png

4. 将图标下载

image.png image.png

5. 将6个文件移至项目

image.png

启动项目报错

image.png

解决方法：

image.png

6. 在需要引入图标所在的组件所引入的样式文件中导入iconfont.css以及覆盖anticon的样式

image.png

7. 在Icon组件加入type的值

image.png

8. 实现效果

image.png

注意： 按照步骤操作下来如果不起作用，就需要使用css选择器，一步步找到所图标所在元素，给它添加样式

image.png

2020-10-15更新：

1. 新建项目

image.png

2. 添加需要的图标
可以去首页添加已经存在图标到购物车，然后再从购物车把图标加入到项目中；也可以直接上传你本地的图标至项目

3. 下载添加好的图标文件至本地
下载之前生不生成代码都无所谓，但是每次更新了图标之后都要重新下载才能使用到最新添加的图标

image.png
这5个是必须的文件

4. 将下载的文件加到自己的项目工程中
这里要注意，要修改对iconfont.css中其他文件的路径

image.png
5.在组件中引入刚才引入的iconfont.css
image.png image.png