feat: add name prop to IconBase for dynamic class and testID generation

duongdev · Jan 23, 2025 · 06cf7c3 · 06cf7c3
1 parent ae16180
commit 06cf7c3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/generator/generate-svg.mjs b/generator/generate-svg.mjs
@@ -147,7 +147,7 @@ import IconBase from "../lib/icon-base";
 import weights from '../defs/${component}'
 
 function ${componentName}({...props }: IconProps) {
-  return (<IconBase {...props} weights={weights} />)
+  return (<IconBase {...props} weights={weights} name="${icon}" />)
 }
 
 export default ${componentName}`;

diff --git a/src/lib/icon-base.tsx b/src/lib/icon-base.tsx
@@ -7,6 +7,7 @@ interface IconBaseProps extends IconProps {
     IconWeight,
     ReactElement | FC<{ duotoneColor?: string; duotoneOpacity?: number }>
   >;
+  name: string;
 }
 
 function IconBase({
@@ -19,6 +20,7 @@ function IconBase({
   duotoneOpacity,
   title,
   titleId,
+  name,
   weights,
   ...props
 }: IconBaseProps) {
@@ -43,8 +45,8 @@ function IconBase({
           }),
         },
       ]}
-      className={`acorn-${weight}__svg-icon-phosphor`}
-      testID={props.testID ?? 'phosphor-react-native-acorn-bold'}
+      className={`${name}-${weight}__svg-icon-phosphor`}
+      testID={props.testID ?? `phosphor-react-native-${name}-${weight}`}
       fill="currentColor"
       viewBox="0 0 256 256"
       width={size ?? contextSize}