Vue3项目使用vue-svg-loader加载SVG文件报无效标签名错误

问题原因 #

你当前使用的vue-svg-loader@0.16.0仅适配Vue2，不支持Vue3；同时你没有配置webpack规则覆盖vue-cli默认的svg处理逻辑，默认svg会被file-loader处理返回资源路径，你将路径直接作为Vue组件注册使用，就会触发「把路径当作标签名创建DOM元素」的报错。

解决步骤 #

1. 卸载不兼容的依赖
   执行以下命令卸载旧版vue-svg-loader和Vue2专用的vue-template-compiler：

npm uninstall vue-svg-loader vue-template-compiler

2. 安装Vue3适配的vue-svg-loader

npm install vue-svg-loader@next --save-dev

3. 新增vue.config.js配置
   在项目根目录新建vue.config.js文件，添加以下配置，让webpack使用vue-svg-loader处理svg文件：

module.exports = {
  chainWebpack: config => {
    // 清除默认的svg处理规则
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    // 挂载vue-svg-loader
    svgRule.use('vue-svg-loader').loader('vue-svg-loader')
  }
}

4. 调整组件命名（可选，符合Vue规范）
   Vue推荐模板中组件使用PascalCase格式，修改你的组件代码：

<template>
  <!-- 其他代码不变 -->
  <MenuIcon />
</template>

<script>
import MenuIcon from "../assets/Icons/twitter-brands.svg";
export default {
  name: "Navigation",
  components: {
    MenuIcon
  }
}
</script>

5. 重启开发服务
   重新执行npm run serve即可生效。

内容的提问来源于stack exchange，提问作者Ikram Ul Haq