From 463201d7587366336655f215637681210b84c7c2 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 01:51:56 +0000
Subject: [PATCH] Unify icon registry access

---
 src/hooks/ui/use-component-registry.ts | 12 ++++++++----
 src/lib/schema-renderer.tsx            |  8 ++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/hooks/ui/use-component-registry.ts b/src/hooks/ui/use-component-registry.ts
index c09b60f..6c0d309 100644
--- a/src/hooks/ui/use-component-registry.ts
+++ b/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 {
diff --git a/src/lib/schema-renderer.tsx b/src/lib/schema-renderer.tsx
index ce6bee5..136612c 100644
--- a/src/lib/schema-renderer.tsx
+++ b/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)
     }
   }