vue-cli 3.0 自定义loader_vue3.0+svg-sprite-loader+自定义svg组件报错，求大神指教

青旅半醒 2023-01-12 10:25 90阅读 0赞

框架和插件版本：

"core-js": "^3.6.5",
        "element-plus": "^1.0.1-beta.6",
        "svg-sprite-loader": "^5.1.1",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"

相关配置参考自：使用 SVG 组件

以下是我的操作步骤和内容

**一、安装 svg-sprite-loader**

yarn add svg-sprite-loader

**二、创建自定义svg组件**

/* 文件路径：src/components/SvgIcon/index.vue */
    
    <template>
      <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName" />
      </svg>
    </template>
    
    <script>
    export default {
         
      name: 'SvgIcon',
      props: {
         
        iconClass: {
         
          type: String,
          required: true
        }
      },
      computed: {
         
        iconName() {
         
          return `#icon-${
         this.iconClass}`
        }
      }
    }
    </script>
    
    <style scoped>
    .svg-icon {
         
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

**三、创建icons文件夹**

![94016c4ccc09313a5e57047261523da7.png][]

icon文件夹建立路径及内容

// index.js文件内容
    
    
    import {
          createApp } from 'vue'
    
    import SvgIcon from '@/components/SvgIcon'  // 引入自定义组件
    
    createApp().component('svg-icon', SvgIcon)  // 注册到全局
    
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    const req = require.context('./svgs', false, /.svg$/)
    requireAll(req)

**四、main.js引入自定义svg组件**

import './assets/icons'

**五、vue.config.js配置**

**六、在页面中使用组件**

**七、错误问题**

![a0c442377ee3d79e0901b50d969d7e58.png][]

运行时的icon没有正常显示，下面是报错的文本

[Vue warn]: Failed to resolve component: svg-icon 
      at <About onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
      at <RouterView> 
      at <App>

**求大神指教，万分感谢！！！**

[94016c4ccc09313a5e57047261523da7.png]: /images/20221119/53bad1b9e85b4e279675d1790e5c3f5d.png
[a0c442377ee3d79e0901b50d969d7e58.png]: /images/20221119/43ab66f98aee4f30896f4358e6f380a0.png