在Vue项目中使用阿里巴巴矢量图--全解

• 首先，确保你有一个项目。
• 如果没有
  vue init webpack “你的项目名”
  更多关于新建项目的传送门：https://blog.csdn.net/AIB_Kasic/article/details/92830771
• 浏览一下你项目的文件结构
  • src–>assets (如没有请自行新建)

引入阿里巴巴矢量图

• 登录阿里巴巴矢量图库[https://www.iconfont.cn/]，如图
  
• 选择图标—>添加到购物车
  
• 添加至项目
  
  将图标下载至本地
  
• 解压
  
• 打开文件 ，删除红框中的两个文件
  

引入

打开vue项目所在目录 此处是D:vuetest/src/assets (根据自己项目的实际情况写路径)

• 在 assets文件夹中新建icon文件夹
  
• 打开文件夹，将上图的文件全部拉进去（选中直接拖进icon文件夹中）
• 
• 使用
  • 进入vscode打开项目
  • 进入src—>assets–>icon中可以看到如下
  • 
  • 点击进入（随便挑一个展示）如图 （红框部分为图标名字）
  • 
  • 在html中使用
  • 先上效果图
    
  • 代码
    <p><i style="font-size:20px;color:#65dc78" class="icon iconfont icon-weixin"></i>微信</p>

  解析:矢量图用起来没有颜色，我在这里自己给他加上了绿色，还有class记得要用 icon iconfont

<完结>