Icons autoflip logic

importer/rtlMetadata.js

@@ -0,0 +1,111 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+const fs = require("fs");
+const path = require("path");
+const process = require("process");
+const argv = require("yargs").boolean("selector").default("selector", false).boolean("keepdirs").default("keepdirs", false).argv;
+const _ = require("lodash");
+
+const SRC_PATH = argv.source;
+const DEST_PATH = argv.dest;
+
+if (!SRC_PATH) {
+ throw new Error("Icon source folder not specified by --source");
+}
+if (!DEST_PATH) {
+throw new Error("Output destination folder not specified by --dest");
+}
+
+if (!fs.existsSync(DEST_PATH)) {
+ fs.mkdirSync(DEST_PATH);
+}
+
+const destFile = path.join(DEST_PATH, 'rtl.json')
+
+processFolder(SRC_PATH);
+const result ={}
+function processFolder(srcPath) {
+ fs.readdir(srcPath, function (err, files) {
+ if (err) {
+ console.error("Could not list the directory.", err);
+ process.exit(1);
+ }
+
+ files.forEach(function (file, index) {
+ var srcFile = path.join(srcPath, file);
+
+ fs.stat(srcFile, function (error, stat) {
+ if (error) {
+ console.error("Error stating file.", error);
+ return;
+ }
+
+ if (stat.isDirectory()) {
+ processFolder(srcFile)
+ return;
+ } else if (file.startsWith('.')) {
+ // Skip invisible files
+ return;
+ } else if (file.startsWith('_')) {
+ // Skip invalid file names
+ return;
+ } else if(file.endsWith('.json')) {
+ // If it's a metadata file, read and parse its content
+ fs.readFile(srcFile, 'utf8', (err, data) => {
+ if (err) {
+ console.error('Error reading metadata file:', err);
+ return;
+ }
+ try {
+ // Parse the json content
+ let metadata = JSON.parse(data);
+ let iconSize = metadata.size //get the size array
+ let iconName = metadata.name; // get the icon name
+ const directionType = metadata.directionType ? metadata.directionType : 'none'; // check to see if a directionType is in this manifest.json file
+ if(directionType === 'none') { //ignore files with no directionType
+ return
+ }
+ iconName = iconName.replace(/\s+/g, '') //remove space
+ iconName = iconName.replace(iconName.substring(0, 1), iconName.substring(0, 1).toUpperCase()) // capitalize the first letter
+
+ iconSize.forEach((size, i) => { //iterate through the size file and create entries for each icon file
+ let tempName = iconName;
+
+ tempName = tempName + size + "Filled";
+ result[tempName] = directionType;
+
+ tempName = iconName;
+ tempName = tempName + size + "Regular";
+ result[tempName] = directionType;
+
+ })
+ let tempName = iconName
+ tempName = tempName + "Filled";
+ result[tempName] = directionType;
+
+ tempName = iconName;
+ tempName = tempName + "Regular";
+ result[tempName] = directionType;
+
+ convertToJson(result)
+
+ } catch (error) {
+ console.error('Error parsing JSON in metadata file:', error);
+ }
+ })
+ }
+ }) 
+ })
+ })
+}
+//console.log(result)
+
+function convertToJson(result) {
+ const compiledJson = JSON.stringify(result, null, 2);
+ fs.writeFile(destFile, compiledJson, 'utf8', (err) => {
+ if (err) {
+ console.error('Error writing to JSON fIle: ', err)
+ }
+ })
+}

packages/react-icons/convert-font.js

@@ -3,12 +3,14 @@
 // @ts-check
 
 const fs = require("fs/promises");
+const fsS = require("fs");
 const path = require("path");
 const process = require("process");
 const argv = require("yargs").boolean("selector").default("selector", false).argv;
 const _ = require("lodash");
 const mkdirp = require('mkdirp');
 const { promisify } = require('util');
+const { option } = require("yargs");
 const glob = promisify(require('glob'));
 
 // @ts-ignore
@@ -17,6 +19,9 @@ const SRC_PATH = argv.source;
 const DEST_PATH = argv.dest;
 // @ts-ignore
 const CODEPOINT_DEST_PATH = argv.codepointDest;
+// @ts-ignore
+const RTL_PATH = argv.rtl;
+
 
 if (!SRC_PATH) {
  throw new Error("Icon source folder not specified by --source");
@@ -27,6 +32,9 @@ if (!DEST_PATH) {
 if (!CODEPOINT_DEST_PATH) {
  throw new Error("Output destination folder for codepoint map not specified by --dest");
 }
+if (!RTL_PATH) {
+ throw new Error("RTL folder not specified by --rtl");
+}
 
 processFiles(SRC_PATH, DEST_PATH)
 
@@ -49,7 +57,7 @@ async function processFiles(src, dest) {
 
  // make file for sized icons
  const sizedIconPath = path.join(dest, 'sizedIcons');
- const sizedIconContents = await processFolder(src, CODEPOINT_DEST_PATH, false)
+ const sizedIconContents = await processFolder(src, CODEPOINT_DEST_PATH, false);
  await cleanFolder(sizedIconPath);
 
  await Promise.all(sizedIconContents.map(async (chunk, i) => {
@@ -136,14 +144,17 @@ async function generateCodepointMapForWebpackPlugin(destPath, iconEntries, resiz
 function generateReactIconEntries(iconEntries, resizable) {
  /** @type {string[]} */
  const iconExports = [];
+ let rtlPath = path.join(RTL_PATH, 'rtl.json')
+ const metadata = JSON.parse(fsS.readFileSync(rtlPath));
  for (const [iconName, codepoint] of Object.entries(iconEntries)) {
  let destFilename = getReactIconNameFromGlyphName(iconName, resizable);
-
+ var flipInRtl = metadata[destFilename] === 'mirror' //checks rtl.json to see if icon is autoflippable
+ const options = flipInRtl ? ` { flipInRtl: true }` : undefined;
  var jsCode = `export const ${destFilename} = /*#__PURE__*/createFluentFontIcon(${JSON.stringify(destFilename)
  }, ${JSON.stringify(String.fromCodePoint(codepoint))
  }, ${resizable ? 2 /* Resizable */ : /filled$/i.test(iconName) ? 0 /* Filled */ : 1 /* Regular */
- }${resizable ? '' : `, ${/(?<=_)\d+(?=_filled|_regular)/.exec(iconName)[0]}`
- });`;
+ }, ${resizable ? undefined : ` ${/(?<=_)\d+(?=_filled|_regular)/.exec(iconName)[0]}`
+ }, ${options});`;
 
  iconExports.push(jsCode);
  }

packages/react-icons/convert.js

@@ -8,14 +8,17 @@ const _ = require("lodash");
 
 const SRC_PATH = argv.source;
 const DEST_PATH = argv.dest;
-const TSX_EXTENSION = '.tsx'
+const RTL_PATH = argv.rtl;
 
 if (!SRC_PATH) {
  throw new Error("Icon source folder not specified by --source");
 }
 if (!DEST_PATH) {
  throw new Error("Output destination folder not specified by --dest");
 }
+if (!RTL_PATH) {
+ throw new Error("RTL folder not specified by --rtl");
+}
 
 if (!fs.existsSync(DEST_PATH)) {
  fs.mkdirSync(DEST_PATH);
@@ -88,9 +91,12 @@ function processFolder(srcPath, destPath, resizable) {
  var files = fs.readdirSync(srcPath)
  /** @type string[] */
  const iconExports = [];
+ let rtlPath = path.join(RTL_PATH, 'rtl.json')
+ var metadata = JSON.parse(fs.readFileSync(rtlPath));
+ //console.log(metadata);
  files.forEach(function (file, index) {
  var srcFile = path.join(srcPath, file)
- if (fs.lstatSync(srcFile).isDirectory()) {
+ if (fs.lstatSync(srcFile).isDirectory() || !file.endsWith('.svg')) {
  // for now, ignore subdirectories/localization, until we have a plan for handling it
  // Will likely involve appending the lang/locale to the end of the friendly name for the unique component name
  // var joinedDestPath = path.join(destPath, file)
@@ -102,17 +108,19 @@ function processFolder(srcPath, destPath, resizable) {
  if(resizable && !file.includes("20")) {
  return
  }
- var iconName = file.substr(0, file.length - 4) // strip '.svg'
+ var iconName = file.substring(0, file.length - 4) // strip '.svg'
  iconName = iconName.replace("ic_fluent_", "") // strip ic_fluent_
  iconName = resizable ? iconName.replace("20", "") : iconName
  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
+ var flipInRtl = metadata[destFilename] === 'mirror'; //checks rtl.json to see if icon is autoflippable
 
  var iconContent = fs.readFileSync(srcFile, { encoding: "utf8" })
  const getAttr = (key) => [...iconContent.matchAll(`(?<= ${key}=)".+?"`)].map((v) => v[0]);
  const width = resizable ? '"1em"' : getAttr("width")[0];
  const paths = getAttr("d").join(',');
- var jsCode = `export const ${destFilename} = (/*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]));`
+ const options = flipInRtl ? `, { flipInRtl: true }` : '';
+ var jsCode = `export const ${destFilename} = (/*#__PURE__*/createFluentIcon('${destFilename}', ${width}, [${paths}]${options}));`
  iconExports.push(jsCode);
  }
  });

packages/react-icons/package.json

@@ -16,16 +16,18 @@
  "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:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts",
+ "convert:svg": "node convert.js --source=./intermediate --dest=./src --rtl=./intermediate",
+ "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts --rtl=./intermediate",
  "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",
  "generate:font-resizable": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Resizable",
  "generate:font": "npm run generate:font-regular && npm run generate:font-filled && npm run generate:font-resizable",
+ "generate:rtl": "node ../../importer/rtlMetadata.js --source=../../assets --dest=./intermediate",
  "rollup": "node ./generateRollup.js",
  "optimize": "svgo --config svgo.config.js --folder=./intermediate --precision=2",
  "unfill": "find ./intermediate -type f -name \"*.svg\" -exec sed -i.bak 's/fill=\"none\"//g' {} \\; && find ./intermediate -type f -name \"*.bak\" -delete",
- "build": "npm run copy && npm run generate:font && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run cleanSvg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
+ "build": "npm run copy && npm run generate:font && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run cleanSvg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
+ "buildSvg": "npm run copy && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run cleanSvg && npm run build:esm && npm run build:cjs",
  "build:cjs": "tsc --module commonjs --outDir lib-cjs && babel lib-cjs --out-dir lib-cjs",
  "build:esm": "tsc && babel lib --out-dir lib"
  },

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

@@ -10,4 +10,4 @@ const IconDirectionContextDefaultValue: IconDirectionContextValue = {};
 
 export const IconDirectionContextProvider = IconDirectionContext.Provider;
 
-export const useIconContext = () => React.useContext(IconDirectionContext) ?? IconDirectionContextDefaultValue;
+export const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue

packages/react-icons/src/utils/createFluentIcon.ts

@@ -7,11 +7,16 @@ export type FluentIcon = {
  displayName?: string;
 }
 
-export const createFluentIcon = (displayName: string, width: string, paths: string[]): FluentIcon => {
+export type CreateFluentIconOptions = {
+ flipInRtl?: boolean;
+ // rtlPaths?: string[];
+}
+
+export const createFluentIcon = (displayName: string, width: string, paths: string[], options?: CreateFluentIconOptions): FluentIcon => {
  const viewBoxWidth = width === "1em" ? "20" : width;
  const Icon = React.forwardRef((props: FluentIconsProps, ref: React.Ref<HTMLElement>) => {
  const state = {
- ...useIconState(props), // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
+ ...useIconState(props, { flipInRtl: options?.flipInRtl }), // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
  ref,
  width, height: width, viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`, xmlns: "http://www.w3.org/2000/svg"
  };

packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { FluentIconsProps } from '../FluentIconsProps.types';
+import { CreateFluentIconOptions } from '../createFluentIcon';
 import { makeStyles, makeStaticStyles, mergeClasses } from "@griffel/react";
 import { useIconState } from '../useIconState';
 
@@ -69,12 +70,13 @@ const useRootStyles = makeStyles({
  },
 });
 
-export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} {
+
+export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} {
  const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} = (props) => {
  useStaticStyles();
  const styles = useRootStyles();
  const className = mergeClasses(styles.root, styles[font], props.className);
- const state = useIconState<React.HTMLAttributes<HTMLElement>>({...props, className});
+ const state = useIconState<React.HTMLAttributes<HTMLElement>>({...props, className}, { flipInRtl: options?.flipInRtl });
 
 
  // We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`

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

@@ -1,3 +1,4 @@
+import { useIconContext } from "../contexts";
 import { FluentIconsProps } from "./FluentIconsProps.types";
 import { makeStyles, mergeClasses } from "@griffel/react";
 
@@ -9,10 +10,17 @@ const useRootStyles = makeStyles({
  "@media (forced-colors: active)": {
  forcedColorAdjust: 'auto',
  }
+ },
+ rtl : {
+ transform: 'scaleX(-1)'
  }
 });
 
-export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>): Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'> => {
+export type UseIconStateOptions = {
+ flipInRtl?: boolean;
+}
+
+export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>, options?: UseIconStateOptions): Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'> => {
  const { title, primaryFill = "currentColor", ...rest } = props;
  const state = {
  ...rest,
@@ -21,9 +29,14 @@ export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGEle
  } as Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'>;
 
  const styles = useRootStyles();
-
- state.className = mergeClasses(styles.root, state.className);
-
+ const iconContext = useIconContext();
+
+ state.className = mergeClasses(
+ styles.root, 
+ options?.flipInRtl && iconContext?.textDirection === 'rtl' && styles.rtl, 
+ state.className
+ );
+
  if (title) {
  state['aria-label'] = title;
  }