vue使用svg图标一直提示未注册

Question

vue使用svg图标报错：Unknown custom element: <svg-icon>

SvgIcon/index.vue:

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

export default {
  name: 'SvgIcon',
  props: {
iconClass: {
  type: String,
  required: true
},
className:{
  type: String,
  default: ""
}
  },
  computed: {
iconName() {
  return `#icon-${this.iconClass}`
},
svgClass() {
  if (this.className) {
    return 'svg-icon' + this.className
  } else {
    return 'svg-icon'
  }
}
  }
}

icons/index.js:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon' , SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

main.js:

import('@/icons')

页面引用：

<svg-icon icon-class="bug"/>

目录结构：

报错信息：