Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Nov 4, 2025

Adds fui-Icon base className to all icons created with createFluentIcon and createFluentFontIcon. This provides a common selector to target all Fluent icons without using bare svg selectors.

Changes

  • constants.tsx: Added iconClassName = "fui-Icon" constant
  • createFluentIcon.ts: Applied base className to all SVG icons
  • createFluentFontIcon.tsx: Applied base className to all font icons
  • icon-factories.test.tsx: Added test coverage for base className on all icon variants

Usage

Icons now render with the base class alongside variant classes:

// SVG icon renders with both base and variant classes
<AccessTimeRegular /> 
// → <svg class="fui-Icon ..." />

// Bundled icon applies to both variants
<BundledIcon filled /> 
// → <svg class="fui-Icon fui-Icon-filled ..." /> (visible)
// → <svg class="fui-Icon fui-Icon-regular ..." /> (hidden)

// Font icon includes both classes
<FontIcon />
// → <i class="fui-Icon fui-Icon-font ..." />

Enables targeting all icons with .fui-Icon selector instead of bare svg for better specificity.

Original prompt

This section details on the original issue you should resolve

<issue_title>Feature: Add fui-Icon className to createFluentIcon</issue_title>
<issue_description>### Describe the feature that you would like added

I am proposing to add fui-Icon to all icons. We currently add fui-Icon-<filled|regular> when we bundle icons to use for selectors to hide/show the icon, so we could extend this pattern and add a base className to help narrow selectors down to avoid something like [".${component.iconClassName} svg"]: {}

Additional context

This is currently done in product code because there's no other way to target the svg without using svg directly

Have you discussed this feature with our team

@emmayjiang

Validations

  • Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Low</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits November 4, 2025 10:13
Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>
Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>
Copilot AI changed the title [WIP] Add fui-Icon className to createFluentIcon Add base fui-Icon className to all icons Nov 4, 2025
Copilot AI requested a review from dmytrokirpa November 4, 2025 10:19
@Hotell
Copy link
Contributor

Hotell commented Nov 5, 2025

lets hold on with this one till we merge #911 and #888 ( scheduled for tomorrow ) ty

@dmytrokirpa dmytrokirpa marked this pull request as ready for review November 9, 2025 20:29
@dmytrokirpa dmytrokirpa requested review from a team as code owners November 9, 2025 20:29
@dmytrokirpa dmytrokirpa added enhancement New feature or request react-icons labels Nov 11, 2025
@dmytrokirpa dmytrokirpa requested a review from a team November 11, 2025 12:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request react-icons

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature](react-icons): Add fui-Icon className to createFluentIcon

5 participants