设计给了一堆svg文件 需要循环展示出来 我用了svg-sprite-loader插件但是图片出不来
svg组件(Icon.vue)
export default {
name: 'svg-icon',
props: {name: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {iconName () {
return `#icon-${this.name}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
.svg-icon {width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
在main.js引入了这个文件
import Vue from 'vue'
import SvgIcon from '@/components/Icon.vue'
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req)
使用的时候
{{item.text}}
控制显示这个样子 图片根本没出来