在vue中使用iconfont的项目图标

为了方便开发，同一个图标变换不同的颜色，不需要UI设计师每个颜色切一张图，iconfont的项目设置真的是yyds

1. 登录

iconfont官网

2. 新建项目

1. 找到【资源管理】> 【我的项目】
   
2. 点击新建项目
   
3. 设置项目（根据自己的项目需求）点击保存按钮保存项目设置
   

4. 添加图标到你的项目中

上传的图片是svg格式

5. 在vue中使用

1. 点击下载至本地按钮下载资源文件

2. 把下载的资源文件放到vue项目中
   

   main.js

   import './assets/font/iconfont.css' // 引入阿里图标库的图标
   

   使用

   <i class="iconfont icon-sz02"></i>
   

   切换颜色

   <i class="iconfont icon-sz02" style="color: red;"></i>
   

   推荐在使用的时候封装一个组件方便统一管理和使用~