How is it that some FluentUI v9 icons flip in RTL

[petewu100]

In the https://react.fluentui.dev/?path=/docs/icons-overview--default page, the SendRegular and SendFilled icons flip horizontally when the RTL switch at the top of the page is turned on. The AccessTimeRegular and AccessTimeFilled do not flip.

I can see that a class gets added to the SendRegular and SendFilled elements and a CSS rule with transform: scaleX(-1); is applied.

What does the app developer need to do to make this work? Setting dir="rtl" on a container element doesn't seem to make the icon flip. I couldn't find any explanation about how the RTL switch at the top of the page works. It seems like there is some magic in that RTL switch that is not in the sample code provided in Stackblitz.

Thank you.

[khmakoto]

Can you try setting the dir on the FluentProvider element, instead of just on a random container element? I think that should get the icons to flip.

[petewu100]

Thanks for your suggestion.

In my scenario the language (and direction) of the whole task pane may be different than the language (and direction) of the content in some of the components.

If the dir can only be set per FluentProvider, do I need to wrap the components in their own FluentProvider so that they can have their direction?

[khmakoto]

Wrapping the section that requires it with a FluentProvider would be an option to swap the dir of all components under that section. If adding a FluentProvider is too heavy for you, you can use the IconDirectionContextProvider that's exported from @fluentui/react-icons instead and that is internally used by the FluentProvider to do this. If you choose to go with this second option, just make sure that you dedupe dependencies so you don't end up in a situation where they're referencing different contexts.

[petewu100]

I tried wrapping the components in FluentProvider that broke a lot of functionality. I'll need to get a better understanding of what exactly that does and what changes I would need to make to the app to use it properly.

I couldn't find any existing usages of IconDirectionContextProvider of 1JS, so I'm bit a leery of that approach since there isn't an example to follow.