fix(Icon): improve icon type definition by making it a descriminated …

…union on name and data (#3547)
equinor · Jul 3, 2024 · 47ebede · 47ebede
1 parent 7260b56
commit 47ebede
Showing 1 changed file with 35 additions and 16 deletions.
diff --git a/packages/eds-core-react/src/components/Icon/Icon.tsx b/packages/eds-core-react/src/components/Icon/Icon.tsx
@@ -64,22 +64,41 @@ const findIcon = (name: string, data: IconData, size: number) => {
   return { icon, count }
 }
 
-export type IconProps = {
-  /** Title for icon when used semantically */
-  title?: string
-  /** Color */
-  color?: string
-  /** Size */
-  size?: 16 | 18 | 24 | 32 | 40 | 48
-  /** Rotation */
-  rotation?: 0 | 90 | 180 | 270
-  /** Name */
-  name?: Name
-  /** Manually specify which icon data to use */
-  data?: IconData
-  /** @ignore */
-  ref?: Ref<SVGSVGElement>
-} & SVGProps<SVGSVGElement>
+export type IconProps = (
+  | {
+      /** Title for icon when used semantically */
+      title?: string
+      /** Color */
+      color?: string
+      /** Size */
+      size?: 16 | 18 | 24 | 32 | 40 | 48
+      /** Rotation */
+      rotation?: 0 | 90 | 180 | 270
+      /** Name */
+      name: Name
+      /** Manually specify which icon data to use */
+      data?: IconData
+      /** @ignore */
+      ref?: Ref<SVGSVGElement>
+    }
+  | {
+      /** Title for icon when used semantically */
+      title?: string
+      /** Color */
+      color?: string
+      /** Size */
+      size?: 16 | 18 | 24 | 32 | 40 | 48
+      /** Rotation */
+      rotation?: 0 | 90 | 180 | 270
+      /** Name */
+      name?: Name
+      /** Manually specify which icon data to use */
+      data: IconData
+      /** @ignore */
+      ref?: Ref<SVGSVGElement>
+    }
+) &
+  SVGProps<SVGSVGElement>
 
 export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
   { size, color = 'currentColor', name, rotation, title, data, ...rest },