the design gives a bunch of svg files that need to be displayed in a loop. I used the svg-sprite-loader plug-in, but the picture didn"t come out
svg component (Icon.vue)
< template >
< svg: class= "svgClass" aria-hidden= "true" >
<use :xlink:href="iconName"></use>
< / svg >
< / template >
< script >
export default {
name: "svg-icon",
props: {
name: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {
iconName () {
return `-sharpicon-${this.name}`
},
svgClass () {
if (this.className) {
return "svg-icon " + this.className
} else {
return "svg-icon"
}
}
}
}
< / script >
< style >
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
< / style >
introduced this file in 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)
when in use
< li VFF = "(item,idx) in types": key= "idx" >
<icon name="husbandry"/>
{{item.text}}
Control shows that the picture doesn"t come out at all