Vue 引用SVG图片的组件

1. 将所有矢量svg图上传到阿里巴巴矢量图标库添加链接描述

   • 注册登录
   • 选择资源管理 => 我的图标 => 我的项目 => 上传图标至项目，上传完成后，下方出现一个/at.alicdn.com/…的链接，点击该链接，将弹出页面的脚本内容复制下来。
     上传的图标效果如下：
     

2. 在项目中新建一个文件icon.js，我把文件放在了assets目录下，便于打包时对代码进行压缩处理。将复制的脚本内容粘贴到这个目录下。
   

3. 在component目录下定义一个引用svg图标的组件SvgIcon.vue，组件内容如下：

<!-- 自定义图标 -->
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
import '../../assets/icons/icon'
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .svg-icon {
    width: 25px;
    height: 25px;
    fill: currentColor;//此属性为更改svg颜色属性设置
    overflow: hidden;
  }
</style>

解释：
iconClass为自定义的图标样式
className为引用的svg图标名称
样式中的fill: currentColor;是必须的，除非不需要对图标进行变色

4. 在icon.js统计目录下定义index.js:

import Vue from 'vue'
import SvgIcon from '@/components/common/SvgIcon'
// 全局注册组件
Vue.component('svg-icon', SvgIcon)
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons', false, /\.svg$/)
// 加载目录下的所有 svg 文件
requireAll(req)

5. 在main.js中引用index文件
   
6. 使用：

<svg-icon icon-class='able' class-name="icon"></svg-icon>

 .icon{
    width: 18px;
    height: 18px;
    color: yellowgreen;
  }

效果：