fix: force the smart icon for client side loading to prevent potential issues

src/components/utils/SmartIcon.tsx

@@ -1,25 +1,22 @@
-'use client';
+'use client'
 
-import React from "react";
+import React, { Suspense, lazy, ComponentType } from 'react'
-import * as Iconsax from "iconsax-react";
+import { SmartIconType } from '@/types/iconType'
-import { SmartIconType } from "@/types/iconType";
 
 type IconsaxIconProps = {
-  size?: number;
+  size?: number
-  color?: string;
+  color?: string
-  className?: string;
+  className?: string
-  variant?: string;
+  variant?: string
-};
+}
-
-type IconComponentType = React.FC<IconsaxIconProps>;
 
 export interface SmartIconProps {
-  icon?: SmartIconType;
+  icon?: SmartIconType
-  name?: string;
+  name?: string
-  size?: number;
+  size?: number
-  color?: string;
+  color?: string
-  className?: string;
+  className?: string
-  variant?: string;
+  variant?: string
 }
 
 export const SmartIcon: React.FC<SmartIconProps> = ({
@@ -28,22 +25,32 @@ export const SmartIcon: React.FC<SmartIconProps> = ({
   size,
   color,
   className,
-  variant,
+  variant
 }) => {
-  const iconName = (icon?.Name || name || "").charAt(0).toUpperCase() + (icon?.Name || name || "").slice(1);
+  const iconName =
+    (icon?.Name || name || '').charAt(0).toUpperCase() +
+    (icon?.Name || name || '').slice(1)
 
-  if (!iconName) return null;
+  if (!iconName) return null
 
-  const IconComponent = Iconsax[iconName as keyof typeof Iconsax] as IconComponentType | undefined;
+  // Lazy-load icon dynamically with proper type cast
-
+  const IconComponent = lazy(() =>
-  if (!IconComponent) return null;
+    import('iconsax-react').then(module => {
+      const Component = module[
+        iconName as keyof typeof module
+      ] as ComponentType<IconsaxIconProps>
+      return { default: Component }
+    })
+  )
 
   return (
-    <IconComponent
+    <Suspense fallback={null}>
-      variant={icon?.Variant ?? variant ?? 'lineat'}
+      <IconComponent
-      size={icon?.Size ?? size ?? 20}
+        variant={icon?.Variant ?? variant ?? 'linear'}
-      color={icon?.Color ?? color ?? "currentColor"}
+        size={icon?.Size ?? size ?? 20}
-      className={icon?.ClassName ?? className}
+        color={icon?.Color ?? color ?? 'currentColor'}
-    />
+        className={icon?.ClassName ?? className}
-  );
+      />
-};
+    </Suspense>
+  )
+}