Vue-svg-loader: How to use prefix option with cleanupIDs

[waghcwb]

I cannot handle how to configure this loader with custom options for svggo.

The problem is that my SVGs are conflicting because all of they have the same ids (a, b, c, etc). I found a solution on svggo options:
{ cleanupIDs: { prefix: 'somerandomid' } }

But, I cannot figure out how to customize the webpack config for this option.

I've tried this

config.module.rules = config.module.rules.map(rule => {
  if (rule.loader === 'vue-svg-loader') {
    return {
      test: /\.svg$/,
      loader: 'vue-svg-loader',
      options: {
        svggo: {
          plugins: [
            { cleanupIDs: { prefix: 'somerandomid' } },
          ]
        }
      }
    }
  }

  return rule
})

and this

config.module.rules = config.module.rules.map(rule => {
  if (rule.loader === 'vue-svg-loader') {
    return {
      test: /\.svg$/,
      use: () => ({
        loader: 'vue-svg-loader',
        options: {
          plugins: [
            { 
              cleanupIDs: { prefix: crypto.randomBytes(4).toString('hex') }
            },
          ],
        },
      }),
    }
  }

  return rule
})

But without success, am I doing something wrong?

[visualfanatic]

Have you checked this section in FAQ?
https://vue-svg-loader.js.org/faq.html#how-to-prefix-id-attributes

[waghcwb]

@visualfanatic,

Thank you. That worked

// SVG Rules
config.module.rules = config.module.rules.map(rule => {
  if (rule.loader === 'vue-svg-loader') {
    return {
      test: /\.svg$/,
      loader: 'vue-svg-loader',
      options: {
        svgo: {
          plugins: [
            { prefixIds: true },
          ]
        }
      }
    }
  }

  return rule
})