Vue项目iconfont新增svg图标

最近接手一个开发一半的Vue3的后台管理项目，由于样式需要，需要新增一些svg图标，项目使用的是iconfont接下来我会通过几个步骤在原来iconfont基础上去新增一些自己的图标；

一、iconfont文件转换为svg源文件；

1. 通过访问icomoon将iconfont.svg文件转换为svg源文件;
   地址链接：https://icomoon.io/app/#/select/font
   

2. 点击import Icons导入项目里的iconfont.svg文件，导入之后选中需要转换下载的SVG图标
   

3. 下载源文件
   

4. 下载之后可以看到SVG目录，PNG目录等
   

由于我们阿里矢量图标库已新建了项目，我们需要将转换过后的SVG源文件上传至阿里矢量图标库项目里

二、上传至阿里矢量图标库

1. 通过第一步的操作我们已经拿到了项目里原来的svg文件，接下来我们上传至阿里矢量图标库
   

2. 去下载的SVG文件夹选择需要的SVG并上传，等待平台审核审核
   
   

3. 审核通过我们保存提交到项目里

4. 挑选新的icon加入购物车并加入项目
   

5. 下载至本地iconfont
   

三、项目里引用

1. 将项Vue项目里的iconfont.*文件替换为最新下载的
2. 将项Vue项目里的iconfont.css文件替换为最新下载的并且修改引用路径
   注：引用路径一定要修改，否则无法正常展示
   
3. 直接使用

	<span class="iconfont ic-play"></span>
	<span class="iconfont ic-qrcode"></span>
	<span class="iconfont ic-picture_fill"></span>

以上我们就完成了iconfont的新增替换过程，如果有疑问的同学可以私信我

喜欢下方小程序的私信送源码