Invalid Component definition in vue svg loader - vue.js

Question

I want to use svg image in my vue. However i keep getting invalid component definition in my website. I also created a configuration file vue.config.js. However , the same error keep coming out although i followed the documentation correctly. Can anyone help me with this?
Navigation.vue
<template>
<header>
<nav class="container">
<div class="branding">
<router-link class="header" :to="{ name:'Home'}">Blog</router-link>
</div>
<div class="nav-links">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</div>
</nav>
<MenuIcon/>
<transition name="mobile-nav">
<ul>
<router-link class="link" to="#">Home</router-link>
<router-link class="link" to="#">Blogs</router-link>
<router-link class="link" to="#">Create Post</router-link>
<router-link class="link" to="#">Login/Register</router-link>
</ul>
</transition>
</header>
</template>
<script>
import MenuIcon from '../assets/Icons/bars-regular.svg'
export default {
name: 'navigation',
components:{
MenuIcon,
}
};
</script>
vue.config.js
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
};

Answer 1

you need to paste the SVG's code inside a Vue file which ends with .vue
example:
../assets/Icons/bars-regular.vue

Answer 2

I solved the problem by adding this code in vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg");
},
configureWebpack: {
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader',
},
],
}
}
};