Update index.html

index.html

@@ -44,19 +44,29 @@
     const Lucide = window.lucide;
     
     const Icon = ({ name, size = 16, className = "" }) => {
-      if (!Lucide || !Lucide.createElement) return <span />;
-      // lucide creates an SVG DOM node; wrap it for React via dangerouslySetInnerHTML
-      const el = Lucide.createElement(name, { width: size, height: size, class: className });
+      if (!Lucide || !Lucide.createElement || !Lucide.icons) return <span />;
+    
+      // lucide icons keys are PascalCase in the bundle (e.g., "Activity", "MousePointer")
+      const iconNode = Lucide.icons[name];
+      if (!iconNode) return <span />;
+    
+      const el = Lucide.createElement(iconNode, {
+        width: size,
+        height: size,
+        class: className
+      });
+    
       return <span dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
     };
     
-    // Drop-in replacements
-    const Activity = (p) => <Icon name="activity" {...p} />;
-    const Trophy = (p) => <Icon name="trophy" {...p} />;
-    const MousePointer = (p) => <Icon name="mouse-pointer" {...p} />;
-    const Pencil = (p) => <Icon name="pencil" {...p} />;
-    const Minus = (p) => <Icon name="minus" {...p} />;
-    const Trash2 = (p) => <Icon name="trash-2" {...p} />;
+    // Use PascalCase names here:
+    const Activity = (p) => <Icon name="Activity" {...p} />;
+    const Trophy = (p) => <Icon name="Trophy" {...p} />;
+    const MousePointer = (p) => <Icon name="MousePointer" {...p} />;
+    const Pencil = (p) => <Icon name="Pencil" {...p} />;
+    const Minus = (p) => <Icon name="Minus" {...p} />;
+    const Trash2 = (p) => <Icon name="Trash2" {...p} />;
+
 
     // --- CONSTANTS ---
     const INITIAL_CASH = 10000;