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 avcajaraville · Accepted Answer · 2020-02-13T11:23:18

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.

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

1 Answers