Inlined SVG files got broken (empty, blank)

[maxceem]

Follow up from #3407 (comment) issue number 2.

If SVG file uses ids for mask and/or for defs such ids may get collied because SVG files are inlined and ids inside SVGs are global for the whole HTML.

For example, we have an issue that the same icon first time is shown good:

But the next times it's shown blank (broken):

Here are related issues found on the internet:

• ID collisions with multiple SVG gregberge/svgr#150
• Allow svgo's prefixIds plugin to use filenames gregberge/svgr#152

Workarounds from these issues don't help us, unfortunately. So the only working solution was to edit the code of SVG file manually, so it doesn't use ids and masks.

We may still come across such issues in the future, as so far the solution may be applied only per SVG files that have such an issue. Probably, we can also ask designers to provide SVG files without masks if possible.

[maxceem]

This is actually a part of #3407 (comment).
I've logged this issue separately, so it would be easier to find it if we have similar issues in the future.

[RishiRajSahu]

@maxceem good research ! 👍

[vikasrohit]

Closing. Please feel free to create new issues for any regression.

[chaitanya71998]

make your fill using ids unique, in the svg component, so that react will render each svg component