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:

• https://github.com/gregberge/svgr/issues/150
• https://github.com/gregberge/svgr/issues/322

See: SVGR Docs > Options > SVGO

[piotr-cz]

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