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';

src/app/components/icons/iconSizes.ts

@@ -0,0 +1,12 @@
+import type { IconSize } from './types';
+
+export const ICON_PIXEL_SIZES: Record<IconSize, number | undefined> = {
+  '50': 10,
+  '100': 12,
+  '200': 16,
+  '300': 20,
+  '400': 24,
+  '500': 28,
+  '600': 32,
+  Inherit: undefined,
+};

src/app/components/icons/index.ts

@@ -0,0 +1,4 @@
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { Icons } from './lucideIcons';
+export type { IconName, IconSrc, IconSize } from './types';

src/app/components/icons/lucideIcons.ts

@@ -0,0 +1,238 @@
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpDown,
+  AtSign,
+  Ban,
+  Bell,
+  BellDot,
+  BellOff,
+  BellRing,
+  Bold,
+  Bookmark,
+  Boxes,
+  CaseSensitive,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Circle,
+  CirclePlus,
+  Clock,
+  Code,
+  Code2,
+  Compass,
+  CornerUpLeft,
+  CornerUpRight,
+  Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileText,
+  Filter,
+  Flag,
+  Globe,
+  Hash,
+  Heading1,
+  Heading2,
+  Heading3,
+  Headphones,
+  Heart,
+  History,
+  Home,
+  Image,
+  ImagePlay,
+  Inbox,
+  Info,
+  Italic,
+  Leaf,
+  Lightbulb,
+  Link,
+  List,
+  ListOrdered,
+  Lock,
+  LogOut,
+  Mail,
+  MailPlus,
+  MessageSquare,
+  MessageSquareDot,
+  MessageSquarePlus,
+  MessagesSquare,
+  Mic,
+  MicOff,
+  Minus,
+  Monitor,
+  MoreHorizontal,
+  MoreVertical,
+  Paperclip,
+  Pause,
+  Pencil,
+  Phone,
+  Pin,
+  Play,
+  Plus,
+  Power,
+  Quote,
+  RefreshCw,
+  Reply,
+  Search,
+  Send,
+  Server,
+  Settings,
+  Shield,
+  ShieldUser,
+  Smile,
+  SmilePlus,
+  Sparkles,
+  Star,
+  Strikethrough,
+  Sun,
+  Terminal,
+  Trash2,
+  TriangleAlert,
+  Trophy,
+  Type,
+  Underline,
+  User,
+  UserPlus,
+  Video,
+  VideoOff,
+  Volume2,
+  VolumeX,
+  X,
+} from 'lucide-react';
+
+export const Icons = {
+  Alphabet: CaseSensitive,
+  AlphabetUnderline: Underline,
+  ArrowBottom: ArrowDown,
+  ArrowDropBottom: ChevronDown,
+  ArrowDropLeft: ChevronLeft,
+  ArrowDropRight: ChevronRight,
+  ArrowDropTop: ChevronUp,
+  ArrowGoLeft: CornerUpLeft,
+  ArrowGoRight: CornerUpRight,
+  ArrowGoRightCross: LogOut,
+  ArrowGoRightPlus: ExternalLink,
+  ArrowLeft,
+  ArrowRight,
+  ArrowTop: ArrowUp,
+  ArrowUpDown,
+  Attachment: Paperclip,
+  Ball: Circle,
+  Bell,
+  BellMute: BellOff,
+  BellPing: BellDot,
+  BellRing,
+  BlockCode: Code,
+  BlockQuote: Quote,
+  Bold,
+  Bookmark,
+  Bulb: Lightbulb,
+  Category: Boxes,
+  Check,
+  CheckTwice: CheckCheck,
+  ChevronBottom: ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronTop: ChevronUp,
+  Clock,
+  Code: Code2,
+  Cross: X,
+  Cup: Trophy,
+  Delete: Trash2,
+  Download,
+  Explore: Compass,
+  External: ExternalLink,
+  Eye,
+  EyeBlind: EyeOff,
+  File,
+  Filter,
+  Flag,
+  Funnel: Filter,
+  Hash,
+  HashGlobe: Globe,
+  HashLock: Lock,
+  HashPlus: CirclePlus,
+  HashSearch: Search,
+  Heading1,
+  Heading2,
+  Heading3,
+  Headphone: Headphones,
+  Heart,
+  Home,
+  HorizontalDots: MoreHorizontal,
+  Inbox,
+  Info,
+  Italic,
+  Leaf,
+  Link,
+  Lock,
+  Mail,
+  MailPlus,
+  Markdown: FileText,
+  Mention: AtSign,
+  Message: MessageSquare,
+  MessageUnread: MessageSquareDot,
+  Mic,
+  MicMute: MicOff,
+  Minus,
+  Monitor,
+  NoEntry: Ban,
+  OrderList: ListOrdered,
+  Pause,
+  Peace: Sparkles,
+  Pencil,
+  Phone,
+  Photo: Image,
+  Pin,
+  Play,
+  Plus,
+  PlusCircle: CirclePlus,
+  Power,
+  Prohibited: Ban,
+  RecentClock: History,
+  Reload: RefreshCw,
+  ReplyArrow: Reply,
+  Search,
+  Send,
+  Server,
+  Setting: Settings,
+  Shield,
+  ShieldLock: Lock,
+  ShieldUser,
+  Smile,
+  SmilePlus,
+  Sort: ArrowUpDown,
+  Space: Boxes,
+  SpaceGlobe: Globe,
+  SpaceLock: Lock,
+  SpacePlus: Plus,
+  SpaceSearch: Search,
+  Star,
+  Sticker: Sparkles,
+  Strike: Strikethrough,
+  Sun,
+  Terminal,
+  Text: Type,
+  Thread: MessagesSquare,
+  ThreadPlus: MessageSquarePlus,
+  ThreadUnread: MessageSquareDot,
+  Underline,
+  UnorderList: List,
+  User,
+  UserPlus,
+  VerticalDots: MoreVertical,
+  VideoCamera: Video,
+  VideoCameraMute: VideoOff,
+  Vlc: Play,
+  VolumeHigh: Volume2,
+  VolumeMute: VolumeX,
+  Warning: TriangleAlert,
+  ImagePlay,
+} as const;

src/app/components/icons/style.css.ts

@@ -0,0 +1,25 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { config } from 'folds';
+
+export const Icon = recipe({
+  base: {
+    display: 'inline-block',
+    flexShrink: 0,
+    verticalAlign: 'middle',
+  },
+  variants: {
+    size: {
+      '50': { width: config.size.X50, height: config.size.X50 },
+      '100': { width: config.size.X100, height: config.size.X100 },
+      '200': { width: config.size.X200, height: config.size.X200 },
+      '300': { width: config.size.X300, height: config.size.X300 },
+      '400': { width: config.size.X400, height: config.size.X400 },
+      '500': { width: config.size.X500, height: config.size.X500 },
+      '600': { width: config.size.X600, height: config.size.X600 },
+      Inherit: { width: '1em', height: '1em' },
+    },
+  },
+  defaultVariants: {
+    size: '400',
+  },
+});

src/app/components/icons/types.ts

@@ -0,0 +1,5 @@
+import type { LucideIcon } from 'lucide-react';
+
+export type IconSrc = LucideIcon;
+export type IconSize = '50' | '100' | '200' | '300' | '400' | '500' | '600' | 'Inherit';
+export type IconName = keyof typeof import('./lucideIcons').Icons;