From d93b6f254455390dbb3f09d04a136931a94565f8 Mon Sep 17 00:00:00 2001
From: Rajat Chaudhary <rajatchaudhary@Rajats-MacBook-Air.local>
Date: Mon, 19 Aug 2024 15:27:12 +0530
Subject: [PATCH] feat: updated primitiveIcon component

---
 .../nativewind/alert/index.tsx                | 70 +++++++-----------
 .../nativewind/badge/index.tsx                | 72 +++++++------------
 .../nativewind/checkbox/index.tsx             | 70 +++++++-----------
 .../core-components/nativewind/fab/index.tsx  | 70 +++++++-----------
 .../nativewind/form-control/index.tsx         | 72 +++++++------------
 .../core-components/nativewind/icon/index.tsx | 72 +++++++------------
 .../nativewind/input/index.tsx                | 70 +++++++-----------
 .../nativewind/radio/index.tsx                | 70 +++++++-----------
 .../nativewind/select/index.tsx               | 70 +++++++-----------
 .../nativewind/select/select-actionsheet.tsx  | 72 +++++++------------
 10 files changed, 244 insertions(+), 464 deletions(-)

diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
index 98332cfa2..f98aceb91 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx
@@ -119,54 +119,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const IconWrapper = React.forwardRef<
   React.ElementRef<typeof PrimitiveIcon>,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
index 0cab61710..42bf60164 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx
@@ -107,54 +107,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
+
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
+  }
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
   }
-);
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const ContextView = withStyleContext(View, SCOPE);
 cssInterop(ContextView, { className: 'style' });
diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
index 749ae0324..aaaa8f018 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -49,54 +49,32 @@ const IconWrapper = React.forwardRef<
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const SCOPE = 'CHECKBOX';
 const UICheckbox = createCheckbox({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
index 4c72bc338..f15448243 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx
@@ -27,54 +27,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const SCOPE = 'FAB';
 const UIFab = createFab({
diff --git a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
index 84275d37a..fcdf8cc12 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/form-control/index.tsx
@@ -27,54 +27,32 @@ type IPrimitiveIcon = React.ComponentPropsWithoutRef<typeof Svg> & {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
+
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
+  }
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
   }
-);
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const formControlStyle = tva({
   base: 'flex flex-col',
diff --git a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
index a8f6fa527..6adbe8c15 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/icon/index.tsx
@@ -20,54 +20,32 @@ type IPrimitiveIcon = {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
+
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 export const UIIcon = createIcon({
   Root: PrimitiveIcon,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
index f1c49d7b5..3f2658ea4 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx
@@ -28,54 +28,32 @@ type IPrimitiveIcon = {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const InputWrapper = React.forwardRef<
   React.ElementRef<typeof View>,
diff --git a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
index 0adfadb53..837b02009 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
@@ -48,54 +48,32 @@ type IPrimitiveIcon = {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const radioStyle = tva({
   base: 'group/radio flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed',
diff --git a/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx
index bf1e9def4..4e7288b55 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx
@@ -101,54 +101,32 @@ type IPrimitiveIcon = {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
 
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 const UISelect = createSelect(
   {
diff --git a/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx b/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx
index 1ca114564..ee3f1ebf4 100644
--- a/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx
+++ b/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx
@@ -41,54 +41,32 @@ type IPrimitiveIcon = {
 const PrimitiveIcon = React.forwardRef<
   React.ElementRef<typeof Svg>,
   IPrimitiveIcon
->(
-  (
-    {
-      height,
-      width,
-      fill,
-      color,
-      size,
-      stroke = 'currentColor',
-      as: AsComp,
-      ...props
-    },
-    ref
-  ) => {
-    const sizeProps = useMemo(() => {
-      if (size) return { size };
-      if (height && width) return { height, width };
-      if (height) return { height };
-      if (width) return { width };
-      return {};
-    }, [size, height, width]);
-
-    const colorProps =
-      stroke === 'currentColor' && color !== undefined ? color : stroke;
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          fill={fill}
-          {...props}
-          {...sizeProps}
-          stroke={colorProps}
-        />
-      );
-    }
-    return (
-      <Svg
-        ref={ref}
-        height={height}
-        width={width}
-        fill={fill}
-        stroke={colorProps}
-        {...props}
-      />
-    );
+>(({ height, width, fill, color, size, stroke, as: AsComp, ...props }, ref) => {
+  const sizeProps = useMemo(() => {
+    if (size) return { size };
+    if (height && width) return { height, width };
+    if (height) return { height };
+    if (width) return { width };
+    return {};
+  }, [size, height, width]);
+
+  let colorProps = {};
+  if (color) {
+    colorProps = { ...colorProps, color: color };
   }
-);
+  if (stroke) {
+    colorProps = { ...colorProps, stroke: stroke };
+  }
+  if (fill) {
+    colorProps = { ...colorProps, fill: fill };
+  }
+  if (AsComp) {
+    return <AsComp ref={ref} {...sizeProps} {...colorProps} {...props} />;
+  }
+  return (
+    <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
+  );
+});
 
 export const UIActionsheet = createActionsheet({
   Root: View,