feat(icons): inherit icon color

lumada-design · Feb 26, 2025 · 98cdf57 · 98cdf57
1 parent 88263bb
commit 98cdf57
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/packages/icons/scripts/utils.ts b/packages/icons/scripts/utils.ts
@@ -18,7 +18,11 @@ export const replaceFill = (fileData: string, colorArray: string[]) => {
   colorArray.forEach((element, index) => {
     result = result
       .split(`fill="${element}"`)
-      .join(`fill="var(--color-${index})" className="color${index}" `);
+      .join(
+        index === 0 && element === "#414141"
+          ? `className="color${index}" `
+          : `className="color${index}" fill="var(--color-${index})" `,
+      );
   });
 
   return result;

diff --git a/packages/icons/src/IconBase.tsx b/packages/icons/src/IconBase.tsx
@@ -13,7 +13,7 @@ import { getSizeStyles } from "./utils";
 
 const getColorVars = (colorArray: string[]) => {
   return colorArray.reduce<Record<string, string>>((acc, value, index) => {
-    acc[`--color-${index}`] = value;
+    acc[`--color-${index + 1}`] = value;
     return acc;
   }, {});
 };
@@ -47,7 +47,7 @@ const getIconColors = (
     colorArray[0] = "none";
   }
 
-  return colorArray.map((c) => getColor(c)!);
+  return colorArray;
 };
 
 export type IconSize = "XS" | "S" | "M" | "L";
@@ -152,21 +152,18 @@ const IconBaseInternal = (
     ...others
   } = props;
   const colorArray = getIconColors(palette, color, semantic, inverted);
+  const [color0, ...otherColors] = colorArray.map((c) => getColor(c)!);
   const title = titleProp ?? ariaLabel;
 
-  /** Whether the icon colors should be inherited. Used for icons:
-   * - using the new `size` prop (backwards compatibility) - TODO: make default in v6
-   * - without a custom user-provided `color`
-   * - with a single `palette` color
-   */
-  const inheritColor = !!size && !color && palette?.length === 1;
+  const inheritColor = !color || colorArray[0] === "secondary";
 
   return (
     <HvIconContainer
       ref={ref}
       data-name={iconName}
       style={{
-        ...(!inheritColor && getColorVars(colorArray)),
+        ...(!inheritColor && { color: color0 }),
+        ...getColorVars(otherColors),
         ...getSizeStyles(iconName ?? "", size),
         ...styleProp,
       }}