Vue-svg-loader: identical id in different svg

[sashakaralchuk]

as a result, svg in such format https://pastebin.com/m5hMA2A0 convert to https://pastebin.com/Ah1CVRcw

loader change id from path-1jaksljkaslasbf to a

import more than 1 svg with this format to page leads to visual display of two identical svg

P.S. i'm not good with english and not familiar with github, but i found this bug

[visualfanatic]

This is not a bug, you can disable this behavior:

{
  test: /\.svg$/,
  loader: 'vue-svg-loader',
  options: {
    svgo: {
      plugins: [
        { cleanupIDs: false },
      ],
    },
  },
},

[sashakaralchuk]

thanks, where a can find options documentation?

[visualfanatic]

Right now the only property that you can customize is svgo which is an object that is passed to SVGO library. Here is a list of available plugins that you can customize:
https://github.com/svg/svgo

[visualfanatic]

@sashakaralchuk does the example I posted above works for you?

[maulpets]

@visualfanatic if im using vue cli 3 would it be like this?

  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    const svgoConfig = {
                        svgo: {
                           plugins: [{
                              cleanupIDs: false,
                              convertShapeToPath: false
                            }]
                        }
                      }
    // 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')
            .options(svgoConfig)
  },

[maulpets]

@visualfanatic this works, you may want to include it in the docs

// 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')
          .options({
                    svgo: {
                      plugins: [
                        {"cleanupIDs": false},
                        {"convertShapeToPath": false},
                        {"convertStyleToAttrs": false},
                      ]
                    }
                  })
  },
  transpileDependencies: [
  // can be string or regex
  'my-dep',
  /other-dep/
]
}