vue使用svg图标有两种方法，在这里介绍下载代码使用图标的方法。

一、下载图标

打开图标库iconfont-阿里巴巴矢量图标库，搜索图标，加入购物车：

 回到购物车中，选择下载代码：

二、vue中引入图标

1. 将下载包中的iconfont.js文件放到项目中/assert/svg/文件夹中，重新去购物车中下载素材svg图标，放到/assert/svg/icon/文件夹内

 

2. 新建SvgIcon.vue组件 

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
 
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>
 
<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3. 新建index.js文件，全局注册SvgIcon组件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
 
// register globally
Vue.component('svg-icon', SvgIcon)
 
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icon', false, /\.svg$/)
requireAll(req)

 4. main.js中引入icon

 5. 引用时，直接将svg文件名赋值给icon-class即可：

<svg-icon icon-class="chuangjianrenyuan"></svg-icon>