@mvriu5/payload-icon-picker 0.1.1 → 0.1.4

package/README.md

@@ -24,6 +24,7 @@ import { lexicalEditor } from "@payloadcms/richtext-lexical"
 import * as Icons from "lucide-react"
 import { buildConfig } from "payload"
 import { iconField, payloadIconPlugin } from "@mvriu5/payload-icon-picker"
+import { lucideIconAdapter } from "@mvriu5/payload-icon-picker/adapters/lucide"
 
 export default buildConfig({
     collections: [
@@ -44,8 +45,7 @@ export default buildConfig({
     ],
     plugins: [
         payloadIconPlugin({
-            icons: Icons,
-            resolveIcon: ({ name }) => name,
+            icons: lucideIconAdapter(Icons),
         }),
     ],
     db: postgresAdapter({
@@ -84,33 +84,42 @@ Use `createIconResolver()` to turn a stored string back into the registered icon
 ```tsx
 import * as Icons from "lucide-react"
 import { createIconResolver } from "@mvriu5/payload-icon-picker"
+import { lucideIconAdapter } from "@mvriu5/payload-icon-picker/adapters/lucide"
 
 const resolveStoredIcon = createIconResolver({
-    icons: Icons,
-    resolveIcon: ({ name }) => name,
+    icons: lucideIconAdapter(Icons),
 })
 
 export function PostIcon({ icon }: { icon?: string }) {
     const resolvedIcon = resolveStoredIcon(icon)
-    const Icon = resolvedIcon?.Icon
 
-    if (!Icon) {
+    if (!resolvedIcon?.svg) {
         return null
     }
 
-    return <Icon aria-hidden size={24} />
+    return <span aria-hidden dangerouslySetInnerHTML={{ __html: resolvedIcon.svg }} />
 }
 ```
 
 ## Icon Inputs
 
-You can pass a full icon library namespace:
+Use an adapter for supported icon libraries. Adapters convert React icon exports to serializable SVG metadata for the Payload admin UI.
 
 ```ts
 import * as Icons from "lucide-react"
+import { lucideIconAdapter } from "@mvriu5/payload-icon-picker/adapters/lucide"
 
 payloadIconPlugin({
-    icons: Icons,
+    icons: lucideIconAdapter(Icons),
+})
+```
+
+```ts
+import * as TablerIcons from "@tabler/icons-react"
+import { tablerIconAdapter } from "@mvriu5/payload-icon-picker/adapters/tabler"
+
+payloadIconPlugin({
+    icons: tablerIconAdapter(TablerIcons),
 })
 ```
 
@@ -149,7 +158,7 @@ iconField({
 
 ## Development
 
-The dev Payload config in `dev/payload.config.ts` registers the plugin with a small local icon registry so the picker can be tested without installing another icon package.
+The dev Payload config in `dev/payload.config.ts` registers the plugin with `lucide-react`, which is installed as a development dependency.
 
 ```bash
 pnpm dev

package/dist/IconField.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldLabel, useField } from "@payloadcms/ui";
-import { icons as lucideIcons } from "lucide-react";
 import React, { useMemo, useState } from "react";
 const defaultResolveIcon = (icon)=>icon.value ?? icon.name;
 const ICON_BATCH_SIZE = 120;
@@ -131,7 +130,7 @@ export const IconField = ({ field, icons: iconsFromProps, noResultsLabel = "No i
                                     textOverflow: "ellipsis",
                                     whiteSpace: "nowrap"
                                 },
-                                children: selectedIcon ? selectedIcon.label ?? selectedIcon.name : placeholder
+                                children: selectedIcon ? selectedIcon.label ?? selectedIcon.name : value || placeholder
                             }),
                             value ? /*#__PURE__*/ _jsx("span", {
                                 onClick: (event)=>{
@@ -326,7 +325,6 @@ export const IconField = ({ field, icons: iconsFromProps, noResultsLabel = "No i
 };
 const IconPreview = ({ icon })=>{
     const PreviewIcon = icon.Icon ?? icon.component;
-    const LucideIcon = lucideIcons[icon.name];
     if (PreviewIcon) {
         return /*#__PURE__*/ _jsx(PreviewIcon, {
             "aria-hidden": true,
@@ -334,13 +332,6 @@ const IconPreview = ({ icon })=>{
             size: 24
         });
     }
-    if (LucideIcon) {
-        return /*#__PURE__*/ _jsx(LucideIcon, {
-            "aria-hidden": true,
-            focusable: false,
-            size: 24
-        });
-    }
     if (icon.svg) {
         return /*#__PURE__*/ _jsx("span", {
             "aria-hidden": true,

package/dist/adapters/lucide.d.ts

@@ -0,0 +1,4 @@
+import type { IconFieldIcon } from "../IconField.js";
+import type { IconAdapterOptions, IconLibrary } from "./utils.js";
+export type LucideIconAdapterOptions = IconAdapterOptions;
+export declare const lucideIconAdapter: (icons: IconLibrary, options?: LucideIconAdapterOptions) => IconFieldIcon[];

package/dist/adapters/lucide.js

@@ -0,0 +1,2 @@
+import { createSvgIconAdapter } from "./utils.js";
+export const lucideIconAdapter = (icons, options)=>createSvgIconAdapter(icons, options);

package/dist/adapters/tabler.d.ts

@@ -0,0 +1,4 @@
+import type { IconFieldIcon } from "../IconField.js";
+import type { IconAdapterOptions, IconLibrary } from "./utils.js";
+export type TablerIconAdapterOptions = IconAdapterOptions;
+export declare const tablerIconAdapter: (icons: IconLibrary, options?: TablerIconAdapterOptions) => IconFieldIcon[];

package/dist/adapters/tabler.js

@@ -0,0 +1,2 @@
+import { createSvgIconAdapter } from "./utils.js";
+export const tablerIconAdapter = (icons, options)=>createSvgIconAdapter(icons, options);

package/dist/adapters/utils.d.ts

@@ -0,0 +1,7 @@
+import type { IconFieldIcon } from "../IconField.js";
+export type IconAdapterOptions = {
+    exclude?: string[];
+    include?: string[];
+};
+export type IconLibrary = Record<string, unknown>;
+export declare const createSvgIconAdapter: (icons: IconLibrary, options?: IconAdapterOptions) => IconFieldIcon[];

package/dist/adapters/utils.js

@@ -0,0 +1,77 @@
+export const createSvgIconAdapter = (icons, options = {})=>{
+    const include = new Set(options.include ?? []);
+    const exclude = new Set(options.exclude ?? []);
+    return Object.entries(icons).flatMap(([name, icon])=>{
+        if (exclude.has(name) || include.size > 0 && !include.has(name)) {
+            return [];
+        }
+        const iconNode = getIconNode(icon);
+        if (!iconNode) {
+            return [];
+        }
+        return [
+            {
+                label: getLabel(name, icon),
+                name,
+                svg: iconNodeToSvg(iconNode),
+                value: name
+            }
+        ];
+    });
+};
+const getIconNode = (icon)=>{
+    if (!icon || typeof icon !== "object") {
+        return undefined;
+    }
+    const component = icon;
+    const rendered = component.render?.({}, null);
+    const iconNode = rendered?.props?.iconNode;
+    if (isIconNode(iconNode)) {
+        return iconNode;
+    }
+    if (isIconNode(rendered?.props?.children)) {
+        return rendered.props.children;
+    }
+    const renderedIconNode = reactElementToIconNode(rendered);
+    if (renderedIconNode) {
+        return renderedIconNode;
+    }
+    return undefined;
+};
+const getLabel = (name, icon)=>{
+    if (icon && typeof icon === "object" && "displayName" in icon && typeof icon.displayName === "string") {
+        return icon.displayName;
+    }
+    return name;
+};
+const iconNodeToSvg = (iconNode)=>{
+    const children = iconNode.map(([tag, attrs])=>`<${tag}${attrsToString(attrs)} />`).join("");
+    return `<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">${children}</svg>`;
+};
+const reactElementToIconNode = (element)=>{
+    if (!element || element.type !== "svg") {
+        return undefined;
+    }
+    const children = Array.isArray(element.props?.children) ? element.props.children : [
+        element.props?.children
+    ];
+    const iconNode = children.filter(isReactElement).map((child)=>[
+            String(child.type),
+            child.props ?? {}
+        ]).filter(([tag])=>tag !== "undefined");
+    return iconNode.length > 0 ? iconNode : undefined;
+};
+const attrsToString = (attrs)=>{
+    const attrString = Object.entries(attrs).filter(([key, value])=>key !== "key" && value !== null && value !== undefined).map(([key, value])=>` ${toKebabCase(key)}="${escapeHtml(String(value))}"`).join("");
+    return attrString;
+};
+const isIconNode = (value)=>Array.isArray(value) && value.every((item)=>{
+        if (!Array.isArray(item) || item.length !== 2) {
+            return false;
+        }
+        const [tag, attrs] = item;
+        return typeof tag === "string" && Boolean(attrs) && typeof attrs === "object" && !Array.isArray(attrs);
+    });
+const isReactElement = (value)=>value !== null && typeof value === "object" && "type" in value && "props" in value;
+const toKebabCase = (value)=>value.replace(/[A-Z]/g, (match)=>`-${match.toLowerCase()}`);
+const escapeHtml = (value)=>value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");

package/package.json

@@ -1,28 +1,33 @@
 {
     "name": "@mvriu5/payload-icon-picker",
-    "version": "0.1.1",
+    "version": "0.1.4",
     "description": "Payload plugin introducing an icon picker into the CMS.",
     "license": "MIT",
     "type": "module",
     "exports": {
         ".": {
-            "import": "./src/index.ts",
-            "types": "./src/index.ts",
-            "default": "./src/index.ts"
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
         },
         "./client": {
-            "import": "./src/exports/client.ts",
-            "types": "./src/exports/client.ts",
-            "default": "./src/exports/client.ts"
+            "import": "./dist/exports/client.js",
+            "types": "./dist/exports/client.d.ts",
+            "default": "./dist/exports/client.js"
         },
-        "./rsc": {
-            "import": "./src/exports/rsc.ts",
-            "types": "./src/exports/rsc.ts",
-            "default": "./src/exports/rsc.ts"
+        "./adapters/lucide": {
+            "import": "./dist/adapters/lucide.js",
+            "types": "./dist/adapters/lucide.d.ts",
+            "default": "./dist/adapters/lucide.js"
+        },
+        "./adapters/tabler": {
+            "import": "./dist/adapters/tabler.js",
+            "types": "./dist/adapters/tabler.d.ts",
+            "default": "./dist/adapters/tabler.js"
         }
     },
-    "main": "./src/index.ts",
-    "types": "./src/index.ts",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
     "files": [
         "dist"
     ],
@@ -53,6 +58,7 @@
         "@payloadcms/ui": "3.84.1",
         "@playwright/test": "1.58.2",
         "@swc/cli": "0.6.0",
+        "@tabler/icons-react": "^3.44.0",
         "@types/node": "22.19.9",
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
@@ -60,6 +66,7 @@
         "cross-env": "^7.0.3",
         "eslint": "^9.23.0",
         "graphql": "^16.8.1",
+        "lucide-react": "^1.23.0",
         "mongodb-memory-server": "10.1.4",
         "next": "16.2.6",
         "payload": "3.84.1",
@@ -92,10 +99,15 @@
                 "types": "./dist/exports/client.d.ts",
                 "default": "./dist/exports/client.js"
             },
-            "./rsc": {
-                "import": "./dist/exports/rsc.js",
-                "types": "./dist/exports/rsc.d.ts",
-                "default": "./dist/exports/rsc.js"
+            "./adapters/lucide": {
+                "import": "./dist/adapters/lucide.js",
+                "types": "./dist/adapters/lucide.d.ts",
+                "default": "./dist/adapters/lucide.js"
+            },
+            "./adapters/tabler": {
+                "import": "./dist/adapters/tabler.js",
+                "types": "./dist/adapters/tabler.d.ts",
+                "default": "./dist/adapters/tabler.js"
             }
         },
         "main": "./dist/index.js",
@@ -128,7 +140,6 @@
     },
     "registry": "https://registry.npmjs.org/",
     "dependencies": {
-        "knip": "^6.24.0",
-        "lucide-react": "^1.23.0"
+        "knip": "^6.24.0"
     }
 }