Invalid Component definition in vue svg loader-CodePudding

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 >
            <div >
                <router-link  :to="{ name:'Home'}">Blog</router-link>
            </div>

            <div >
                <ul>
                    <router-link  to="#">Home</router-link>
                    <router-link  to="#">Blogs</router-link>
                    <router-link  to="#">Create Post</router-link>
                    <router-link  to="#">Login/Register</router-link>
                </ul>
            </div>
        </nav>
        <MenuIcon/>
        <transition name="mobile-nav">
                <ul>
                    <router-link  to="#">Home</router-link>
                    <router-link  to="#">Blogs</router-link>
                    <router-link  to="#">Create Post</router-link>
                    <router-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');
  },
};

CodePudding user response：

you need to paste the SVG's code inside a Vue file which ends with .vue

example:

 ../assets/Icons/bars-regular.vue

CodePudding user response：

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',
        },
      ],
    }
  }
};