14

If I want to use vue-svg-loader in an existing vue-cli application, I get the error message 

[Vue warn]: Invalid Component definition: /img/logout.b0c3dfb7.svg

Following Steps are already done:

1) Install vue-svg-loader as devDependency

2) Add Webpack Config in vue.config.js (root directory):

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

3) Import SVG and inject as Component

import Logout from '@/assets/img/icons/logout.svg';

export default {
    components: {
      Logout,
    },
...
}

4) Use it in the template (vuetify as UI-Framework)

<v-btn icon @click="logout()">
    <Logout class="icon" />
</v-btn>

3 Questions:

  1. What is my mistake?
  2. How/where can/should I add new Webpack settings
  3. or modify/overwrite/delete existing ones

in a vue-cli (V3) project?

zero298
  • 25,467
  • 10
  • 75
  • 100
  • Are you sure there aren't any other loaders that handle svg in your webpack pipeline? The default vue project comes one that loads the files using fileloader – Ferrybig Apr 23 '18 at 16:44
  • yes, I would like to use `vue-svg-loader` instead of `file-loader` and I would like to bypass it in case of SVGs,.. How and where can/should I do that? –  Apr 23 '18 at 17:31
  • Have you taken a look at this GiHub issue? https://github.com/visualfanatic/vue-svg-loader/issues/1 – zero298 Apr 23 '18 at 18:04
  • @zero298 sure, but that‘s an old issue and old vue,.. –  Apr 24 '18 at 05:28
  • You should be able to remove the existing loader like this https://github.com/vuejs/vue-cli/issues/1045 – lukas-reineke Apr 24 '18 at 08:11
  • @lukas-reineke I don’t want to remove any parts of app (created by CLI) but to add new settings or modify/delete existing ones, with/via an own config file ( = normal case ) –  Apr 24 '18 at 18:10
  • @Lonely yes? thats what the link is about, replacing the svg loader – lukas-reineke Apr 24 '18 at 18:15
  • @lukas-reineke I already know the content there, thank you, but that‘s unfortunately an old answer and also the wrong way to do it,.. –  Apr 24 '18 at 18:18
  • @Lonely it's 27 days old.. but never mind, only wanted to help. Good luck finding a solution. – lukas-reineke Apr 24 '18 at 18:22
  • oh sorry @lukas-reineke I‘ve klicked the link from zero and did not see your link, ok thank you, I‘ll try it,.. –  Apr 24 '18 at 18:25
  • Do you have a svg test for your fonts in your webpack config ? If you do, try to remove 'svg' from the font test. – Sandwell Apr 25 '18 at 12:32

2 Answers2

24

Add the following into vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg");
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/, 
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};
4

In webpack.base.conf.js add the following code under rule:

 {
    test: /\.svg$/,
    loader: 'vue-svg-loader',
  }

And remove the svg from the existing below rule:

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
 }
MridulSri
  • 81
  • 4