vue element-ui引入第三方图标_添加自定义图标到element-ui中icon

参考链接Vue Element使用icon图标(第三方) - 简书

项目vue版本为vue3，按照上文重新整理的笔记

打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页

在首页顶部菜单 图标管理>我的项目

点击新建项目

新建项目

项目名称随意

记住设置的前缀，一会儿要用

去图标库里搜索选择自己需要的图标

加入到购物车

点击菜单栏上的购物车

添加至项目

选择刚才创建的项目

点击确定

跳转至项目页

点击Font class

鼠标箭头放到图标上可以更改名称

下载到本地，解压

编辑iconfont.css文件

在.iconfont样式上再添加, [class^="ali-icon-"], [class*=" ali-icon-"]

注意：ali-icon-是刚才图标项目设置的前缀，class*=""里面的ali-icon-前面有一个空格

把刚才解压的文件夹命名为ali-icon并放到vue项目的/src/assets目录

在src/main.js引入iconfont.css

import './assets/ali-icon/iconfont.css'

重启vue项目

在阿里图标库的项目页复制需要使用的图标代码

---

最后使用方式和element-ui自带el-icon一样

后续添加新图标需要更新代码后重新下载修改放入项目