2

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

Ayudh
  • 1,673
  • 1
  • 22
  • 55

1 Answers1

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.

avcajaraville
  • 9,041
  • 2
  • 28
  • 37
  • I followed this but I get "cannot find module" when I try to import an SVG as a component – Ayudh Feb 13 '20 at 14:14
  • I had to also add `chainWebpack: config => { config.module.rules.delete("svg"); }` - See this answer https://stackoverflow.com/a/50140937/5924962 – fafrd Jul 12 '21 at 19:14