website refactor

apps/website/ui/Icon.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { LucideIcon } from 'lucide-react';
+import { Box, BoxProps } from './Box';
 
-interface IconProps {
+interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
   icon: LucideIcon;
   size?: number | string;
   color?: string;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
 export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
@@ -20,7 +19,8 @@ export function Icon({ icon: LucideIcon, size = 4, color, className = '', style,
     8: 'w-8 h-8',
     10: 'w-10 h-10',
     12: 'w-12 h-12',
-    16: 'w-16 h-16'
+    16: 'w-16 h-16',
+    'full': 'w-full h-full'
   };
 
   const sizeClass = sizeMap[size] || 'w-4 h-4';
@@ -28,8 +28,9 @@ export function Icon({ icon: LucideIcon, size = 4, color, className = '', style,
   const combinedStyle = color ? { color, ...style } : style;
 
   return (
-    <LucideIcon 
-      className={`${sizeClass} ${className}`} 
+    <Box
+      as={LucideIcon}
+      className={`${sizeClass} ${className}`}
       style={combinedStyle}
       {...props}
     />