fix(react-native): align Icon props with SVG types

Author: georgewrmarshall

packages/design-system-react-native/MIGRATION.md

@@ -75,6 +75,27 @@ The intermediate `Box` wrapper around the `BoxRow` in the left section has been
 
 No changes to visual appearance or API.
 
+#### Icon: prop types now align with SVG usage
+
+**What Changed:**
+
+- `IconProps` now extends `Omit<SvgProps, 'color' | 'name'>` instead of `ViewProps`.
+- The component now forwards `hitSlop` as `hitSlop ?? undefined` to satisfy strict SVG prop typing.
+
+**Migration:**
+
+If TypeScript now flags props you were previously passing to `Icon`, those props were `View`-specific and are no longer part of the `Icon` public type. Move those props to a wrapper `View` and keep SVG-compatible props on `Icon`.
+
+```tsx
+// Before
+<Icon name={IconName.Lock} onLayout={handleLayout} />
+
+// After
+<View onLayout={handleLayout}>
+  <Icon name={IconName.Lock} />
+</View>
+```
+
 ---
 
 ### From version 0.16.0 to 0.17.0

packages/design-system-react-native/src/components/Icon/Icon.tsx

@@ -17,13 +17,20 @@ export const Icon = ({
 }: IconProps) => {
   const tw = useTailwind();
   const SVG = assetByIconName[name];
+  const { hitSlop, ...svgProps } = props;
   const twStyle = tw.style(
     color,
     TWCLASSMAP_ICON_SIZE_DIMENSION[size],
     twClassName,
   );
 
   return (
-    <SVG name={name} fill="currentColor" style={[twStyle, style]} {...props} />
+    <SVG
+      name={name}
+      fill="currentColor"
+      style={[twStyle, style]}
+      hitSlop={hitSlop ?? undefined}
+      {...svgProps}
+    />
   );
 };

packages/design-system-react-native/src/components/Icon/Icon.types.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type { ViewProps } from 'react-native';
 import type { SvgProps } from 'react-native-svg';
 
 import type { IconColor, IconName, IconSize } from '../../types';
@@ -29,7 +28,7 @@ export type IconProps = {
    * Optional prop to add twrnc overriding classNames.
    */
   twClassName?: string;
-} & ViewProps;
+} & Omit<SvgProps, 'color' | 'name'>;
 
 /**
  * Asset stored by icon name