vue-svg-loader在Vue 3中使用异常，求排查原因及解决方法

你的问题出在webpack规则配置未正确覆盖Vue CLI默认的SVG处理逻辑，导致导入的SVG仍被当作静态图片资源处理，而非转换为Vue组件，所以模板里使用时会把生成的资源路径当成无效标签名报错。

正确配置方案 #

修改vue.config.js，通过区分SVG目录来单独处理需要作为组件导入的文件：

1. 添加路径解析工具函数并调整webpack规则：

const path = require('path')
const { defineConfig } = require('@vue/cli-service')

// 路径解析函数
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    // 让默认SVG规则排除Icons目录下的文件
    config.module.rule('svg')
      .exclude.add(resolve('src/assets/Icons'))
      .end()

    // 为Icons目录下的SVG单独创建规则，用vue-svg-loader处理
    config.module.rule('svg-components')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/Icons'))
      .end()
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
})

配置逻辑说明 #

Vue CLI默认对所有.svg文件启用了url-loader/file-loader处理，会将SVG转换为资源路径。你之前的配置仅清除了默认规则的loader，但未限制规则的作用范围，后续仍会有其他规则接管SVG处理。

通过拆分规则：

• 让默认规则跳过你的Icons目录
• 为Icons目录单独配置vue-svg-loader，确保这些SVG被编译为Vue组件

额外注意事项 #

• 你使用的vue-loader@17.0.0和vue-svg-loader@0.17.0-beta.2版本符合Vue 3要求，稳定版vue-svg-loader不支持Vue 3，无需更换
• 修改配置后必须重启开发服务，否则webpack不会加载新配置
• 你的组件导入和模板使用方式是正确的，配置生效后<YoutubeIcon />即可正常渲染

内容的提问来源于stack exchange，提问作者Faltfromoss