Add context to provide rtl support for react-icons

packages/react-icons/convert.js

@@ -67,11 +67,13 @@ function processFiles(src, dest) {
 
   const indexPath = path.join(dest, 'index.tsx')
   // Finally add the interface definition and then write out the index.
-  indexContents.push('export { FluentIconsProps } from \'./utils/FluentIconsProps.types\'');
+  indexContents.push('export type { FluentIconsProps } from \'./utils/FluentIconsProps.types\'');
   indexContents.push('export { default as wrapIcon } from \'./utils/wrapIcon\'');
   indexContents.push('export { default as bundleIcon } from \'./utils/bundleIcon\'');
   indexContents.push('export * from \'./utils/useIconState\'');
   indexContents.push('export * from \'./utils/constants\'');
+  indexContents.push('export { IconContextProvider, useIconContext } from \'./contexts/index\'');
+  indexContents.push('export type { IconContextValue } from \'./contexts/index\'');
 
   fs.writeFileSync(indexPath, indexContents.join('\n'), (err) => {
     if (err) throw err;
@@ -129,17 +131,24 @@ function processFolder(srcPath, destPath, resizable) {
       var destFilename = _.camelCase(iconName) // We want them to be camelCase, so access_time would become accessTime here
       destFilename = destFilename.replace(destFilename.substring(0, 1), destFilename.substring(0, 1).toUpperCase()) // capitalize the first letter
 
+      /**
+       * This is a placeholder to add the check to see if the icon should be autoflipped
+       * 
+       * var shouldAutoFlip = shouldFlip(rtlFile);
+       */
+
       var iconContent = fs.readFileSync(srcFile, { encoding: "utf8" })
 
       var jsxCode = resizable ? svgr.default.sync(iconContent, svgrOpts, { filePath: file }) : svgr.default.sync(iconContent, svgrOptsSizedIcons, { filePath: file })
       var jsCode = 
 `
-
-const ${destFilename}Icon = (props: FluentIconsProps) => {
+export const ${destFilename} = (props: FluentIconsProps) => {
   const { fill: primaryFill = 'currentColor', className } = props;
+  const state = useIconState(props);
+  ${shouldAutoFlip ? 'useAutoFlippingIconStyles(state);' : ''}
   return ${jsxCode};
 }
-export const ${destFilename} = /*#__PURE__*/wrapIcon(/*#__PURE__*/${destFilename}Icon, '${destFilename}');
+${destFilename}.displayName = '${destFilename}';
       `
       iconExports.push(jsCode);
     }
@@ -153,7 +162,6 @@ export const ${destFilename} = /*#__PURE__*/wrapIcon(/*#__PURE__*/${destFilename
   }
 
   for(const chunk of iconChunks) {
-    chunk.unshift(`import wrapIcon from "../utils/wrapIcon";`)
     chunk.unshift(`import { FluentIconsProps } from "../utils/FluentIconsProps.types";`)
     chunk.unshift(`import * as React from "react";`)
   }

packages/react-icons/src/contexts/IconDirectionContext.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+const IconDirectionContext = React.createContext<IconDirectionContextValue | undefined>(undefined);
+
+export interface IconDirectionContextValue {
+  textDirection?: 'ltr' | 'rtl'
+}
+
+const IconDirectionContextDefaultValue: IconDirectionContextValue = {};
+
+export const IconDirectionContextProvider = IconDirectionContext.Provider;
+
+export const useIconContext = () => React.useContext(IconDirectionContext) ?? IconDirectionContextDefaultValue;

packages/react-icons/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './IconDirectionContext';

packages/react-icons/src/utils/useAutoFlippingIconStyles.tsx

@@ -0,0 +1,15 @@
+import { FluentIconsProps } from "./FluentIconsProps.types";
+import { makeStyles, mergeClasses } from "@griffel/react";
+import { useIconContext } from "../contexts";
+
+const useFlipStyles = makeStyles({
+    flipped: {
+      transform: 'scaleX(-1)'
+    }
+});
+
+export const useAutoFlippingIconStyles = (state: FluentIconsProps) => {
+    const iconContext = useIconContext();
+    const styles = useFlipStyles();
+    state.className = mergeClasses(iconContext.textDirection === 'rtl' && styles.flipped, state.className)
+}

packages/react-icons/src/utils/useIconState.tsx

@@ -14,6 +14,7 @@ const useRootStyles = makeStyles({
 
 export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>): Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'> => {
     const { title, primaryFill = "currentColor", ...rest } = props;
+
     const state = {
       ...rest,
       title: undefined,