⚡ Bolt: Optimize bundle size by removing static icon imports

client/package.json

@@ -18,19 +18,7 @@
     "@emotion/styled": "^11.14.1",
     "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.2.2",
-    "@iconify-json/entypo-social": "^1.2.3",
-    "@iconify-json/eva": "^1.2.3",
-    "@iconify-json/fa6-brands": "^1.2.6",
-    "@iconify-json/flag": "^1.2.9",
-    "@iconify-json/ic": "^1.2.4",
-    "@iconify-json/material-symbols": "^1.2.42",
-    "@iconify-json/material-symbols-light": "^1.2.42",
-    "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/mdi-light": "^1.2.2",
-    "@iconify-json/ri": "^1.2.6",
-    "@iconify-json/twemoji": "^1.2.4",
     "@iconify/react": "^6.0.2",
-    "@iconify/utils": "^3.0.2",
     "@mui/lab": "7.0.1-beta.18",
     "@mui/material": "^7.3.4",
     "@mui/material-nextjs": "^7.3.3",

client/src/components/base/IconifyIcon.tsx

@@ -1,52 +1,11 @@
-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 {
   sx?: BoxProps["sx"];
   flipOnRTL?: boolean;
-  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;
-  }
-};
-
 const IconifyIcon = ({
   icon,
   flipOnRTL = false,
@@ -56,16 +15,16 @@ const IconifyIcon = ({
   return (
     <Box
       component={icon ? Icon : "span"}
-      {...(icon ? { icon: iconData(icon), ssr: true } : ({} as any))}
-      className='iconify'
+      icon={icon}
+      className="iconify"
       sx={[
         flipOnRTL && {
           transform: (theme) =>
             theme.direction === "rtl" ? "scaleX(-1)" : "none",
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
-      {...rest}
+      {...(rest as any)}
     />
   );
 };