[POC] Porting Icon component from gluestack-ui V2

apps/showcase/app/button.tsx

@@ -1,6 +1,8 @@
+import { Apple, Bot } from 'lucide-react-native';
 import { View } from 'react-native';
 import { Button } from '~/components/ui/button';
 import { Text } from '~/components/ui/text';
+import { Icon } from '~/lib/icon';
 
 export default function ButtonScreen() {
   return (
@@ -29,6 +31,14 @@ export default function ButtonScreen() {
       <Button variant='link' size='sm'>
         <Text>Link sm</Text>
       </Button>
+      <Button className='flex-row bg-green-500'>
+        <Icon as={Bot} className='text-primary-foreground mr-1' size={18} />
+        <Text>Android</Text>
+      </Button>
+      <Button variant='secondary' className='flex-row'>
+        <Icon as={Apple} className='text-secondary-foreground mr-1' size={18} />
+        <Text>Apple</Text>
+      </Button>
     </View>
   );
 }

apps/showcase/lib/icon.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import { createIcon, PrimitiveIcon, IPrimitiveIcon, Svg } from '~/lib/rnr-icon';
+
+export const UIIcon = createIcon({
+  Root: PrimitiveIcon,
+}) as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+    React.RefAttributes<React.ElementRef<typeof Svg>>
+>;
+
+const iconStyle = cva('text-typography-950 fill-none pointer-events-none', {
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      xs: 'h-3.5 w-3.5',
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+cssInterop(UIIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type IIConProps = IPrimitiveIcon &
+  (VariantProps<typeof iconStyle> | { size: number }) &
+  React.ComponentPropsWithoutRef<typeof UIIcon>;
+
+export const Icon = React.forwardRef<React.ElementRef<typeof Svg>, IIConProps>(
+  ({ size = 'md', className, ...props }, ref) => {
+    if (typeof size === 'number') {
+      return <UIIcon ref={ref} {...props} className={iconStyle({ className })} size={size} />;
+    } else if ((props.height !== undefined || props.width !== undefined) && size === undefined) {
+      return <UIIcon ref={ref} {...props} className={iconStyle({ className })} />;
+    }
+    return <UIIcon ref={ref} {...props} className={iconStyle({ size, className })} />;
+  }
+);
+
+type ParameterTypes = Omit<Parameters<typeof createIcon>[0], 'Root'>;
+
+const createIconUI = ({ ...props }: ParameterTypes) => {
+  const UIIconCreateIcon = createIcon({
+    Root: Svg,
+    ...props,
+  }) as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof PrimitiveIcon> &
+      React.RefAttributes<React.ElementRef<typeof Svg>>
+  >;
+
+  return React.forwardRef<React.ElementRef<typeof Svg>>(
+    (
+      {
+        className,
+        size,
+        ...inComingProps
+      }: VariantProps<typeof iconStyle> & React.ComponentPropsWithoutRef<typeof UIIconCreateIcon>,
+      ref
+    ) => {
+      return (
+        <UIIconCreateIcon
+          ref={ref}
+          {...inComingProps}
+          className={iconStyle({ size, class: className })}
+        />
+      );
+    }
+  );
+};
+export { createIconUI as createIcon };

apps/showcase/lib/rnr-icon/createIcon/index.tsx

@@ -0,0 +1,125 @@
+import React, { forwardRef } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+import { Path, G } from 'react-native-svg';
+
+interface CreateIconOptions {
+  /**
+   * The icon `svg` viewBox
+   * @default "0 0 24 24"
+   */
+  viewBox?: string;
+  /**
+   * The `svg` path or group element
+   * @type React.ReactElement | React.ReactElement[]
+   */
+  path?: React.ReactElement | React.ReactElement[];
+  /**
+   * If the `svg` has a single path, simply copy the path's `d` attribute
+   */
+  d?: string;
+  /**
+   * The display name useful in the dev tools
+   */
+  displayName?: string;
+  /**
+   * Default props automatically passed to the component; overwritable
+   */
+  defaultProps?: any;
+  type?: any;
+}
+
+export interface IIconProps extends ViewProps {}
+
+export type IIconComponentType<IconProps> = React.ForwardRefExoticComponent<
+  IIconProps & IconProps & React.RefAttributes<IconProps>
+>;
+
+const ChildPath = ({ element, fill, stroke: pathStroke }: any) => {
+  const pathStrokeColor = pathStroke || '';
+  const fillColor = fill || '';
+
+  if (!element) {
+    return null;
+  }
+
+  return React.cloneElement(element, {
+    fill: fillColor ? fillColor : 'currentColor',
+    stroke: pathStrokeColor,
+  });
+};
+
+export function createIcon<IconProps>({
+  Root,
+  path,
+  d,
+  ...initialProps
+}: { Root: React.ComponentType<IconProps> } & CreateIconOptions) {
+  const IconTemp = forwardRef((props: any, ref?: any) => {
+    let children = path;
+    if (d && (!path || Object.keys(path).length === 0)) {
+      children = <Path fill="currentColor" d={d} />;
+    }
+
+    const finalProps = {
+      ...initialProps,
+      ...props,
+    };
+
+    const {
+      stroke = 'currentColor',
+      color,
+      role = 'img',
+      ...resolvedProps
+    } = finalProps;
+    let type = resolvedProps.type;
+    if (type === undefined) {
+      type = 'svg';
+    }
+    let colorProps = {};
+    if (color) {
+      colorProps = { ...colorProps, color: color };
+    }
+    if (stroke) {
+      colorProps = { ...colorProps, stroke: stroke };
+    }
+
+    let sizeProps = {};
+    let sizeStyle = {};
+    if (type === 'font') {
+      if (resolvedProps.sx) {
+        sizeProps = { ...sizeProps, fontSize: resolvedProps?.sx?.h };
+      }
+      if (resolvedProps.size) {
+        // sizeProps = { ...sizeProps, fontSize: resolvedProps?.size };
+      }
+    }
+
+    return (
+      <Root
+        {...resolvedProps}
+        {...colorProps}
+        role={role}
+        ref={ref}
+        {...sizeProps}
+        {...sizeStyle}
+      >
+        {React.Children.count(children) > 0 ? (
+          <G>
+            {React.Children.map(children, (child, i) => (
+              <ChildPath
+                key={child?.key ?? i}
+                element={child}
+                {...child?.props}
+              />
+            ))}
+          </G>
+        ) : null}
+      </Root>
+    );
+  });
+
+  const Icon = IconTemp as IIconComponentType<
+    IconProps | { fill?: ColorValue; stroke?: ColorValue }
+  >;
+  return Icon;
+}

apps/showcase/lib/rnr-icon/createIcon/index.web.tsx

@@ -0,0 +1,128 @@
+import React, { forwardRef } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+
+interface CreateIconOptions {
+  /**
+   * The icon `svg` viewBox
+   * @default "0 0 24 24"
+   */
+  viewBox?: string;
+  /**
+   * The `svg` path or group element
+   * @type React.ReactElement | React.ReactElement[]
+   */
+  path?: React.ReactElement | React.ReactElement[];
+  /**
+   * If the `svg` has a single path, simply copy the path's `d` attribute
+   */
+  d?: string;
+  /**
+   * The display name useful in the dev tools
+   */
+  displayName?: string;
+  /**
+   * Default props automatically passed to the component; overwritable
+   */
+  defaultProps?: any;
+  type?: any;
+}
+
+export interface IIconProps extends ViewProps {}
+
+export type IIconComponentType<IconProps> = React.ForwardRefExoticComponent<
+  IIconProps & IconProps
+>;
+
+const ChildPath = ({ element, fill, stroke: pathStroke }: any) => {
+  const pathStrokeColor = pathStroke || '';
+  const fillColor = fill || '';
+
+  if (!element) {
+    return null;
+  }
+
+  if (element.type === React.Fragment) {
+    return element;
+  }
+
+  return React.cloneElement(element, {
+    fill: fillColor ? fillColor : 'currentColor',
+    stroke: pathStrokeColor,
+  });
+};
+
+export function createIcon<IconProps>({
+  Root,
+  path,
+  d,
+  ...initialProps
+}: { Root: React.ComponentType<IconProps> } & CreateIconOptions) {
+  const IconTemp = forwardRef((props: any, ref?: any) => {
+    let children = path;
+    if (d && (!path || Object.keys(path).length === 0)) {
+      children = <path fill="currentColor" d={d} />;
+    }
+
+    const finalProps = {
+      ...initialProps,
+      ...props,
+    };
+
+    const {
+      stroke = 'currentColor',
+      color,
+      role = 'img',
+      ...resolvedProps
+    } = finalProps;
+    let type = resolvedProps.type;
+    if (type === undefined) {
+      type = 'svg';
+    }
+    let colorProps = {};
+    if (color) {
+      colorProps = { ...colorProps, color: color };
+    }
+    if (stroke) {
+      colorProps = { ...colorProps, stroke: stroke };
+    }
+
+    let sizeProps = {};
+    let sizeStyle = {};
+    if (type === 'font') {
+      if (resolvedProps.sx) {
+        sizeProps = { ...sizeProps, fontSize: resolvedProps?.sx?.h };
+      }
+      if (resolvedProps.size) {
+        // sizeProps = { ...sizeProps, fontSize: resolvedProps?.size };
+      }
+    }
+
+    return (
+      <Root
+        {...resolvedProps}
+        {...colorProps}
+        role={role}
+        ref={ref}
+        {...sizeProps}
+        {...sizeStyle}
+      >
+        {React.Children.count(children) > 0 ? (
+          <g>
+            {React.Children.map(children, (child, i) => (
+              <ChildPath
+                key={child?.key ?? i}
+                element={child}
+                {...child?.props}
+              />
+            ))}
+          </g>
+        ) : null}
+      </Root>
+    );
+  });
+
+  const Icon = IconTemp as IIconComponentType<
+    IconProps | { fill?: ColorValue; stroke?: ColorValue }
+  >;
+  return Icon;
+}

apps/showcase/lib/rnr-icon/index.tsx

@@ -0,0 +1,3 @@
+export { createIcon } from './createIcon';
+export { PrimitiveIcon, Svg, UIIcon } from './primitiveIcon';
+export type { IPrimitiveIcon } from './primitiveIcon';

apps/showcase/lib/rnr-icon/index.web.tsx

@@ -0,0 +1,3 @@
+export { createIcon } from './createIcon';
+export { PrimitiveIcon, Svg, UIIcon } from './primitiveIcon';
+export type { IPrimitiveIcon } from './primitiveIcon';