[Bug](react-icons): Hiding an Color Variant of icon causes duplicate icons on the same page to become invisible

[grhewitt]

Package version

2.0.314

React version

18.3.1

Environment

I wasn't able to get this information as the command failed.

Current Behavior

When two instances of the same icon are present on the page and then the first becomes hidden for some reason, the second icon becomes invisible.

This seems to be due to the fact that the icons are using the same ids for their gradients, so the second icon is reading gradient information from the first icon's defs. When the first icon becomes hidden the second icon renders with invisible colors.

Expected Behavior

The second icon should not be affected by visibility changes to the first.

Reproduction

https://stackblitz.com/edit/6fkxxb34?file=src%2Fexample.tsx

Steps to reproduce

Use the toggle to hide and show the first icon, the second becomes invisible. You can also replace the duplicated icon with a different unique icon to see that the issue is exclusive to duplicated icons.

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dmytrokirpa]

I can reproduce the issue and confirm that it is a bug, but I don't have an immediate solution. We'll need to look into whether it's possible to generate unique gradient IDs for each icon instance. This could be challenging since we create React components from SVGs.

[Hotell]

We have various options here:

1. dynamically unique IDs via React.useId()

Cons:

• will not work in older react versions which we need to support so would add additional JS to bundle
• will need separate factory and icon generator tweaks to not impact users not using Colored variants
• if user uses both Color and regular variants they will get additional JS

Pros:

• fixes this issue without any user changes
• might go hand in hand with [Bug](assets): invalid HCM rendering for Colored icons #951 (comment)

2. dynamically generated SVG Sprite

We could introduce dynamically generated SVG Sprite behaviour, where every icon would register to singleton which would generate SVG sprite. With that our icons would switch to use <use /> instead of inlined svg

Cons:

• user action needed. Users would need to wrap their applications with <FluentIconsSvgSpriteProvider/>
• additional logic/overhead for SSR scenarios
• bundle size increase caused by the new logic

Pros:

• opt in
• significanltly less SVG nodes across DOM / no SVG duplicates
• mitigates gradient id clashes as every symbol exists only once

[ValentinaKozlova]

Hello @grhewitt,
We're closing this issue as we added user guidance for Color Variants: #978
It covers current issue