fix: Wrong colors in FluentIcon

[markoweb2]

🐛 Bug Report

Whichever Icons.Color item comes first, will define the color scheme for all the other colored icons.

💻 Repro or Code Sample

<PageTitle>Home</PageTitle>

<FluentIcon Value="@(new Icons.Color.Size32.Person())" />
<FluentIcon Value="@(new Icons.Color.Size32.Home())" />
<FluentIcon Value="@(new Icons.Color.Size32.Edit())" />

Produces:

While this code:

<PageTitle>Home</PageTitle>

<FluentIcon Value="@(new Icons.Color.Size32.Home())" />
<FluentIcon Value="@(new Icons.Color.Size32.Person())" />
<FluentIcon Value="@(new Icons.Color.Size32.Edit())" />

Produces:

🤔 Expected Behavior

I would expect each icon to be in their originally intended color.

😯 Current Behavior

Every subsequent icon will pick up the color scheme from the very first icon used. (perhaps a nice feature to keep, but make it an opt-in via a Property or something)

🔦 Context

Use multiple colored icons on a page.

🌍 Your Environment

• OS = Windows
• Browser = Microsoft Edge, Google Chrome
• .NET and Fluent UI Blazor library Version = 8.0.10 and 4.10.2
• Visual Studio 2022 (17.11.5)

[vnbaaij]

Ha, that is a nice one. Will look into it.

[vnbaaij]

We've traced it down to an optimization step in the icons repo. Fix has been submitted and PR has been approved already. We will deliver an updated package with the next release.
Brace for even more colors... 😁

[vnbaaij]

With latest icons (with id fix applied):