feat: Add a font icon classname to v9 font icons (#741)

microsoft · Jul 29, 2024 · 337eda0 · 337eda0
1 parent 077da92
commit 337eda0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/react-icons/src/utils/constants.tsx b/packages/react-icons/src/utils/constants.tsx
@@ -1,3 +1,4 @@
 export const iconFilledClassName = "fui-Icon-filled";
 export const iconRegularClassName = "fui-Icon-regular";
-export const iconLightClassName = "fui-Icon-light";
+export const iconLightClassName = "fui-Icon-light";
+export const fontIconClassName = "fui-Icon-font"
diff --git a/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx b/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { FluentIconsProps } from '../FluentIconsProps.types';
 import { makeStyles, makeStaticStyles, mergeClasses } from "@griffel/react";
 import { useIconState } from '../useIconState';
+import { fontIconClassName } from '../constants';
 
 import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
 import fontFilledWoff from './FluentSystemIcons-Filled.woff';
@@ -96,7 +97,7 @@ export function createFluentFontIcon(displayName: string, codepoint: string, fon
     const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & { codepoint: string} = (props) => {
         useStaticStyles();
         const styles = useRootStyles();
-        const className = mergeClasses(styles.root, styles[font], props.className);
+        const className = mergeClasses(styles.root, styles[font], fontIconClassName, props.className);
         const state = useIconState<React.HTMLAttributes<HTMLElement>, HTMLElement>({...props, className}, { flipInRtl: options?.flipInRtl });