在vue项目中使用svg矢量图，下面我们以阿里巴巴图标库为例

1、阿里svg矢量图官网：官网地址

2、进入图标库，选好自己的喜欢的图标加入购物车，添加到项目

3、下载该项目所有图标到本地

要处理颜色的话，可以选择批量操作批量去色

4. 下载好的项目解压，复制下面这两个文件到vue项目中

主要是iconfont.js文件，html文件是为了方便看使用图标对应的类名
解压后：

5.将svg的js文件引入到main.js

import './assets/svgs/iconfont'

6.在页面中使用

7.统一修改图标颜色大小

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: #05d1ca;     // 颜色
    font-size:14px;     // 大小
  }

提示：可以打开下载到本地文件的html文件查看对应图标的类名