svg ID collision

[dhasdiel]

When using Vite plugin svgr to import multiple SVG files into a single component, I got a collision of the style because the ids how to handle this?

[piotr-cz]

This should be fixed after:

• installing @svgr/plugin-svgo
• enabling SVGO in plugins options:

  {
    svgrOptions: {
      plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
    }
  }

However, when using single file multiple times, all components still use one single ID.
This is known issue for inline svgs:

• ID collisions with multiple SVG gregberge/svgr#150
• Making ids unique across all instances of the same svg gregberge/svgr#322

See: SVGR Docs > Options > SVGO

[piotr-cz]

My particular case may be fixed with https://github.com/laleksiunas/inline-svg-unique-id