Vue-svg-loader with Vue 3 - vue.js

Question

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

Answer 1

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

Answer 2

After several hours of searching and trying, I found a solution.
package.json
"vue": "^3.2.13",
"vue-loader": "^17.0.1",
"svg-vue3-loader": "^1.0.2"
vue.config.js
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule.delete('type');
svgRule.delete('generator');
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('svg-vue3-loader')
.loader('svg-vue3-loader');
},