Configure Vue-SVG-Loader in Vue.config.js

Question

I'm using Vue/cli version 4.2.2 and I downloaded the vue-svg-loader, I was following the accepted answer here How can I import a svg file to a Vue component? and according to the comments, I have to configure vue.config.js but I could not find how exactly I should configure it.

Current these are the contents of my vue.config.js file:

const path = require("path");

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        "./src/styles/global.scss"
      ]
    },
    svgLoader: {
      svgo: {
        plugins: []
      }
    }
  }
}

As you can see, there is an empty array where I suppose I need to add something, though I have no idea what...

EDIT: In addition to the marked answer, I had to follow these steps: Unable to import svg files in typescript <- The first answer && I got the code from https://github.com/visualfanatic/vue-svg-loader/blob/master/docs/faq.md#how-to-use-this-loader-with-typescript

avcajaraville · Accepted Answer · 2020-02-13 11:23:18Z

3

You need to configure webpack to use vue-svg-loader, something like this should work:

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

As stated in vue documentation:

The easiest way to tweak the webpack config is providing an object to the configureWebpack option in vue.config.js

PS: make sure you have vue-svg-loader as dependency on your project.

answered Feb 13, 2020 at 11:23

avcajaraville

9,0842 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayudh Over a year ago

I followed this but I get "cannot find module" when I try to import an SVG as a component

fafrd Over a year ago

I had to also add chainWebpack: config => { config.module.rules.delete("svg"); } - See this answer stackoverflow.com/a/50140937/5924962

Collectives™ on Stack Overflow

Configure Vue-SVG-Loader in Vue.config.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related