diff --git a/example/src/modules/primitives/BadgeScreen.tsx b/example/src/modules/primitives/BadgeScreen.tsx
index 5d37970c..8ed49d26 100644
--- a/example/src/modules/primitives/BadgeScreen.tsx
+++ b/example/src/modules/primitives/BadgeScreen.tsx
@@ -1,22 +1,47 @@
import React from "react";
+import { Path } from "react-native-svg";
import {
- BadgeNew,
- BadgeText,
- BadgeWrapper,
+ AdaptIcon,
Box,
+ createAdaptIcon,
} from "@adaptui/react-native-tailwind";
+const ClockIcon = createAdaptIcon({
+ path: (
+
+ ),
+});
+
+const DeleteIcon = createAdaptIcon({
+ d: "M4.65 0.199219C4.29101 0.199219 4 0.490234 4 0.849219C4 1.2082 4.29101 1.49922 4.65 1.49922H7.35C7.70899 1.49922 8 1.2082 8 0.849219C8 0.490234 7.70899 0.199219 7.35 0.199219H4.65ZM0 2.84922C0 2.49023 0.291015 2.19922 0.65 2.19922H11.35C11.709 2.19922 12 2.49023 12 2.84922C12 3.2082 11.709 3.49922 11.35 3.49922H0.65C0.291015 3.49922 0 3.2082 0 2.84922ZM2.65 4.99922C2.65 4.64023 2.35898 4.34922 2 4.34922C1.64101 4.34922 1.35 4.64023 1.35 4.99922V8.99922C1.35 10.4628 2.53645 11.6492 4 11.6492H8C9.46355 11.6492 10.65 10.4628 10.65 8.99922V4.99922C10.65 4.64023 10.359 4.34922 10 4.34922C9.64102 4.34922 9.35 4.64023 9.35 4.99922V8.99922C9.35 9.7448 8.74558 10.3492 8 10.3492H4C3.25442 10.3492 2.65 9.7448 2.65 8.99922V4.99922ZM6.65 4.99922C6.65 4.64023 6.35898 4.34922 6 4.34922C5.64102 4.34922 5.35 4.64023 5.35 4.99922V7.49922C5.35 7.8582 5.64102 8.14922 6 8.14922C6.35898 8.14922 6.65 7.8582 6.65 7.49922V4.99922Z",
+ pathFill: "#000",
+});
+
export const BadgeScreen = () => {
return (
-
- Scheduled
-
-
- <>Badge
-
-
-
+
+
+
+
+
+
+
);
};
diff --git a/src/primitives/icons/AdaptIcon.tsx b/src/primitives/icons/AdaptIcon.tsx
new file mode 100644
index 00000000..03713ed7
--- /dev/null
+++ b/src/primitives/icons/AdaptIcon.tsx
@@ -0,0 +1,59 @@
+import Svg, { Path } from "react-native-svg";
+
+import { useTheme } from "../../theme";
+import { cx } from "../../utils";
+import {
+ As,
+ createComponentType,
+ createElement,
+ createHook,
+ Props,
+} from "../../utils/system";
+import { BoxOptions, useBox } from "../box";
+
+import { fallbackIcon } from "./__utils";
+
+export const useAdaptIcon = createHook(
+ ({ d, pathFill = "#000", ...props }) => {
+ console.log("%cprops", "color: #ffa280", props);
+ const _viewBox = props.viewBox ?? fallbackIcon.viewBox;
+ const fallback = d ? : fallbackIcon.children;
+ const children = props.children ?? fallback;
+
+ const iconStyles = useTheme("icon");
+ const className = cx(iconStyles.base, props.className);
+
+ props = {
+ ...props,
+ viewBox: _viewBox,
+ children,
+ className,
+ };
+
+ props = useBox(props);
+
+ return props;
+ },
+);
+
+export const AdaptIcon = createComponentType(props => {
+ const htmlProps = useAdaptIcon(props);
+
+ return createElement(Svg, htmlProps);
+}, "AdaptIcon");
+
+export type AdaptIconOptions = BoxOptions & {
+ /**
+ * If the has a single path, simply copy the path's `d` attribute
+ */
+ d?: string;
+ /**
+ * Fill color for the AdaptIcon Component.
+ * @default "#000"
+ */
+ pathFill?: string;
+};
+
+export type AdaptIconProps = Props<
+ AdaptIconOptions
+>;
diff --git a/src/primitives/icons/__utils.tsx b/src/primitives/icons/__utils.tsx
new file mode 100644
index 00000000..f32582d0
--- /dev/null
+++ b/src/primitives/icons/__utils.tsx
@@ -0,0 +1,20 @@
+import { Circle, G, Path } from "react-native-svg";
+
+export const fallbackIcon = {
+ viewBox: "0 0 24 24",
+ children: (
+
+
+
+
+
+ ),
+};
diff --git a/src/primitives/icons/createAdaptIcon.tsx b/src/primitives/icons/createAdaptIcon.tsx
new file mode 100644
index 00000000..368e410c
--- /dev/null
+++ b/src/primitives/icons/createAdaptIcon.tsx
@@ -0,0 +1,66 @@
+// Credits to https://github.com/chakra-ui/chakra-ui/tree/main/packages/icon
+import * as React from "react";
+import { forwardRef } from "react";
+import { View } from "react-native";
+
+import { AdaptIcon, AdaptIconProps } from "./AdaptIcon";
+
+export interface CreateAdaptIconOptions {
+ /**
+ * The icon `svg` viewBox
+ *
+ * @default "0 0 24 24"
+ */
+ viewBox?: string;
+ /**
+ * The `svg` path or group element
+ *
+ * @type React.ReactNode | React.ReactNode[]
+ */
+ path?: React.ReactNode | React.ReactNode[];
+ /**
+ * If the has a single path, simply copy the path's `d` attribute
+ */
+ d?: string;
+ /**
+ * Fill color for the AdaptIcon Component.
+ * @default "#000"
+ */
+ pathFill?: string;
+ /**
+ * The display name useful in the dev tools
+ */
+ displayName?: string;
+ /**
+ * Default props automatically passed to the component; overwriteable
+ */
+ defaultProps?: AdaptIconProps;
+}
+
+export function createAdaptIcon(options: CreateAdaptIconOptions) {
+ const {
+ path,
+ viewBox = "0 0 12 12",
+ displayName,
+ defaultProps = {},
+ ...restOptions
+ } = options;
+
+ const AdaptIconComponent = forwardRef((props, ref) => {
+ return (
+
+ {path}
+
+ );
+ });
+
+ AdaptIconComponent.displayName = displayName;
+
+ return AdaptIconComponent;
+}
diff --git a/src/primitives/icons/index.ts b/src/primitives/icons/index.ts
new file mode 100644
index 00000000..f1a0632a
--- /dev/null
+++ b/src/primitives/icons/index.ts
@@ -0,0 +1,3 @@
+export * from "./__utils";
+export * from "./AdaptIcon";
+export * from "./createAdaptIcon";
diff --git a/src/primitives/index.ts b/src/primitives/index.ts
index df197260..d1742cd3 100644
--- a/src/primitives/index.ts
+++ b/src/primitives/index.ts
@@ -1,5 +1,6 @@
export * from "./animated-box";
export * from "./box";
+export * from "./icons";
export * from "./rn-textinput";
export * from "./text";
export * from "./touchable";
diff --git a/src/theme/defaultTheme/icon.ts b/src/theme/defaultTheme/icon.ts
new file mode 100644
index 00000000..7f5640f4
--- /dev/null
+++ b/src/theme/defaultTheme/icon.ts
@@ -0,0 +1,3 @@
+export const icon = {
+ base: "w-4 h-4",
+};
diff --git a/src/theme/defaultTheme/index.ts b/src/theme/defaultTheme/index.ts
index 26e561f4..a2dfc347 100644
--- a/src/theme/defaultTheme/index.ts
+++ b/src/theme/defaultTheme/index.ts
@@ -3,6 +3,7 @@ import { badge } from "./badge";
import { button } from "./button";
import { checkbox } from "./checkbox";
import { circularProgress } from "./circularProgress";
+import { icon } from "./icon";
import { input } from "./input";
import { meter } from "./meter";
import { progress } from "./progress";
@@ -22,6 +23,7 @@ const extendedTheme = {
button,
spinner,
circularProgress,
+ icon,
tag,
input,
tooltip,