Vuecli 5.x support

[johnnyhwa]

the loader not work in webpack5 environment

[CcrisS]

try something like this:

config.module.rules.delete('svg')
config.module
  .rule('svg')
  .test(/\.(svg)(\?.*)?$/)
  .use('vue-loader')
  .loader('vue-loader')
  .end()
  .use('vue-svg-loader')
  .loader('vue-svg-loader')

[johnnyhwa]

try something like this:

config.module.rules.delete('svg')
config.module
  .rule('svg')
  .test(/\.(svg)(\?.*)?$/)
  .use('vue-loader')
  .loader('vue-loader')
  .end()
  .use('vue-svg-loader')
  .loader('vue-svg-loader')

@CcrisS Thanks, bro. It works
I think it's because the 'asset modules' in webpack 5

[nirali35]

It doesn't work for me. @CcrisS are you able to help?

This is what my entire vue.config.js looks like.

module.exports = {
  chainWebpack: (config) => {
    config.module.rules.delete('svg')
    config.module
      .rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  },
}

[sidneygijzen]

This solution works for me.

[Deuscx]

    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
      svgRule.oneOf("inline")
      .type('javascript/auto')
      .resourceQuery(/inline/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');

try this

[men232]

I use this config for my project, the basic idea to import svg as a component by using query parameters, for example

Example:

import LogoIcon from "/img/logo.svg?vue-component";

vue.config.js

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

		// Remove regular svg config from root rules list
		config.module.rules.delete('svg');

		config.module.rule('svg')
			// Use svg component rule
			.oneOf('svg_as_component')
				.resourceQuery(/vue-component/)
				.test(/\.(svg)(\?.*)?$/)
				.use('babel-loader')
					.loader('babel-loader')
					.end()
				.use('vue-svg-loader')
					.loader('vue-svg-loader')
					.options({
						svgo: {
							plugins: [
								{ prefixIds: true },
								{ cleanupIDs: true },
								{ convertShapeToPath: false },
								{ convertStyleToAttrs: true }
							]
						}
					})
					.end()
				.end()
			// Otherwise use original svg rule
			.oneOf('svg_as_regular')
				.merge(svgRule.toConfig())
				.end();
	},

[linghengqian]

• CC @damianstasik

• I think this requires a documentation related PR?