Update index.html

index.html

@@ -17,7 +17,7 @@
   <script src="https://unpkg.com/recharts@1.8.5/umd/Recharts.min.js"></script>
 
   <!-- Lucide Icons -->
-  <script src="https://unpkg.com/lucide-react@0.294.0/dist/umd/lucide-react.min.js"></script>
+  <script src="https://unpkg.com/lucide@0.294.0/dist/umd/lucide.min.js"></script>
 
   <!-- Babel -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
@@ -40,13 +40,23 @@
     const Recharts = window.Recharts;
     const { ComposedChart, Line, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, ReferenceLine, ReferenceDot } = Recharts;
 
-    const Lucide = window.lucideReact;
-    const Activity = Lucide.Activity || (() => <span />);
-    const Trophy = Lucide.Trophy || (() => <span />);
-    const MousePointer = Lucide.MousePointer || (() => <span />);
-    const Pencil = Lucide.Pencil || (() => <span />);
-    const Minus = Lucide.Minus || (() => <span />);
-    const Trash2 = Lucide.Trash2 || (() => <span />);
+    // Icons rendered via lucide.createElement(name)
+    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 });
+      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} />;
 
     // --- CONSTANTS ---
     const INITIAL_CASH = 10000;