feat: change icon generation logic

Author: mrkpatchaa

.gitignore

@@ -56,5 +56,5 @@ android/keystores/debug.keystore
 /lib/
 
 # ignore generated icon files
-/src/
+src/*
 !src/lib/

generator/generate-svg.mjs

@@ -6,7 +6,7 @@ import path from 'path';
 import fs from 'fs-extra';
 import Case from 'case';
 import chalk from 'chalk';
-
+import * as prettier from 'prettier';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -40,6 +40,9 @@ const componentNameMap = {
   Infinity: 'InfinityIcon',
 };
 
+// Some duotone colors do not have a color and opacity
+const duotoneEscape = ['cell-signal-none', 'wifi-none'];
+
 const srcDir = path.join(__dirname, '../src');
 
 const generateIconsDefs = async (icon, weight) => {
@@ -80,9 +83,15 @@ const getIconList = () => {
   // yarn generate true
   if (process.argv[2] === 'true') {
     return files.filter((file) =>
-      ['acorn', 'palette', 'pencil-line', 'swap', 'list', 'test-tube'].includes(
-        file
-      )
+      [
+        'acorn',
+        'palette',
+        'pencil-line',
+        'swap',
+        'list',
+        'test-tube',
+        '',
+      ].includes(file)
     );
   }
   return files;
@@ -101,21 +110,24 @@ const generateAllIconsDefs = () => {
       defs[weight] = await generateIconsDefs(icon, weight);
     }
 
-    let defString = `\
+    let defString = await prettier.format(
+      `\
 /* GENERATED FILE */
-import type { ReactElement, FC } from "react";
+import type { ReactElement, FC } from 'react';
 import { Path } from 'react-native-svg';
-import { type IconWeight } from "../lib";
+import { type IconWeight } from '../lib';
 
 export default new Map<IconWeight, ReactElement | FC<{ duotoneColor?: string; duotoneOpacity?: number }>>([
 ${Object.entries(defs)
   .map(
     ([weight, jsx]) =>
-      `["${weight}", ${weight === 'duotone' ? '({duotoneColor,duotoneOpacity}: {duotoneColor?: string;duotoneOpacity?: number;}) => ' : ''}(<>${jsx.trim()}</>)]`
+      `["${weight}", ${weight === 'duotone' ? (duotoneEscape.includes(icon) ? '() =>' : '({duotoneColor,duotoneOpacity}: {duotoneColor?: string;duotoneOpacity?: number;}) => ') : ''}(<>${jsx.trim()}</>)]`
   )
-  .join(',')}
+  .join(',\n')}
 ]);
-`;
+`,
+      { semi: true, parser: 'babel-ts', singleQuote: true }
+    );
     // console.log(defString);
     const outDir = path.join(srcDir, 'defs');
 

src/lib/icon-base.tsx

@@ -0,0 +1,68 @@
+import { useContext, type ReactElement, type FC } from 'react';
+import Svg from 'react-native-svg';
+import { type IconProps, type IconWeight, IconContext } from '../lib';
+
+interface IconBaseProps extends IconProps {
+  weights: Map<
+    IconWeight,
+    ReactElement | FC<{ duotoneColor?: string; duotoneOpacity?: number }>
+  >;
+}
+
+function IconBase({
+  weight,
+  color,
+  size,
+  style,
+  mirrored,
+  duotoneColor,
+  duotoneOpacity,
+  title,
+  titleId,
+  weights,
+  ...props
+}: IconBaseProps) {
+  const {
+    color: contextColor = '#000',
+    size: contextSize = 24,
+    weight: contextWeight = 'regular',
+    mirrored: contextMirrored = false,
+    style: contextStyle,
+    duotoneColor: contextDuotoneColor = '#000',
+    duotoneOpacity: contextDuotoneOpacity = 0.2,
+  } = useContext(IconContext);
+
+  return (
+    <Svg
+      style={[
+        contextStyle,
+        style,
+        {
+          ...((mirrored ?? contextMirrored) && {
+            transform: [{ scaleX: -1 }],
+          }),
+        },
+      ]}
+      className={`acorn-${weight}__svg-icon-phosphor`}
+      testID={props.testID ?? 'phosphor-react-native-acorn-bold'}
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      width={size ?? contextSize}
+      height={size ?? contextSize}
+      color={color ?? contextColor}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      {(weight ?? contextWeight) === 'duotone'
+        ? // @ts-expect-error not callable
+          weights.get(weight ?? contextWeight)({
+            duotoneColor: duotoneColor ?? contextDuotoneColor ?? color,
+            duotoneOpacity: duotoneOpacity ?? contextDuotoneOpacity,
+          })
+        : weights.get(weight ?? contextWeight)}
+    </Svg>
+  );
+}
+
+export default IconBase;

src/lib/index.tsx

@@ -0,0 +1,35 @@
+import React, { createContext } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export type IconWeight =
+  | 'thin'
+  | 'light'
+  | 'regular'
+  | 'bold'
+  | 'fill'
+  | 'duotone';
+
+export type PaintFunction = (color: string) => React.ReactNode | null;
+
+export interface IconProps {
+  color?: string;
+  size?: string | number;
+  weight?: IconWeight;
+  style?: StyleProp<ViewStyle>;
+  mirrored?: boolean;
+  testID?: string;
+  duotoneColor?: string;
+  duotoneOpacity?: number;
+  title?: string; // SVGRProps
+  titleId?: string; // SVGRProps
+}
+
+export type Icon = React.FC<IconProps>;
+
+export const IconContext = createContext<IconProps>({
+  color: '#000',
+  size: 24,
+  weight: 'regular',
+  mirrored: false,
+  duotoneOpacity: 0.2,
+});