Added package for react-native SVG icons

packages/react-native-icons/convert.js

@@ -67,7 +67,7 @@ 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 { FluentReactNativeIconsProps } from \'./utils/FluentReactNativeIconsProps.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\'');
@@ -93,7 +93,7 @@ function processFolder(srcPath, destPath, resizable) {
   var svgrOpts = {
     template: fileTemplate,
     expandProps: 'start', // 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
-    svgProps: { className: '{className}'}, // In order to provide styling, className will be used
+    svgProps: { style: '{style}'}, // In RN style attribute is used for styling
     replaceAttrValues: { '#212121': '{primaryFill}' }, // We are designating primaryFill as the primary color for filling. If not provided, it defaults to null.
     typescript: true,
     icon: true
@@ -102,7 +102,7 @@ function processFolder(srcPath, destPath, resizable) {
   var svgrOptsSizedIcons = {
     template: fileTemplate,
     expandProps: 'start', // 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
-    svgProps: { className: '{className}'}, // In order to provide styling, className will be used
+    svgProps: { style: '{style}'}, // In RN style attribute is used for styling
     replaceAttrValues: { '#212121': '{primaryFill}' }, // We are designating primaryFill as the primary color for filling. If not provided, it defaults to null.
     typescript: true
   }
@@ -132,12 +132,16 @@ function processFolder(srcPath, destPath, resizable) {
       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 rnRegex = new RegExp('(<(|\/))(svg|path|rect|g)', 'g')
+      var rnCode = jsxCode.replace(rnRegex, function(result) {
+        var charRegex = new RegExp('[a-zA-Z]');
+        return result.replace(charRegex, firstSymbol => firstSymbol.toUpperCase()) });
       var jsCode = 
 `
 
-const ${destFilename}Icon = (props: FluentIconsProps) => {
-  const { fill: primaryFill = 'currentColor', className } = props;
-  return ${jsxCode};
+const ${destFilename}Icon = (props: FluentReactNativeIconsProps) => {
+  const { fill: primaryFill = 'currentColor', style } = props;
+  return ${rnCode};
 }
 export const ${destFilename} = /*#__PURE__*/wrapIcon(/*#__PURE__*/${destFilename}Icon, '${destFilename}');
       `
@@ -153,8 +157,9 @@ export const ${destFilename} = /*#__PURE__*/wrapIcon(/*#__PURE__*/${destFilename
   }
 
   for(const chunk of iconChunks) {
+    chunk.unshift(`import { Path, Svg, Rect, G } from 'react-native-svg';`)
     chunk.unshift(`import wrapIcon from "../utils/wrapIcon";`)
-    chunk.unshift(`import { FluentIconsProps } from "../utils/FluentIconsProps.types";`)
+    chunk.unshift(`import { FluentReactNativeIconsProps } from "../utils/FluentReactNativeIconsProps.types";`)
     chunk.unshift(`import * as React from "react";`)
   }
 

packages/react-native-icons/package.json

@@ -33,21 +33,22 @@
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
     "@babel/preset-typescript": "^7.16.7",
-    "@griffel/babel-preset": "^1.0.0",
     "@svgr/core": "^5.5.0",
     "@types/react": "^17.0.2",
+    "@types/react-native": "^0.68.0",
     "cpy-cli": "^4.1.0",
     "glob": "^7.2.0",
     "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",
     "react": "^17.0.1",
+    "react-native": "^0.68.0",
+    "react-native-svg": "12.5.0",
     "renamer": "^2.0.1",
     "svgo": "^2.8.0",
     "typescript": "~4.1.0",
     "yargs": "^14.0.0"
   },
   "dependencies": {
-    "@griffel/react": "^1.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -82,4 +83,3 @@
     }
   }
 }
-

packages/react-native-icons/src/utils/FluentReactNativeIconsProps.types.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { ImageStyle, StyleProp, TextStyle } from 'react-native';
+
+export type FluentReactNativeIconsProps<TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>> = (TBaseAttributes) & {
+	primaryFill?: string
+	style?: StyleProp<ImageStyle | TextStyle>;
+	filled?: boolean;
+	title?: string;
+}

packages/react-native-icons/src/utils/bundleIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { iconFilledClassName, iconRegularClassName } from "./constants";
-import { FluentIconsProps } from "./FluentIconsProps.types";
+import { FluentIconsProps } from "./FluentReactNativeIconsProps.types";
 import { makeStyles, mergeClasses } from "@griffel/react";
 
 const useBundledIconStyles = makeStyles({

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

@@ -1,37 +1,25 @@
-import { FluentIconsProps } from "./FluentIconsProps.types";
-import { makeStyles, mergeClasses } from "@griffel/react";
+import { FluentReactNativeIconsProps } from "./FluentReactNativeIconsProps.types";
 
-const useRootStyles = makeStyles({
-    root: {
-        display: 'inline',
-        lineHeight: 0,
-
-        "@media (forced-colors: active)": {
-          forcedColorAdjust: 'auto',
-        }
-    }
-});
-
-export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>): Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'> => {
+export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentReactNativeIconsProps<TBaseAttributes>): Omit<FluentReactNativeIconsProps<TBaseAttributes>, 'primaryFill'> => {
     const { title, primaryFill = "currentColor", ...rest } = props;
     const state = {
       ...rest,
       title: undefined,
       fill: primaryFill
-    } as Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'>;
-
-    const styles = useRootStyles();
+    } as Omit<FluentReactNativeIconsProps<TBaseAttributes>, 'primaryFill'>;
 
-    state.className = mergeClasses(styles.root, state.className);
+    // TODO add here styles for RN
+    //const styles = useRootStyles();
+    //state.className = mergeClasses(styles.root, state.className);
 
     if (title) {
-      state['aria-label'] = title;
+      state['acessibilityLabel'] = title;
     }
 
-    if (!state['aria-label'] && !state['aria-labelledby']) {
-      state['aria-hidden'] = true;
+    if (!state['acessibilityLabel'] && !state['accessibilityLabelledBy']) {
+      state['accessibilityHidden'] = true;
     } else {
-      state['role'] = 'img';
+      state['accessibilityRole'] = 'image';
     }
 
     return state;

packages/react-native-icons/src/utils/wrapIcon.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { FluentIconsProps } from "./FluentIconsProps.types";
+import { FluentReactNativeIconsProps } from "./FluentReactNativeIconsProps.types";
 import { useIconState } from "./useIconState";
 
-const wrapIcon = (Icon: (iconProps: FluentIconsProps) => JSX.Element, displayName?: string) => {
-    const WrappedIcon = (props: FluentIconsProps) => { 
+const wrapIcon = (Icon: (iconProps: FluentReactNativeIconsProps) => JSX.Element, displayName?: string) => {
+    const WrappedIcon = (props: FluentReactNativeIconsProps) => { 
         const state = useIconState(props);
         return <Icon {...state} />
     }