ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存

前一段时间在项目中引入阿里巴巴字体图标库的图标，按步骤走了一遍，但是一直不成功。
刚好需求改了，不需要用图标，就暂时搁浅没在管这个。
今天又有新的需求要用到字体图标，在ant-design-vue官方文档上看icon自带的图标，还是没有符合需求的。一直往下翻文档，翻到一段关于自定义的描述。

感觉好像可以试试，在网上搜了一篇文章，按教程，果然在项目中实现了。
Ant Design Vue通过iconfont构建自定义图标库

为了以后再使用的时候还有印象，特意把完整流程记录下来
1：在阿里巴巴字体图标库上搜索自己需要的图标，网址：阿里巴巴字体图标库
2：搜索自己需要的图标



鼠标经过图标的上方，会出现弹窗，选择第一个添加入库

点击右上角购物车形状的图标

将图标添加至项目

新建个项目名

新建的项目里，新加的图标都在里面

点击下载至本地，压缩后得到一个文件夹



在vue的项目中，src下的assets文件夹中新建icon文件夹或者iconfonts文件夹，文件夹名字自定义
把解压后的所有文件复制到icon文件夹里

到此为止，图标文件已经成功导入到项目里。

3、在main.js入口文件中导入

import {Icon,message} from 'ant-design-vue';

import iconFront from './assets/icon/iconfont.js'//这个iconfont.js就是从iconfont.cn网站上下载后解压的JS文件
const myicon = Icon.createFromIconfontCN({
  scriptUrl: iconFront
})
//引用
Vue.component('my-icon', myicon)

样式名在iconfont.css中找

然后在需要用到图标的组件中使用即可


成功！！！

新增：如果项目里已经下载过图标，又有新的需求要求再下载，这样的需求也是存在的
还是按上面的流程添加完点击下载，把新下载的文件夹里的文件都重新换个新文件名

iconfontsn.css里要修改url地址

然后在main.js中新增一个组件名

在要用到的页面上，ok，成功