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

Nov.20,2021

The name of component you registered globally is svg-icon , not icon . Try changing the code:


    // name  types  name  svg  name
    <svg-icon :name="item.name"/>
    {{item.text}}
</li>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bee6a6-46187.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bee6a6-46187.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?