Ant Design 自定义Icon
2018-07-30 本文已影响0人
Lethe35
起因：系统菜单前面的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
