@versini/ui-icon-renderer 1.0.3 → 2.0.0

package/README.md

@@ -1 +1,141 @@
 # @versini/ui-icon-renderer
+
+[![npm version](https://img.shields.io/npm/v/@versini/ui-icon-renderer?style=flat-square)](https://www.npmjs.com/package/@versini/ui-icon-renderer)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-icon-renderer?style=flat-square&label=size%20(gzip)>)
+
+> A React hook for lazy-loading icons from `@versini/ui-icons` on demand.
+
+The Icon Renderer package provides `useIconRenderer`, a hook that dynamically imports icons by name at runtime. This avoids bundling all 100+ icons upfront, making it ideal for components like icon pickers where the full icon set is needed but shouldn't impact initial bundle size.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [API](#api)
+
+## Features
+
+- **🚀 Lazy Loading**: Icons are loaded on demand via dynamic imports — no upfront bundle cost
+- **⚡ Optional Preloading**: Warm the cache ahead of time to prevent flash on render
+- **🧩 Simple Hook API**: Single `useIconRenderer` hook covers all use cases
+- **🌲 Tree-shakeable**: Only the hook is included in your bundle, icon data stays lazy
+- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
+- **📦 Shared Cache**: Module-level cache ensures each icon is loaded only once across components
+
+## Installation
+
+```bash
+npm install @versini/ui-icon-renderer
+```
+
+> **Note**: This package requires `@versini/ui-icons` as a peer dependency.
+
+## Usage
+
+### Render Icons Without Preloading
+
+When you don't know which icon will be needed ahead of time, or preloading isn't necessary. The icon loads automatically when rendered (brief null while loading).
+
+```tsx
+import { useIconRenderer } from "@versini/ui-icon-renderer";
+
+function App() {
+  const [IconRenderer] = useIconRenderer();
+  const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
+
+  return (
+    <div>
+      <button onClick={() => setSelectedIcon("IconAdd")}>Show Icon</button>
+      {selectedIcon && IconRenderer && <IconRenderer icon={selectedIcon} />}
+    </div>
+  );
+}
+```
+
+### Preload Icons to Prevent Flash
+
+When you know which icons will be needed, preload them before rendering to avoid a flash of empty content.
+
+```tsx
+import { useIconRenderer } from "@versini/ui-icon-renderer";
+
+function App() {
+  const [IconRenderer, preloadIcons] = useIconRenderer();
+  const [showIcons, setShowIcons] = useState(false);
+
+  return (
+    <div>
+      <button
+        onMouseEnter={() => preloadIcons(["IconAdd", "IconDelete", "IconEdit"])}
+        onClick={() => setShowIcons(true)}
+      >
+        Show Icons
+      </button>
+      {showIcons && IconRenderer && (
+        <div>
+          <IconRenderer icon="IconAdd" />
+          <IconRenderer icon="IconDelete" />
+          <IconRenderer icon="IconEdit" />
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Icon Picker
+
+Load all available icons lazily for an icon picker component.
+
+```tsx
+import { useIconRenderer } from "@versini/ui-icon-renderer";
+
+const ALL_ICON_NAMES = ["IconAdd", "IconDelete", "IconEdit", "IconSearch"];
+
+function IconPicker({ onSelect }: { onSelect: (name: string) => void }) {
+  const [IconRenderer, preloadIcons] = useIconRenderer();
+
+  useEffect(() => {
+    preloadIcons(ALL_ICON_NAMES);
+  }, [preloadIcons]);
+
+  if (!IconRenderer) {
+    return null;
+  }
+
+  return (
+    <div className="grid grid-cols-6 gap-2">
+      {ALL_ICON_NAMES.map((name) => (
+        <button key={name} onClick={() => onSelect(name)}>
+          <IconRenderer icon={name} />
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+## API
+
+### useIconRenderer
+
+```tsx
+const [IconRenderer, preloadIcons] = useIconRenderer();
+```
+
+Returns a tuple:
+
+| Index | Name         | Type                                  | Description                                                                                    |
+| ----- | ------------ | ------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| 0     | IconRenderer | `React.FC<IconRendererProps> \| null` | The icon component, or `null` while the module is loading. Available after first render cycle. |
+| 1     | preloadIcons | `(icons: string[]) => Promise<void>`  | Preloads icon data into the cache. Optional — icons auto-load when rendered if not preloaded.  |
+
+### IconRenderer Props
+
+| Prop      | Type     | Default | Description                                                            |
+| --------- | -------- | ------- | ---------------------------------------------------------------------- |
+| icon      | `string` | -       | The name of the icon to render (e.g. `"IconAdd"`, `"IconDeleteLight"`) |
+| className | `string` | -       | CSS class(es) to add to the SVG element                                |
+
+_Also accepts all standard SVG element props (`React.ComponentPropsWithoutRef<"svg">`)._

package/dist/184.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+
+
+function useIconRenderer() {
+    const modRef = useRef(null);
+    const [mod, setMod] = useState(null);
+    useEffect(()=>{
+        /* v8 ignore start -- dynamic imports are not fully instrumented by V8 */ import("./475.js").then((mod) => ({ IconRenderer: mod.IconRenderer,preloadIcon: mod.preloadIcon,preloadIcons: mod.preloadIcons })).then((m)=>{
+            modRef.current = m;
+            setMod(m);
+        }).catch(()=>{});
+    /* v8 ignore stop */ }, []);
+    /* v8 ignore start -- dynamic imports are not fully instrumented by V8 */ const preload = useCallback((icons)=>{
+        const ensure = modRef.current ? Promise.resolve(modRef.current) : import("./475.js").then((mod) => ({ IconRenderer: mod.IconRenderer,preloadIcon: mod.preloadIcon,preloadIcons: mod.preloadIcons })).then((m)=>{
+            modRef.current = m;
+            setMod(m);
+            return m;
+        });
+        return ensure.then((m)=>m.preloadIcons(icons)).catch(()=>{});
+    }, []);
+    /* v8 ignore stop */ return [
+        mod?.IconRenderer ?? null,
+        preload
+    ];
+}
+
+export { useEffect, useIconRenderer, useState };

package/dist/475.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "./184.js";
+
+
+
+
+const iconCache = new Map();
+const toKebabCase = (name)=>name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+const preloadIcon = async (icon)=>{
+    if (iconCache.has(icon)) {
+        return;
+    }
+    /* v8 ignore start -- dynamic template-literal imports are not instrumented by V8 */ try {
+        const kebabIcon = toKebabCase(icon);
+        const mod = await import(`./data/${kebabIcon}.js`);
+        if (mod?.default) {
+            iconCache.set(icon, mod.default);
+        }
+    } catch  {
+    // Icon not found — skip silently
+    }
+/* v8 ignore stop */ };
+const preloadIcons = (icons)=>Promise.all(icons.map(preloadIcon));
+const IconRenderer = ({ icon, ...rest })=>{
+    const [IconComponent, setIconComponent] = useState(()=>iconCache.get(icon) ?? null);
+    useEffect(()=>{
+        if (iconCache.has(icon)) {
+            setIconComponent(()=>iconCache.get(icon));
+            return;
+        }
+        setIconComponent(null);
+        /* v8 ignore start -- dynamic template-literal imports are not instrumented by V8 */ (async ()=>{
+            try {
+                await preloadIcon(icon);
+                const cached = iconCache.get(icon);
+                if (cached) {
+                    setIconComponent(()=>cached);
+                }
+            } catch  {
+            // Icon not found
+            }
+        })();
+    /* v8 ignore stop */ }, [
+        icon
+    ]);
+    if (!IconComponent) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(IconComponent, {
+        "data-slot": "icon",
+        ...rest
+    });
+};
+
+export { IconRenderer, preloadIcon, preloadIcons };

package/dist/data/icon-add-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconAddLight as default } from "@versini/ui-icons/icon-add-light";

package/dist/data/{icon-IconBookSparkles.js → icon-add.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconBookSparkles as default } from "@versini/ui-icons";
+export { IconAdd as default } from "@versini/ui-icons/icon-add";

package/dist/data/icon-anthropic.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconAnthropic as default } from "@versini/ui-icons/icon-anthropic";

package/dist/data/icon-back-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBackLight as default } from "@versini/ui-icons/icon-back-light";

package/dist/data/icon-back.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBack as default } from "@versini/ui-icons/icon-back";

package/dist/data/{icon-IconBookSparklesLight.js → icon-book-sparkles-light.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconBookSparklesLight as default } from "@versini/ui-icons";
+export { IconBookSparklesLight as default } from "@versini/ui-icons/icon-book-sparkles-light";

package/dist/data/icon-book-sparkles.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBookSparkles as default } from "@versini/ui-icons/icon-book-sparkles";

package/dist/data/icon-bookmark-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBookmarkLight as default } from "@versini/ui-icons/icon-bookmark-light";

package/dist/data/icon-bookmark.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBookmark as default } from "@versini/ui-icons/icon-bookmark";

package/dist/data/icon-branch-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBranchLight as default } from "@versini/ui-icons/icon-branch-light";

package/dist/data/icon-branch.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBranch as default } from "@versini/ui-icons/icon-branch";

package/dist/data/{icon-IconBrightnessLight.js → icon-brightness-light.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconBrightnessLight as default } from "@versini/ui-icons";
+export { IconBrightnessLight as default } from "@versini/ui-icons/icon-brightness-light";

package/dist/data/icon-brightness.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconBrightness as default } from "@versini/ui-icons/icon-brightness";

package/dist/data/{icon-IconWebSearch.js → icon-chart-light.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconWebSearch as default } from "@versini/ui-icons";
+export { IconChartLight as default } from "@versini/ui-icons/icon-chart-light";

package/dist/data/{icon-IconAddLight.js → icon-chart.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconAddLight as default } from "@versini/ui-icons";
+export { IconChart as default } from "@versini/ui-icons/icon-chart";

package/dist/data/icon-checked-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCheckedLight as default } from "@versini/ui-icons/icon-checked-light";

package/dist/data/{icon-IconSend.js → icon-checked.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconSend as default } from "@versini/ui-icons";
+export { IconChecked as default } from "@versini/ui-icons/icon-checked";

package/dist/data/icon-close-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCloseLight as default } from "@versini/ui-icons/icon-close-light";

package/dist/data/{icon-IconAnthropic.js → icon-close.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconAnthropic as default } from "@versini/ui-icons";
+export { IconClose as default } from "@versini/ui-icons/icon-close";

package/dist/data/icon-copied-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCopiedLight as default } from "@versini/ui-icons/icon-copied-light";

package/dist/data/icon-copied.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCopied as default } from "@versini/ui-icons/icon-copied";

package/dist/data/icon-copy-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCopyLight as default } from "@versini/ui-icons/icon-copy-light";

package/dist/data/icon-copy.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconCopy as default } from "@versini/ui-icons/icon-copy";

package/dist/data/icon-delete-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDeleteLight as default } from "@versini/ui-icons/icon-delete-light";

package/dist/data/icon-delete.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDelete as default } from "@versini/ui-icons/icon-delete";

package/dist/data/icon-down-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDownLight as default } from "@versini/ui-icons/icon-down-light";

package/dist/data/icon-down.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDown as default } from "@versini/ui-icons/icon-down";

package/dist/data/icon-download-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDownloadLight as default } from "@versini/ui-icons/icon-download-light";

package/dist/data/icon-download.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconDownload as default } from "@versini/ui-icons/icon-download";

package/dist/data/icon-edit-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconEditLight as default } from "@versini/ui-icons/icon-edit-light";

package/dist/data/icon-edit-user-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconEditUserLight as default } from "@versini/ui-icons/icon-edit-user-light";

package/dist/data/icon-edit-user.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconEditUser as default } from "@versini/ui-icons/icon-edit-user";

package/dist/data/icon-edit.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconEdit as default } from "@versini/ui-icons/icon-edit";

package/dist/data/icon-french-flag.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconFrenchFlag as default } from "@versini/ui-icons/icon-french-flag";

package/dist/data/icon-git-hub.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconGitHub as default } from "@versini/ui-icons/icon-git-hub";

package/dist/data/icon-google-gemini.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconGoogleGemini as default } from "@versini/ui-icons/icon-google-gemini";

package/dist/data/icon-hide-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconHideLight as default } from "@versini/ui-icons/icon-hide-light";

package/dist/data/icon-hide.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconHide as default } from "@versini/ui-icons/icon-hide";

package/dist/data/icon-history-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconHistoryLight as default } from "@versini/ui-icons/icon-history-light";

package/dist/data/icon-history.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconHistory as default } from "@versini/ui-icons/icon-history";

package/dist/data/icon-info-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconInfoLight as default } from "@versini/ui-icons/icon-info-light";

package/dist/data/icon-info.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconInfo as default } from "@versini/ui-icons/icon-info";

package/dist/data/icon-key-light.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconKeyLight as default } from "@versini/ui-icons/icon-key-light";

package/dist/data/{icon-IconCheckedLight.js → icon-key.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconCheckedLight as default } from "@versini/ui-icons";
+export { IconKey as default } from "@versini/ui-icons/icon-key";

package/dist/data/{icon-IconLightBulbLight.js → icon-light-bulb-light.js}

@@ -5,4 +5,4 @@
  * To update this file, run `npm run build:list`.
  *
  */
-export { IconLightBulbLight as default } from "@versini/ui-icons";
+export { IconLightBulbLight as default } from "@versini/ui-icons/icon-light-bulb-light";

package/dist/data/icon-light-bulb.js

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated.
+ * Please do not edit manually.
+ *
+ * To update this file, run `npm run build:list`.
+ *
+ */
+export { IconLightBulb as default } from "@versini/ui-icons/icon-light-bulb";