纯样式的svg-icon

// components/SvgIcon/index.vue

<template>
  <div class="svg-icon" :style="{maskImage: `url(${imgUrl})`, maskRepeat: 'no-repeat',  maskPosition: 'center', width,  height,  backgroundColor: color}"></div>
</template>
<script>
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '20px'
    },
    height: {
      type: String,
      default: '20px'
    },
    color: {
      type: String,
      default: '#000'
    }
  }
}
</script>

<style scoped>
.svg-icon {
  display: block;
  width: 42px;
  height: 40px;
  background-color: #252525;
  cursor: pointer;
}
</style>

全局注册
// main.js

import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon', SvgIcon)

使用

<svg-icon :imgUrl="require('@/assets/images/svg/'+item.icon+'.svg')" width="40px" height="40px" color="#666"></svg-icon>