[Feature]: Auto mirror icons in Fluent UI 9/react-icons 2

[NotWoods]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

It would be great to have a utility to mirror icons in RTL languages automatically. Icons like PanelLeftExpand currently need to be swapped to the equivalent PanelRightExpand manually, or have CSS applied to mirror it manually.

This can be implemented with a simple utility like bundleIcon:

const useMirrorIconStyles = makeStyles({
  mirror: { transform: 'scaleX(-1)' }
});

export function autoMirrorIcon(Icon: React.FC<FluentIconsProps>): React.FC<FluentIconsProps> {
  return (props) => {
    const { dir } = useFluent();
    const classes = useMirrorIconStyles();

    return <Icon {...props} className={mergeClasses(dir === 'rtl' && classes.mirror, props.className)} />;
  };
}

@fluentui/react-icons alternative

Alternatively, this could be done automatically as all the mirror-able icons are listed in rtl.txt.

@fluentui/react-icons could automatically apply the mirroring CSS shown above to those icons. It can either check for the [dir="rtl"] attribute or depend on @fluentui/react-shared-contexts.

That matches behaviour on Android, where the icons are marked with android:autoMirrored so Android will flip them.

Have you discussed this feature with our team

Paul Gildea

Additional context

No response

Validations

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

[paulgildea]

cc: @behowell and @tomi-msft

[jurokapsiar]

@paulgildea @khmakoto @tomi-msft can this be prioritized? It is a feature requirement from Teams side as well.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.