Analysis of vue cli3 wrapping Svgicon component correct posture (recommended)

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName"></use>
 </svg>
</template>

<script type="text/ecmascript-6">
/* The icon component implements auto-introduction ... /... /Icons/svg.
*After that, we're going to use webpack.
Many of you may be unfamiliar with webpack.
The straightforward explanation is (". /test", false, /. /test", false, /.)
This line of code will go to the test folder (without subdirectories)
The following looks for any file whose name ends in . This line of code will look for all files in the test folder (without the subdirectories) whose names end in .
In plain English, this means that we can introduce the appropriate file module */ by regular matching.
const requireAll = requireContext => ().map(requireContext)
const req = ('../../Icons/svg', false, /\.svg$/)
requireAll(req)
export default {
 name: 'Svgicon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName () {
   return `#icon-${}`
  },
  svgClass () {
   if () {
    return 'svg-icon ' + 
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>

<style>
.svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
 }
</style>

chainWebpack: config => {
  const svgRule = ('svg')
  ()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
}