Vue-svg-loader with Vue 3-CodePudding

Tell me, please, why vue-svg-loader works incorrectly with Vue 3 ore what i doing wrong? I add settings to vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
})

Then i import svg and try add him as component to template

<template>
  <YoutubeIcon />
</template>
<script setup>
import YoutubeIcon from '@/assets/Icons/youtube.svg'
</script>

And after these steps i get error in console

Failed to execute 'createElement' on 'Document': The tag name provided ('/img/youtube.9fd81e7d.svg') is not a valid name.

Versions:

vue: "^3.2.13"
vue-loader: "17.0.0"
vue-svg-loader: "^0.17.0-beta.2" // stable version doesn't work either

CodePudding user response：

I found solution in issues on github page of vue-svg-loader plugin

chainWebpack: config => {
    config.module.rules.delete('svg')

    config.module
      .rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }

Now svg loads correctly