IconifyIcon.tsx

import { Icon, IconProps } from "@iconify/react";
import { Box, BoxProps } from "@mui/material";

interface IconifyProps extends IconProps {
  sx?: BoxProps["sx"];
  flipOnRTL?: boolean;
  icon: string;
}

// ⚡ 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,
  sx,
  ...rest
}: IconifyProps) => {
  return (
    <Box
      component={icon ? Icon : "span"}
      {...(icon ? { icon: icon } : ({} as any))}
      className='iconify'
      sx={[
        flipOnRTL && {
          transform: (theme) =>
            theme.direction === "rtl" ? "scaleX(-1)" : "none",
        },
        ...(Array.isArray(sx) ? sx : [sx]),
      ]}
      {...rest}
    />
  );
};

export default IconifyIcon;