[Vuejs]-How to inherit svg's css properties using vue svg loader

by

1👍

✅

Likely what is happening is that all of your SVG files use the same class names (st0, st1, etc). They are overriding each other. You’ll need to:

  1. manually rename the classes in each file, so they use different names, or

  2. That file looks like it came from Illustrator. Assuming they all did, then load the SVGs back into Illustrator, and re-export them. This time change which method AI uses to set the element styles. I don’t have AI handy right now, but there will probably be three options (I don’t recall exactly what they are called):

    • Internal CSS – what the file above is using
    • Style attributes – uses the style="..." attrinbute
    • Attributes – uses attributes like fill="#ff0000"

If you need to style the SVGs with CSS in your page, you’ll probably want to use the last option. That’s because style attributes have a higher priority than CSS, so you would need to use the CSS !important flag, which is not generally recommended.

enter image description here

👤Paul LeBeau

0👍

I’ve found that the vue-svg-loader documentation is pretty thin, mainly because all its configuration is done via the svgo library. There are some clues in this FAQ, which shows you how to customise the svgo configuration in your webpack config.

So maybe you want something like this in your vue.config.js file:

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

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            addClassesToSVGElement: {
              classNames: ["foo", "bar"],
            }
          ],
        },
      });
  },
};
👤camslice

Leave a comment