refactor: Consolidate icon imports across components and streamline import statements for improved readability

src/app/components/icons/Icon.tsx

@@ -0,0 +1,41 @@
+import React, { CSSProperties, forwardRef } from 'react';
+import classNames from 'classnames';
+import type { LucideIcon } from 'lucide-react';
+import { ICON_PIXEL_SIZES } from './iconSizes';
+import type { IconSize } from './types';
+import * as iconStyles from './style.css';
+
+export type IconProps = {
+  src: LucideIcon;
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  fill?: string;
+} & Omit<React.SVGAttributes<SVGSVGElement>, 'fill'>;
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ className, size = '400', filled = false, src: LucideIconComponent, style, fill, ...props }, ref) => {
+    const pixelSize = ICON_PIXEL_SIZES[size];
+
+    return (
+      <LucideIconComponent
+        ref={ref}
+        className={classNames(iconStyles.Icon({ size }), className)}
+        style={
+          size === 'Inherit'
+            ? { width: '1em', height: '1em', ...style }
+            : pixelSize
+              ? { width: pixelSize, height: pixelSize, ...style }
+              : style
+        }
+        strokeWidth={2}
+        fill={fill ?? (filled ? 'currentColor' : 'none')}
+        aria-hidden={props['aria-hidden'] ?? props['aria-label'] ? undefined : true}
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';