fix: previous solution was overkill

README.md

@@ -75,8 +75,8 @@ Icon components accept all props that you can pass to a normal SVG element, incl
 - **title?**: `string` – Accessibility label
 - **titleId?**: `string` – Accessibility label ID
 - **testID?**: `string` – testID for tests
-- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black. ⚠️ Use `duototocolor` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;
-- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2. ⚠️ Use `duotoneopacity` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;
+- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.
+- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.
 
 ### Context
 

generator/generate-svg.mjs

@@ -70,20 +70,30 @@ const generateIconWithWeight = (icon, weight) => {
       .replace(
         'const',
         weight === 'duotone'
-          ? "import type { DuotoneProps } from '../lib'\n\nconst"
+          ? "import type { IconProps } from '../lib'\n\nconst"
           : "import type { IconProps } from '../lib'\n\nconst"
       )
-      .replace('SvgProps', weight === 'duotone' ? 'DuotoneProps' : 'IconProps')
+      .replace(
+        'SvgProps',
+        weight === 'duotone'
+          ? 'IconProps'
+          : `Exclude<IconProps, 'duotoneColor' | 'duotoneOpacity'>`
+      )
       .replace(' xmlns="http://www.w3.org/2000/svg"', '')
       .replace(
         '<Svg ',
         `<Svg className="${iconName}__svg-icon-phosphor" testID={props.testID ?? 'phosphor-react-native-${iconName}'} `
       );
     if (weight === 'duotone') {
-      tsCode = tsCode.replace(
-        'opacity={0.2}',
-        'opacity={props.duotoneopacity ?? 0.2} fill={props.duotonecolor ?? "currentColor"}'
-      );
+      tsCode = tsCode
+        .replace(
+          'opacity={0.2}',
+          'opacity={duotoneOpacity} fill={duotoneColor}'
+        )
+        .replace(
+          '...props',
+          `duotoneColor="currentColor",\n  duotoneOpacity=0.2,\n  ...props`
+        );
     }
 
     // fix icons with small dots (#4)
@@ -182,6 +192,11 @@ function ${componentName}({ weight, color, size, style, mirrored, duotoneColor,
 
   const mirroredValue = mirrored ?? contextMirrored
 
+  const duotoneProps =
+  (weight ?? contextWeight) === 'duotone'
+    ? { duotoneColor: duotoneColor ?? contextDuotoneColor, duotoneOpacity: duotoneOpacity ?? contextDuotoneOpacity }
+    : undefined
+
   return (
     <IconComponent
       color={color ?? contextColor}
@@ -195,15 +210,13 @@ function ${componentName}({ weight, color, size, style, mirrored, duotoneColor,
           }),
         },
       ]}
-      duotonecolor={duotoneColor ?? contextDuotoneColor}
-      duotoneopacity={duotoneOpacity ?? contextDuotoneOpacity}
+      {...duotoneProps}
       {...props}
     />
   )
 }
 
-export default ${componentName}
-  `;
+export default ${componentName}`;
 
   const filePath = path.join(__dirname, '../src/icons', `${component}.tsx`);
 

src/lib/index.tsx

@@ -11,7 +11,7 @@ export type IconWeight =
 
 export type PaintFunction = (color: string) => React.ReactNode | null;
 
-interface IconPropsBase {
+export interface IconProps {
   color?: string;
   size?: string | number;
   weight?: IconWeight;
@@ -23,16 +23,6 @@ interface IconPropsBase {
   title?: string; // SVGRProps
   titleId?: string; // SVGRProps
 }
-export interface IconProps extends IconPropsBase {
-  duotoneColor?: string;
-  duotoneOpacity?: number;
-}
-
-// Warning: React does not recognize the duotoneColor prop on a DOM element.
-export interface DuotoneProps extends IconPropsBase {
-  duotonecolor?: string;
-  duotoneopacity?: number;
-}
 
 export type Icon = React.FC<IconProps>;