@honeyicons/react 0.0.4 → 0.0.5

package/README.md

@@ -6,23 +6,50 @@ Inspired by [Hugeicons](https://hugeicons.com) and
 [Solar Icons](https://github.com/480-Design/Solar-Icon-Set), with smooth curves
 and rounded corners. See [NOTICE.md](./NOTICE.md) for source attribution and licenses.
 
+## Set up with your coding agent
+
+Give your coding agent this prompt:
+
+```
+Read https://github.com/arjunkambj/honeyicons/blob/main/docs/setup.md and set up @honeyicons/react in this project.
+```
+
+Or install the package yourself:
+
 ```sh
 pnpm add @honeyicons/react
 ```
 
+## Usage
+
 ```tsx
-import { Bell, Search } from "@honeyicons/react";
+import { Icon } from "@honeyicons/react";
 
 export function Toolbar() {
 	return (
-		<div>
-			<Bell size={24} title="Notifications" />
-			<Search size={16} color="currentColor" />
-		</div>
+		<nav>
+			<Icon icon="home" />
+			<Icon icon="moon" variant="bold" size={20} />
+			<Icon icon="search" strokeWidth={1.5} color="gray" title="Search" />
+		</nav>
 	);
 }
 ```
 
+`icon` accepts the kebab-case icon names, typed as `IconName`, so editors
+autocomplete them and typos fail type checking. Unknown names throw at runtime.
+`variant` only accepts the variants that icon provides. `Icon` includes the full
+collection in your bundle.
+
+For fixed icons, named imports let bundlers remove unused icons:
+
+```tsx
+import { Bell, Search } from "@honeyicons/react";
+
+<Bell size={20} />
+<Search size={16} />
+```
+
 Requires React 18 or later. Icons accept SVG props, `size` (default `24`),
 `color` (default `currentColor`), and `strokeWidth` (default `1.8`).
 Use `title`, `aria-label`, or `aria-labelledby` to give an icon an accessible
@@ -32,12 +59,12 @@ name. Icons without a name are decorative by default. Explicit `role` and
 For an icon-only button, put the accessible name on the button:
 
 ```tsx
-import { Bell } from "@honeyicons/react";
+import { Icon } from "@honeyicons/react";
 
 export function NotificationsButton() {
 	return (
 		<button type="button" aria-label="Notifications">
-			<Bell size={20} />
+			<Icon icon="bell" size={20} />
 		</button>
 	);
 }
@@ -48,22 +75,53 @@ or CSS lengths such as `"1em"`). Icons inherit the surrounding text color and
 forward `ref` to the SVG element. Standard SVG props, event handlers, and
 children such as `<desc>` are supported.
 
-Linear is the default variant. Selected icons also support other variants;
-check the component's `variants` property before choosing one. Stroke width
-affects stroked geometry; filled outlines retain their original geometry.
-Unsupported variants fall back to the first available variant.
+Icons come in `linear` and `bold`. Each icon defaults to its first variant:
+`linear`, or `bold` for icons drawn only in bold, such as most brand logos.
+Passing a variant the icon does not have throws. Stroke width affects stroked
+geometry; filled outlines retain their original geometry.
+
+To type your own props, import `IconName`, `IconProps`, and `IconVariantMap`
+from `@honeyicons/react`. `@honeyicons/react/icons.json` lists each icon's name,
+export, category, variants, and tags, and `@honeyicons/react/catalog` exports the
+same data with components for icon pickers.
+
+To draw your own icon with the same props, pass its SVG elements to `createIcon`:
+
+```tsx
+import { createIcon } from "@honeyicons/react";
+
+export const Divider = createIcon("Divider", {
+	linear: [["path", { d: "M4 12h16", stroke: "currentColor" }]],
+});
+```
+
+## Upgrading to 0.0.5
+
+- The low-level `Icon iconNode={...}` API is replaced by `Icon icon="name"`.
+  Use `createIcon` for custom SVG nodes.
+- Deprecated icon aliases have been removed. Use the canonical exports listed
+  in `icons.json`.
+- Only `linear` and `bold` are supported. Unsupported variants throw instead of
+  substituting another style. Unused `secondaryColor` and `secondaryOpacity`
+  props have been removed.
+- Shapes are now in `objects`, and spinners are in `status`.
+
+## Agent skill
+
+Coding agents such as Claude Code, Codex, and Cursor can install the Honeyicons
+skill. It looks up real icon names in the published icon index and covers usage
+and best practices:
+
+```sh
+npx skills add arjunkambj/honeyicons
+```
 
-Catalog data is available as the named `catalog` export from
-`@honeyicons/react/catalog`. For reusable components, import the `HoneyIcon`
-and `HoneyIconProps` types from `@honeyicons/react`.
+## Development
 
 The published package contains ESM JavaScript and TypeScript declarations.
-Named icon imports support tree shaking; importing the catalog includes the
-full collection.
 
 To build or package from this repository, run `pnpm run build` or `pnpm pack`
 inside `packages/react`. Packing builds the package automatically. The web app
 and shared UI resolve the source through TypeScript paths during development.
 
-See [NOTICE.md](./NOTICE.md) for third-party icon licenses and attribution,
-and [MIGRATION.md](./MIGRATION.md) for renamed exports.
+See [NOTICE.md](./NOTICE.md) for third-party icon licenses and attribution.

package/dist/catalog.js

@@ -416,7 +416,7 @@ const catalog = [
     name: "arrow-down",
     pascalName: "ArrowDown",
     category: "arrows",
-    tags: ["arrow", "down", "direction", "navigation", "arrow-down-02", "hugeicons", "ArrowDown02"],
+    tags: ["arrow", "down", "direction", "navigation", "arrow-down-02", "hugeicons"],
     variants: ["linear"],
     component: ArrowDown
   },
@@ -440,7 +440,7 @@ const catalog = [
     name: "arrow-left",
     pascalName: "ArrowLeft",
     category: "arrows",
-    tags: ["arrow", "left", "direction", "navigation", "arrow-left-02", "hugeicons", "ArrowLeft02"],
+    tags: ["arrow", "left", "direction", "navigation", "arrow-left-02", "hugeicons"],
     variants: ["linear"],
     component: ArrowLeft
   },
@@ -448,7 +448,7 @@ const catalog = [
     name: "arrow-right",
     pascalName: "ArrowRight",
     category: "arrows",
-    tags: ["arrow", "right", "direction", "navigation", "arrow-right-02", "hugeicons", "ArrowRight02"],
+    tags: ["arrow", "right", "direction", "navigation", "arrow-right-02", "hugeicons"],
     variants: ["linear"],
     component: ArrowRight
   },
@@ -456,7 +456,7 @@ const catalog = [
     name: "arrow-up",
     pascalName: "ArrowUp",
     category: "arrows",
-    tags: ["arrow", "up", "direction", "navigation", "arrow-up-02", "hugeicons", "ArrowUp02"],
+    tags: ["arrow", "up", "direction", "navigation", "arrow-up-02", "hugeicons"],
     variants: ["linear"],
     component: ArrowUp
   },
@@ -616,7 +616,7 @@ const catalog = [
     name: "calendar",
     pascalName: "Calendar",
     category: "time",
-    tags: ["calendar", "date", "schedule", "event", "month", "hugeicons", "calendar-03", "Calendar03"],
+    tags: ["calendar", "date", "schedule", "event", "month", "hugeicons", "calendar-03"],
     variants: ["linear"],
     component: Calendar
   },
@@ -736,7 +736,7 @@ const catalog = [
     name: "check-double",
     pascalName: "CheckDouble",
     category: "status",
-    tags: ["double-check", "tick", "done", "read", "receipt", "delivered", "hugeicons", "check-check", "CheckCheck"],
+    tags: ["double-check", "tick", "done", "read", "receipt", "delivered", "hugeicons", "check-check"],
     variants: ["linear"],
     component: CheckDouble
   },
@@ -744,7 +744,7 @@ const catalog = [
     name: "chevron-down",
     pascalName: "ChevronDown",
     category: "arrows",
-    tags: ["chevron", "down", "bottom", "expand", "arrow-down-01", "hugeicons", "arrow-down", "ArrowDown"],
+    tags: ["chevron", "down", "bottom", "expand", "arrow-down-01", "hugeicons", "arrow-down"],
     variants: ["linear"],
     component: ChevronDown
   },
@@ -752,7 +752,7 @@ const catalog = [
     name: "chevron-left",
     pascalName: "ChevronLeft",
     category: "arrows",
-    tags: ["chevron", "left", "back", "previous", "arrow-left-01", "hugeicons", "arrow-left", "ArrowLeft"],
+    tags: ["chevron", "left", "back", "previous", "arrow-left-01", "hugeicons", "arrow-left"],
     variants: ["linear"],
     component: ChevronLeft
   },
@@ -760,7 +760,7 @@ const catalog = [
     name: "chevron-right",
     pascalName: "ChevronRight",
     category: "arrows",
-    tags: ["chevron", "right", "forward", "next", "arrow-right-01", "hugeicons", "arrow-right", "ArrowRight"],
+    tags: ["chevron", "right", "forward", "next", "arrow-right-01", "hugeicons", "arrow-right"],
     variants: ["linear"],
     component: ChevronRight
   },
@@ -768,7 +768,7 @@ const catalog = [
     name: "chevron-up",
     pascalName: "ChevronUp",
     category: "arrows",
-    tags: ["chevron", "up", "top", "collapse", "arrow-up-01", "hugeicons", "arrow-up", "ArrowUp"],
+    tags: ["chevron", "up", "top", "collapse", "arrow-up-01", "hugeicons", "arrow-up"],
     variants: ["linear"],
     component: ChevronUp
   },
@@ -776,7 +776,7 @@ const catalog = [
     name: "chevrons-down",
     pascalName: "ChevronsDown",
     category: "arrows",
-    tags: ["chevron", "double", "down", "bottom", "hugeicons", "arrow-down-double", "ArrowDownDouble"],
+    tags: ["chevron", "double", "down", "bottom", "hugeicons", "arrow-down-double"],
     variants: ["linear"],
     component: ChevronsDown
   },
@@ -784,7 +784,7 @@ const catalog = [
     name: "chevrons-left",
     pascalName: "ChevronsLeft",
     category: "arrows",
-    tags: ["chevron", "double", "left", "first", "hugeicons", "arrow-left-double", "ArrowLeftDouble"],
+    tags: ["chevron", "double", "left", "first", "hugeicons", "arrow-left-double"],
     variants: ["linear"],
     component: ChevronsLeft
   },
@@ -792,7 +792,7 @@ const catalog = [
     name: "chevrons-right",
     pascalName: "ChevronsRight",
     category: "arrows",
-    tags: ["chevron", "double", "right", "last", "hugeicons", "arrow-right-double", "ArrowRightDouble"],
+    tags: ["chevron", "double", "right", "last", "hugeicons", "arrow-right-double"],
     variants: ["linear"],
     component: ChevronsRight
   },
@@ -800,7 +800,7 @@ const catalog = [
     name: "chevrons-up",
     pascalName: "ChevronsUp",
     category: "arrows",
-    tags: ["chevron", "double", "up", "top", "hugeicons", "arrow-up-double", "ArrowUpDouble"],
+    tags: ["chevron", "double", "up", "top", "hugeicons", "arrow-up-double"],
     variants: ["linear"],
     component: ChevronsUp
   },
@@ -1007,7 +1007,7 @@ const catalog = [
   {
     name: "diamond",
     pascalName: "Diamond",
-    category: "shapes",
+    category: "objects",
     tags: ["diamond", "shape", "geometry", "rhombus", "hugeicons"],
     variants: ["linear"],
     component: Diamond
@@ -1056,7 +1056,7 @@ const catalog = [
     name: "edit",
     pascalName: "Edit",
     category: "editor",
-    tags: ["edit", "pencil", "write", "draw", "hugeicons", "edit-01", "Edit01"],
+    tags: ["edit", "pencil", "write", "draw", "hugeicons", "edit-01"],
     variants: ["linear"],
     component: Edit
   },
@@ -1192,7 +1192,7 @@ const catalog = [
     name: "folder",
     pascalName: "Folder",
     category: "files",
-    tags: ["folder", "directory", "files", "storage", "folder-01", "Folder01", "solar"],
+    tags: ["folder", "directory", "files", "storage", "folder-01", "solar"],
     variants: ["linear"],
     component: Folder
   },
@@ -1432,7 +1432,7 @@ const catalog = [
     name: "home",
     pascalName: "Home",
     category: "maps",
-    tags: [],
+    tags: ["house", "homepage", "dashboard", "start"],
     variants: ["linear"],
     component: Home
   },
@@ -1456,7 +1456,7 @@ const catalog = [
     name: "image-add",
     pascalName: "ImageAdd",
     category: "media",
-    tags: ["image", "gallery", "upload", "photo", "plus", "gallery-add", "solar", "images-add", "ImagesAdd"],
+    tags: ["image", "gallery", "upload", "photo", "plus", "gallery-add", "solar", "images-add"],
     variants: ["linear"],
     component: ImageAdd
   },
@@ -1704,7 +1704,7 @@ const catalog = [
     name: "lock-open",
     pascalName: "LockOpen",
     category: "security",
-    tags: ["lock-open", "unlock", "security", "access", "solar", "lock-unlock", "LockUnlock"],
+    tags: ["lock-open", "unlock", "security", "access", "solar", "lock-unlock"],
     variants: ["linear"],
     component: LockOpen
   },
@@ -1832,7 +1832,7 @@ const catalog = [
     name: "microsoft-copilot",
     pascalName: "MicrosoftCopilot",
     category: "brands",
-    tags: ["microsoft", "copilot", "ai", "assistant", "brand", "ms-copilot", "MsCopilot"],
+    tags: ["microsoft", "copilot", "ai", "assistant", "brand", "ms-copilot"],
     variants: ["bold"],
     component: MicrosoftCopilot
   },
@@ -2183,7 +2183,7 @@ const catalog = [
   {
     name: "rhombus",
     pascalName: "Rhombus",
-    category: "shapes",
+    category: "objects",
     tags: ["rhombus", "shape", "geometry", "diamond", "hugeicons"],
     variants: ["linear"],
     component: Rhombus
@@ -2208,7 +2208,7 @@ const catalog = [
     name: "search",
     pascalName: "Search",
     category: "actions",
-    tags: [],
+    tags: ["find", "magnifier", "lookup", "zoom"],
     variants: ["linear"],
     component: Search
   },
@@ -2360,7 +2360,7 @@ const catalog = [
     name: "snapchat",
     pascalName: "Snapchat",
     category: "brands",
-    tags: [],
+    tags: ["brand", "social", "snap", "ghost"],
     variants: ["linear", "bold"],
     component: Snapchat
   },
@@ -2383,7 +2383,7 @@ const catalog = [
   {
     name: "spinner",
     pascalName: "Spinner",
-    category: "spinner",
+    category: "status",
     tags: ["loader", "loading", "progress", "wait", "busy", "rotate"],
     variants: ["linear"],
     component: Spinner
@@ -2391,15 +2391,15 @@ const catalog = [
   {
     name: "spinner-arc",
     pascalName: "SpinnerArc",
-    category: "spinner",
-    tags: ["loader", "loading", "progress", "wait", "rotate", "arc", "long", "spinner-large", "SpinnerLarge"],
+    category: "status",
+    tags: ["loader", "loading", "progress", "wait", "rotate", "arc", "long", "spinner-large"],
     variants: ["linear"],
     component: SpinnerArc
   },
   {
     name: "spinner-diagonal",
     pascalName: "SpinnerDiagonal",
-    category: "spinner",
+    category: "status",
     tags: ["loader", "loading", "progress", "wait", "grid", "pixel", "diagonal", "wave"],
     variants: ["linear"],
     component: SpinnerDiagonal
@@ -2407,7 +2407,7 @@ const catalog = [
   {
     name: "spinner-orbit",
     pascalName: "SpinnerOrbit",
-    category: "spinner",
+    category: "status",
     tags: ["loader", "loading", "progress", "wait", "grid", "pixel", "comet"],
     variants: ["linear"],
     component: SpinnerOrbit
@@ -2415,8 +2415,8 @@ const catalog = [
   {
     name: "spinner-wave",
     pascalName: "SpinnerWave",
-    category: "spinner",
-    tags: ["loader", "loading", "progress", "wait", "grid", "pixel", "chevron", "wave", "spinner-tinker", "SpinnerTinker"],
+    category: "status",
+    tags: ["loader", "loading", "progress", "wait", "grid", "pixel", "chevron", "wave", "spinner-tinker"],
     variants: ["linear"],
     component: SpinnerWave
   },
@@ -2424,7 +2424,7 @@ const catalog = [
     name: "square-pen",
     pascalName: "SquarePen",
     category: "actions",
-    tags: ["send-message", "SendMessage", "compose", "edit", "write", "pencil"],
+    tags: ["send-message", "compose", "edit", "write", "pencil"],
     variants: ["linear"],
     component: SquarePen
   },
@@ -2591,7 +2591,7 @@ const catalog = [
   {
     name: "three-squares",
     pascalName: "ThreeSquares",
-    category: "shapes",
+    category: "objects",
     tags: ["three-squares", "squares", "stack", "layers", "solar"],
     variants: ["linear"],
     component: ThreeSquares
@@ -2640,7 +2640,7 @@ const catalog = [
     name: "trash",
     pascalName: "Trash",
     category: "actions",
-    tags: [],
+    tags: ["delete", "remove", "bin", "discard"],
     variants: ["linear"],
     component: Trash
   },
@@ -2784,7 +2784,7 @@ const catalog = [
     name: "volume-high",
     pascalName: "VolumeHigh",
     category: "media",
-    tags: ["volume", "sound", "speaker", "audio", "unmute", "solar", "volume-loud", "VolumeLoud"],
+    tags: ["volume", "sound", "speaker", "audio", "unmute", "solar", "volume-loud"],
     variants: ["linear"],
     component: VolumeHigh
   },
@@ -2815,7 +2815,7 @@ const catalog = [
   {
     name: "waves",
     pascalName: "Waves",
-    category: "shapes",
+    category: "objects",
     tags: ["waves", "water", "sea", "ocean"],
     variants: ["linear"],
     component: Waves
@@ -2872,7 +2872,7 @@ const catalog = [
     name: "x",
     pascalName: "X",
     category: "brands",
-    tags: [],
+    tags: ["brand", "social", "twitter"],
     variants: ["linear"],
     component: X
   },
@@ -2904,7 +2904,7 @@ const catalog = [
     name: "zoom-in",
     pascalName: "ZoomIn",
     category: "actions",
-    tags: ["magnifier", "magnifier-zoom-in", "zoom-in", "search", "enlarge", "plus", "solar", "search-plus", "SearchPlus"],
+    tags: ["magnifier", "magnifier-zoom-in", "zoom-in", "search", "enlarge", "plus", "solar", "search-plus"],
     variants: ["linear"],
     component: ZoomIn
   },
@@ -2912,7 +2912,7 @@ const catalog = [
     name: "zoom-out",
     pascalName: "ZoomOut",
     category: "actions",
-    tags: ["magnifier", "minimalistic-magnifier-zoom-out", "zoom-out", "search", "shrink", "minus", "solar", "search-minus", "SearchMinus"],
+    tags: ["magnifier", "minimalistic-magnifier-zoom-out", "zoom-out", "search", "shrink", "minus", "solar", "search-minus"],
     variants: ["linear"],
     component: ZoomOut
   }

package/dist/categories.d.ts

@@ -1,2 +1,2 @@
-export declare const ICON_CATEGORIES: readonly ["actions", "ai", "arrows", "brands", "charts", "chat", "commerce", "development", "devices", "editor", "files", "layout", "maps", "media", "objects", "security", "settings", "shapes", "spinner", "status", "time", "user"];
+export declare const ICON_CATEGORIES: readonly ["actions", "ai", "arrows", "brands", "charts", "chat", "commerce", "development", "devices", "editor", "files", "layout", "maps", "media", "objects", "security", "settings", "status", "time", "user"];
 export type IconCategory = (typeof ICON_CATEGORIES)[number];

package/dist/categories.js

@@ -16,8 +16,6 @@ const ICON_CATEGORIES = [
   "objects",
   "security",
   "settings",
-  "shapes",
-  "spinner",
   "status",
   "time",
   "user"

package/dist/create-icon.d.ts

@@ -1,7 +1,9 @@
 import { type ForwardRefExoticComponent, type RefAttributes } from "react";
-import { type IconProps } from "./icon.js";
+import { type IconBaseProps } from "./icon-base.js";
 import { type IconNodeMap, type IconVariant } from "./types.js";
-export type HoneyIconProps = Omit<IconProps, "iconNode">;
+export type HoneyIconProps = Omit<IconBaseProps, "iconNode"> & {
+    variant?: IconVariant;
+};
 export type HoneyIcon = ForwardRefExoticComponent<HoneyIconProps & RefAttributes<SVGSVGElement>> & {
     variants: readonly IconVariant[];
 };

package/dist/create-icon.js

@@ -2,17 +2,24 @@ import { jsx } from "react/jsx-runtime";
 import {
   forwardRef
 } from "react";
-import { Icon } from "./icon.js";
+import { IconBase } from "./icon-base.js";
 import { ICON_VARIANTS } from "./types.js";
 function createIcon(name, nodes) {
   const variants = ICON_VARIANTS.filter((variant) => nodes[variant]);
+  const [defaultVariant] = variants;
+  if (!defaultVariant) {
+    throw new Error(`${name} has no icon data`);
+  }
   const Component = forwardRef(
-    function HoneyIcon({ variant = "linear", ...props }, ref) {
-      const iconNode = nodes[variant] ?? nodes[variants[0] ?? "linear"];
+    function HoneyIcon({ variant = defaultVariant, ...props }, ref) {
+      if (!Object.hasOwn(nodes, variant)) {
+        throw new Error(`${name} has no ${variant} variant`);
+      }
+      const iconNode = nodes[variant];
       if (!iconNode) {
-        throw new Error(`Missing icon data for ${name}`);
+        throw new Error(`${name} has no ${variant} variant`);
       }
-      return /* @__PURE__ */ jsx(Icon, { ref, iconNode, variant, ...props });
+      return /* @__PURE__ */ jsx(IconBase, { ref, iconNode, ...props });
     }
   );
   Component.displayName = name;

package/dist/icon-base.d.ts

@@ -0,0 +1,14 @@
+import { type SVGProps } from "react";
+import type { IconNode } from "./types.js";
+export type IconBaseProps = Omit<SVGProps<SVGSVGElement>, "ref" | "strokeWidth" | "width" | "height"> & {
+    iconNode: IconNode;
+    size?: number | string;
+    strokeWidth?: number;
+    title?: string;
+};
+export declare const IconBase: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "height" | "ref" | "strokeWidth" | "width"> & {
+    iconNode: IconNode;
+    size?: number | string;
+    strokeWidth?: number;
+    title?: string;
+} & import("react").RefAttributes<SVGSVGElement>>;

package/dist/icon-base.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+function paintsStroke(attrs) {
+  const stroke = attrs.stroke;
+  return Boolean(stroke && stroke !== "none");
+}
+function paintsFill(attrs) {
+  const fill = attrs.fill;
+  return Boolean(fill && fill !== "none");
+}
+const IconBase = forwardRef(
+  function IconBase2({
+    iconNode,
+    size = 24,
+    color = "currentColor",
+    strokeWidth = 1.8,
+    title,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const hasStroke = iconNode.some(([, attrs]) => paintsStroke(attrs));
+    const hasAccessibleName = Boolean(
+      title || props["aria-label"] || props["aria-labelledby"]
+    );
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: hasStroke ? "currentColor" : void 0,
+        strokeWidth: hasStroke ? strokeWidth : void 0,
+        strokeLinecap: hasStroke ? "round" : void 0,
+        strokeLinejoin: hasStroke ? "round" : void 0,
+        color,
+        className,
+        style,
+        role: hasAccessibleName ? "img" : "presentation",
+        "aria-hidden": hasAccessibleName ? void 0 : true,
+        "aria-label": title,
+        ...props,
+        children: [
+          title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+          iconNode.map(([tag, attrs], index) => {
+            const mapped = hasStroke && paintsFill(attrs) && !paintsStroke(attrs) ? { ...attrs, stroke: "none" } : attrs;
+            return createElement(tag, { ...mapped, key: index });
+          }),
+          children
+        ]
+      }
+    );
+  }
+);
+export {
+  IconBase
+};

package/dist/icon.d.ts

@@ -1,20 +1,14 @@
-import { type SVGProps } from "react";
-import type { IconNode, IconVariant } from "./types.js";
-export type IconProps = Omit<SVGProps<SVGSVGElement>, "ref" | "strokeWidth" | "width" | "height"> & {
-    iconNode: IconNode;
-    variant?: IconVariant;
-    size?: number | string;
-    strokeWidth?: number;
-    secondaryColor?: string;
-    secondaryOpacity?: number;
-    title?: string;
+import { type ReactElement, type RefAttributes } from "react";
+import type { HoneyIconProps } from "./create-icon.js";
+import { type IconName, type IconVariantMap } from "./registry.js";
+export type IconProps<Name extends IconName = IconName> = Omit<HoneyIconProps, "variant"> & {
+    [Key in Name]: {
+        icon: Key;
+        variant?: IconVariantMap[Key];
+    };
+}[Name];
+type IconComponent = (<Name extends IconName>(props: IconProps<Name> & RefAttributes<SVGSVGElement>) => ReactElement) & {
+    displayName?: string;
 };
-export declare const Icon: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "height" | "ref" | "strokeWidth" | "width"> & {
-    iconNode: IconNode;
-    variant?: IconVariant;
-    size?: number | string;
-    strokeWidth?: number;
-    secondaryColor?: string;
-    secondaryOpacity?: number;
-    title?: string;
-} & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Icon: IconComponent;
+export {};