把svg图片封装成svg代码自动引入

第一步写封装svg代码

<template>
<svg :class="svgClass" fill="#fff" aria-hidden="true" @tap="tapEvent">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default{
name: 'yu-svg-icon'
props:{
type: {
  type: String,
  required: true
},
className:{
type: String,
default:''
}
},
computed:{
iconName() {
return `#icon-${this.type}`
},
svgClass(){
if(this.className) {
return 'svg-icon '+ this.className
} else {
return 'svg-icon'
}
}
},
methods:{
tapEvent() {
this.$emit('on-tap')
}
}
}
</script>

引入的时候就直接，写<yu-svg-icon type="compview"></yu-svg-icon>,type的内容就是引入svg图片的名字

一定要全局引入，首先要引入svg图标的路径
const reqc = require.context('@/assets/icons',false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(reqc)
import YuSvgIcon from '@/components/yu-svg-icon'
Vue.component('yu-svg-icon',YuSvgIcon)