From 544604b79adbd5359c8e150eaff107f795d17651 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 2 Mar 2026 11:27:40 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20Iconify=20to=20f?=
 =?UTF-8?q?etch=20icons=20on-demand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removes massive static imports of `@iconify-json/*` datasets in `IconifyIcon.tsx`
- Refactors the component to pass the icon string directly to the `@iconify/react` Icon component
- Reduces initial JS bundle size significantly by preventing thousands of unused icons from being included in the client bundle.

Co-authored-by: sshahriazz <34005640+sshahriazz@users.noreply.github.com>
---
 .jules/bolt.md                             |  7 ++++
 client/src/components/base/IconifyIcon.tsx | 48 +++-------------------
 2 files changed, 13 insertions(+), 42 deletions(-)
 create mode 100644 .jules/bolt.md

diff --git a/.jules/bolt.md b/.jules/bolt.md
new file mode 100644
index 0000000..085290d
--- /dev/null
+++ b/.jules/bolt.md
@@ -0,0 +1,7 @@
+## 2024-03-02 - Iconify Bundle Bloat
+**Learning:** Found that `@iconify-json/*` datasets are being fully imported into `client/src/components/base/IconifyIcon.tsx` and used via `getIconData`. Since these are large JSON files and imported statically, this prevents tree-shaking and bloats the bundle with thousands of unused icons. This is contrary to best practices for Iconify.
+**Action:** The user prompt states: "To prevent bundle bloat in client, use @iconify/react with icon strings for on-demand fetching instead of statically importing @iconify-json datasets." I should modify `IconifyIcon.tsx` to just pass the `icon` string directly to the `@iconify/react` `Icon` component, which fetches on demand, instead of statically loading the JSON.
+
+## 2024-03-02 - Next.js Build Requirements
+**Learning:** Found that `next build` fails in `client` because the `src/api/generated` directory is missing. This requires running `pnpm --filter client openapi` to generate API files before building.
+**Action:** Always ensure the API generated files exist before running build commands in `client`.
diff --git a/client/src/components/base/IconifyIcon.tsx b/client/src/components/base/IconifyIcon.tsx
index b48f0dc..e9a8ea4 100644
--- a/client/src/components/base/IconifyIcon.tsx
+++ b/client/src/components/base/IconifyIcon.tsx
@@ -1,16 +1,4 @@
-import { icons as entypoSocialIcons } from "@iconify-json/entypo-social";
-import { icons as evaIcons } from "@iconify-json/eva";
-import { icons as fa6Brands } from "@iconify-json/fa6-brands";
-import { icons as flagIcons } from "@iconify-json/flag";
-import { icons as icIcons } from "@iconify-json/ic";
-import { icons as materialIcons } from "@iconify-json/material-symbols";
-import { icons as materialLightIcons } from "@iconify-json/material-symbols-light";
-import { icons as mdiIcons } from "@iconify-json/mdi";
-import { icons as mdiLightIcons } from "@iconify-json/mdi-light";
-import { icons as riIcons } from "@iconify-json/ri";
-import { icons as twemojiIcons } from "@iconify-json/twemoji";
-import { Icon, IconifyJSON, IconProps } from "@iconify/react";
-import { getIconData } from "@iconify/utils";
+import { Icon, IconProps } from "@iconify/react";
 import { Box, BoxProps } from "@mui/material";
 
 interface IconifyProps extends IconProps {
@@ -19,34 +7,10 @@ interface IconifyProps extends IconProps {
   icon: string;
 }
 
-const iconSets: Record<string, IconifyJSON> = {
-  "material-symbols": materialIcons,
-  "material-symbols-light": materialLightIcons,
-  twemoji: twemojiIcons,
-  eva: evaIcons,
-  ri: riIcons,
-  ic: icIcons,
-  flag: flagIcons,
-  "fa6-brands": fa6Brands,
-  "entypo-social": entypoSocialIcons,
-  mdi: mdiIcons,
-  "mdi-light": mdiLightIcons,
-};
-
-const iconData = (icon: string) => {
-  const [prefix, name] = icon.includes(":") ? icon.split(":") : ["", icon];
-
-  if (prefix && iconSets[prefix]) {
-    const data = getIconData(iconSets[prefix], name);
-    if (data) return data;
-  }
-
-  for (const [_, icons] of Object.entries(iconSets)) {
-    const data = getIconData(icons, name);
-    if (data) return data;
-  }
-};
-
+// ⚡ Bolt Performance Optimization
+// Removed static imports of @iconify-json/* datasets to prevent massive bundle bloat.
+// Passing the icon string directly to the Icon component allows @iconify/react
+// to fetch SVG data on-demand and cache it, significantly reducing the initial JS payload size.
 const IconifyIcon = ({
   icon,
   flipOnRTL = false,
@@ -56,7 +20,7 @@ const IconifyIcon = ({
   return (
     <Box
       component={icon ? Icon : "span"}
-      {...(icon ? { icon: iconData(icon), ssr: true } : ({} as any))}
+      {...(icon ? { icon: icon } : ({} as any))}
       className='iconify'
       sx={[
         flipOnRTL && {