Add context to provide rtl support for react-icons

packages/react-icons/convert.js

@@ -10,6 +10,7 @@ const _ = require("lodash");
 
 const SRC_PATH = argv.source;
 const DEST_PATH = argv.dest;
+const RTL_FILTER_PATH =argv.filter;
 const TSX_EXTENSION = '.tsx'
 
 if (!SRC_PATH) {
@@ -18,12 +19,17 @@ if (!SRC_PATH) {
 if (!DEST_PATH) {
   throw new Error("Output destination folder not specified by --dest");
 }
+if (!RTL_FILTER_PATH) {
+  throw new Error("Filter folder not specified by --filter");
+}
 
 if (!fs.existsSync(DEST_PATH)) {
   fs.mkdirSync(DEST_PATH);
 }
 
 processFiles(SRC_PATH, DEST_PATH)
+const filterFile = fs.readFileSync(RTL_FILTER_PATH, { encoding: 'utf8' })
+var rtlArray = filterFile.split(/\r?\n/);
 
 function processFiles(src, dest) {
   /** @type string[] */
@@ -66,11 +72,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;
@@ -122,6 +130,8 @@ function processFolder(srcPath, destPath, resizable) {
       if(resizable && !file.includes("20")) {
         return
       }
+      // Check to see if the svg should be autoflipped
+      var shouldAutoFlip = rtlArray.includes(file);
       var iconName = file.substr(0, file.length - 4) // strip '.svg'
       iconName = iconName.replace("ic_fluent_", "") // strip ic_fluent_
       iconName = resizable ? iconName.replace("20", "") : iconName
@@ -133,12 +143,13 @@ function processFolder(srcPath, destPath, resizable) {
       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);
     }
@@ -152,7 +163,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/package.json

@@ -16,7 +16,7 @@
     "cleanSvg": "rm -rf ./intermediate",
     "copy": "node ../../importer/generate.js --source=../../assets --dest=./intermediate --extension=svg --target=react",
     "copy:font-files": "cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib/utils/fonts/. && cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib-cjs/utils/fonts/.",
-    "convert:svg": "node convert.js --source=./intermediate --dest=./src",
+    "convert:svg": "node convert.js --source=./intermediate --dest=./src --filter=../../importer/rtl.txt",
     "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts",
     "generate:font-regular": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Regular --codepoints=../../fonts/FluentSystemIcons-Regular.json",
     "generate:font-filled": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Filled --codepoints=../../fonts/FluentSystemIcons-Filled.json",

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,