svg图标使用

自定义svg组件

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners" :style="{opacity:opacity,fill:fill,width:width+'px',height:height+'px'}">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
  export default {
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: 'home_index'
      },
      opacity:{
        type:Number,
      },
      fill:{
        type:String,
        default:''
      },
      width:{
        type:Number,
        default:14
      },
      height:{
        type:Number,
        default:14
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
  }
</script>
 
<style scoped>
  .svg-icon {
    vertical-align: -1px;
    overflow: hidden;
  }
</style>

全局注入自定义组件

import Vue from 'vue'
import { XcIcon } from '@/components/index' // svg组件

// register globally
Vue.component('xc-icon', XcIcon)

const req = require.context('./svg', false, /\.svg$/) // 引入svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

使用自定义组件

<div class="table">
<xc-icon iconClass="add_icon" class="edit-in-table"></xc-icon>
</div>
<style>
.table {
	.edit-in-table {
		  fill: #9EA7B4;
          margin-left: -2px;
	}
}
.table：hover {
	.edit-in-table {
        color: #1F6CDD;
        fill: #1F6CDD;
	}
}
</style>

特别注意

引入svg图标的时候，需确定下fill是否已经填充颜色，如果已经填充颜色需要删除