11

Vue Cli defaults to file-loader for SVG assets, but I want to use svg-sprite-loader (as well as a few others) instead.

I updated the vue.config.js file to do this and it still seems to use file-loader. Almost as though it's not picking up my config at all.

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                name: '[name]-[hash:7]',
                prefixize: true
              }
            },
            'svg-fill-loader',
            'svgo-loader'
          ]
        }
      ]
    }
  }
}

Is there anything wrong with my setup?

I'm still getting SVG files imported into my component as a URL string / path when it should be an object with properties.

Many thanks.

3
  • Hey Michael, it's been some time now. Did you find an answer? Apr 1, 2018 at 18:03
  • Yes I did. I could have sworn I answered it. In any case, the user below has the correct method. You need to use Webpack chain to remove the default regex entirely from the default setup, then add your own rule. Despite putting your rules in, it wont work until you remove the ones already set. Custom rules that match ones already setup (like SVG) aren't overridden. Apr 20, 2018 at 16:15
  • This is the exact question I had. +1
    – John Smith
    May 24, 2018 at 5:39

5 Answers 5

11

This took me a while to find a work around. Basically you need to stop file-loader matching on .svg. The best way I have found to do this is using chainWebpack and returning false from the test method on file-loader. I have included my working config.

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-inline-loader',
              options: {
                limit: 10000,
                name: 'assets/img/[name].[hash:7].[ext]'
              }
            }
          ]
        }
      ]
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg')
      .test(() => false)
      .use('file-loader')
  }
}

3

The Webpack docs for Vue CLI 3.0 beta got updated with an example on how to replace an existing Base Loader. For svg-sprite-loader this means that you'll have to add the following configuration to your vue.config.js:

chainWebpack: config => {
  config.module
    .rule('svg')
    .use('file-loader')
    .loader('svg-sprite-loader')
}
2
  • Just to note. You can refence your svg with <svg> <use xlink:href="#youriconfilename" /> </svg>
    – bashkovpd
    Sep 2, 2018 at 11:15
  • @eay The above is correct but you need to load the module you wish to replace then clear then add see this example in the docs Dec 2, 2018 at 14:02
3

I'm using Vue CLI 3.0.3 and this config works for me 😉

const path = require('path');
const glob = require('glob');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new SpriteLoaderPlugin()
    ]
  },
  chainWebpack: config => {
    config.module.rules.delete('svg');

    config
      .entry('app')
      .clear()
      .add(path.resolve(__dirname, './src/main.ts'))

    config
      .entry('sprite')
      .add(...glob.sync(path.resolve(__dirname, `./src/assets/icons/*.svg`)));

    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('svg-sprite-loader')
      .options({
        extract: true,
        spriteFilename: 'icons.svg'
      })
  }
};
2

Vue CLI docs for version 3.x in webpack section suggests to use something like this:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

Even vue-svg-loader configuration guide suggests same approach.

0
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.clear()

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.