Vue imports local svg files - Codes Helper - Programming Question Answer

Vue imports local svg files

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

Svg vue.js

Nov.20,2021