动态引入阿里巴巴矢量图

在阿里巴巴矢量图中选择心意的图片：

如果是第一次，可以先选择喜欢的图片加入购物车在添加进自己的项目

选中的图标文件下载至本地

如果需要下载彩色的图标需要选择symbol

打开压缩包将文件复制到本地项目中，demo开头的文件删除：

在main.js中引入：

import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'

如果是彩色图片需要引js
如果是单个页面需要图标可以不用全局应用，将对应的页面引入即可

页面引用

1)如果是单色的图标：

<i class="iconfont iconshucai-"></i>

’iconfont‘是必须的；
注意看json文件中的前缀：

2)彩色图标：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#iconshucai-13"></use>
</svg>
.icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

注意‘#’

注意：

解析json文件

1.安装axios：

cnpm install --save axios vue-axios

2.页面引用axios:

import axios from 'axios'

3.利用axios解析json文件

getUserAccount() { 
  let _this = this; 
  axios.get('/static/iconfont/iconfont.json').then((res) => {
    _this.iconList = res.data.glyphs;
    console.log(_this.iconlist)
  }).catch(function (error) { }); }