search

damianstasik / vue-svg-loader

🔨 webpack loader that lets you use SVG files as Vue components
https://vue-svg-loader.js.org
MIT License
645 stars 86 forks source link

Vuecli 5.x support #185

Open johnnyhwa opened 2 years ago

johnnyhwa commented 2 years ago

the loader not work in webpack5 environment

CcrisS commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

This solution works for me.

Deuscx commented 2 years ago 
    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 commented 2 years ago

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 commented 2 years ago