Merge pull request #97 from johndoe6345789/codex/extend-usecomponentregistry-for-json-ui-icons

Unify icon registry access for schema renderer

src/hooks/ui/use-component-registry.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { createElement, useMemo } from 'react'
 import { uiComponentRegistry, iconComponents } from '@/lib/json-ui/component-registry'
 import * as Icons from '@phosphor-icons/react'
 
@@ -20,9 +20,13 @@ export function useComponentRegistry({ customComponents = {} }: ComponentRegistr
   }
 
   const getIcon = (iconName: string, props?: any): React.ReactElement | null => {
-    const IconComponent = iconComponents[iconName as keyof typeof iconComponents] || (Icons as any)[iconName]
-    if (!IconComponent) return null
-    return IconComponent({ size: 24, weight: "duotone", ...props })
+    const registryIcon = registry[iconName as keyof typeof registry]
+    const IconComponent =
+      (registryIcon && typeof registryIcon !== 'string' ? registryIcon : null) ||
+      iconComponents[iconName as keyof typeof iconComponents] ||
+      (Icons as any)[iconName]
+    if (!IconComponent || typeof IconComponent === 'string') return null
+    return createElement(IconComponent, { size: 24, weight: "duotone", ...props })
   }
 
   return {

src/lib/schema-renderer.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react'
+import { createElement, type ComponentType, type ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { Component as ComponentSchema, Layout } from '@/schemas/ui-schema'
 import { useDataBinding, useEventHandlers, useComponentRegistry } from '@/hooks/ui'
@@ -91,7 +91,11 @@ export function SchemaRenderer({ schema, data, functions = {}, componentRegistry
 
   if (schema.binding) {
     const iconName = resolveBinding(schema.binding)
-    if (iconName && schema.type === 'Icon') {
+    if (typeof iconName === 'string' && schema.type === 'Icon') {
+      const IconComponent = getComponent(iconName)
+      if (IconComponent) {
+        return createElement(IconComponent, combinedProps)
+      }
       return getIcon(iconName, combinedProps)
     }
   }