yaak/src-web/components/core/Icon.tsx

import type { Color } from '@yaakapp-internal/plugins';
import classNames from 'classnames';
import {
  AlarmClockIcon,
  AlertTriangleIcon,
  ArchiveIcon,
  ArrowBigDownDashIcon,
  ArrowBigLeftDashIcon,
  ArrowBigRightDashIcon,
  ArrowBigRightIcon,
  ArrowBigUpDashIcon,
  ArrowDownIcon,
  ArrowDownToDotIcon,
  ArrowDownToLineIcon,
  ArrowLeftIcon,
  ArrowRightCircleIcon,
  ArrowRightIcon,
  ArrowUpDownIcon,
  ArrowUpFromDotIcon,
  ArrowUpFromLineIcon,
  ArrowUpIcon,
  BadgeCheckIcon,
  BookOpenText,
  BoxIcon,
  CakeIcon,
  CheckCircleIcon,
  CheckIcon,
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsDownUpIcon,
  ChevronsUpDownIcon,
  CircleAlertIcon,
  CircleDashedIcon,
  CircleDollarSignIcon,
  CircleFadingArrowUpIcon,
  CircleHelpIcon,
  CircleOffIcon,
  ClipboardPasteIcon,
  ClockIcon,
  CodeIcon,
  Columns2Icon,
  CommandIcon,
  CookieIcon,
  CopyCheck,
  CopyIcon,
  CornerRightUpIcon,
  CreditCardIcon,
  CrosshairIcon,
  DotIcon,
  DownloadIcon,
  EllipsisIcon,
  EllipsisVerticalIcon,
  ExpandIcon,
  ExternalLinkIcon,
  EyeIcon,
  EyeOffIcon,
  FileCodeIcon,
  FileIcon,
  FileTextIcon,
  FilterIcon,
  FlameIcon,
  FlaskConicalIcon,
  FolderCodeIcon,
  FolderCogIcon,
  FolderGitIcon,
  FolderIcon,
  FolderInputIcon,
  FolderOpenIcon,
  FolderOutputIcon,
  FolderSymlinkIcon,
  FolderSyncIcon,
  FolderUpIcon,
  GiftIcon,
  GitBranchIcon,
  GitBranchPlusIcon,
  GitCommitIcon,
  GitCommitVerticalIcon,
  GitForkIcon,
  GitPullRequestIcon,
  GlobeIcon,
  GripVerticalIcon,
  HandIcon,
  HardDriveDownloadIcon,
  HistoryIcon,
  HomeIcon,
  ImportIcon,
  InfoIcon,
  KeyboardIcon,
  KeyRoundIcon,
  LockIcon,
  LockOpenIcon,
  MergeIcon,
  MessageSquare,
  MinusCircleIcon,
  MinusIcon,
  MoonIcon,
  MoreVerticalIcon,
  PaletteIcon,
  PanelLeftCloseIcon,
  PanelLeftOpenIcon,
  PencilIcon,
  PinIcon,
  PinOffIcon,
  Plug,
  PlusCircleIcon,
  PlusIcon,
  PuzzleIcon,
  RefreshCcwIcon,
  RefreshCwIcon,
  RocketIcon,
  Rows2Icon,
  SaveIcon,
  SearchIcon,
  SendHorizontalIcon,
  SettingsIcon,
  ShieldAlertIcon,
  ShieldCheckIcon,
  ShieldIcon,
  ShieldOffIcon,
  SparklesIcon,
  SquareCheckIcon,
  SquareIcon,
  SquareTerminalIcon,
  SunIcon,
  TableIcon,
  Trash2Icon,
  UploadIcon,
  VariableIcon,
  Wand2Icon,
  WifiIcon,
  WrenchIcon,
  XIcon,
} from 'lucide-react';
import type { CSSProperties, HTMLAttributes } from 'react';
import { memo } from 'react';

const icons = {
  alarm_clock: AlarmClockIcon,
  alert_triangle: AlertTriangleIcon,
  archive: ArchiveIcon,
  arrow_big_down_dash: ArrowBigDownDashIcon,
  arrow_big_left_dash: ArrowBigLeftDashIcon,
  arrow_big_right: ArrowBigRightIcon,
  arrow_big_right_dash: ArrowBigRightDashIcon,
  arrow_big_up_dash: ArrowBigUpDashIcon,
  arrow_down: ArrowDownIcon,
  arrow_down_to_dot: ArrowDownToDotIcon,
  arrow_down_to_line: ArrowDownToLineIcon,
  arrow_left: ArrowLeftIcon,
  arrow_right: ArrowRightIcon,
  arrow_right_circle: ArrowRightCircleIcon,
  arrow_up: ArrowUpIcon,
  arrow_up_down: ArrowUpDownIcon,
  arrow_up_from_dot: ArrowUpFromDotIcon,
  arrow_up_from_line: ArrowUpFromLineIcon,
  badge_check: BadgeCheckIcon,
  book_open_text: BookOpenText,
  box: BoxIcon,
  cake: CakeIcon,
  chat: MessageSquare,
  check: CheckIcon,
  check_circle: CheckCircleIcon,
  check_square_checked: SquareCheckIcon,
  check_square_unchecked: SquareIcon,
  chevron_down: ChevronDownIcon,
  chevron_left: ChevronLeftIcon,
  chevrons_up_down: ChevronsUpDownIcon,
  chevrons_down_up: ChevronsDownUpIcon,
  chevron_right: ChevronRightIcon,
  circle_alert: CircleAlertIcon,
  circle_dashed: CircleDashedIcon,
  circle_dollar_sign: CircleDollarSignIcon,
  circle_fading_arrow_up: CircleFadingArrowUpIcon,
  clock: ClockIcon,
  code: CodeIcon,
  columns_2: Columns2Icon,
  command: CommandIcon,
  cookie: CookieIcon,
  copy: CopyIcon,
  copy_check: CopyCheck,
  corner_right_up: CornerRightUpIcon,
  credit_card: CreditCardIcon,
  crosshair: CrosshairIcon,
  dot: DotIcon,
  download: DownloadIcon,
  ellipsis: EllipsisIcon,
  ellipsis_vertical: EllipsisVerticalIcon,
  expand: ExpandIcon,
  external_link: ExternalLinkIcon,
  eye: EyeIcon,
  eye_closed: EyeOffIcon,
  file: FileIcon,
  file_code: FileCodeIcon,
  file_text: FileTextIcon,
  filter: FilterIcon,
  flame: FlameIcon,
  flask: FlaskConicalIcon,
  folder: FolderIcon,
  folder_code: FolderCodeIcon,
  folder_cog: FolderCogIcon,
  folder_git: FolderGitIcon,
  folder_input: FolderInputIcon,
  folder_open: FolderOpenIcon,
  folder_output: FolderOutputIcon,
  folder_symlink: FolderSymlinkIcon,
  folder_sync: FolderSyncIcon,
  folder_up: FolderUpIcon,
  gift: GiftIcon,
  git_branch: GitBranchIcon,
  git_branch_plus: GitBranchPlusIcon,
  git_commit: GitCommitIcon,
  git_commit_vertical: GitCommitVerticalIcon,
  git_fork: GitForkIcon,
  git_pull_request: GitPullRequestIcon,
  globe: GlobeIcon,
  grip_vertical: GripVerticalIcon,
  circle_off: CircleOffIcon,
  hand: HandIcon,
  hard_drive_download: HardDriveDownloadIcon,
  help: CircleHelpIcon,
  history: HistoryIcon,
  house: HomeIcon,
  import: ImportIcon,
  info: InfoIcon,
  key_round: KeyRoundIcon,
  keyboard: KeyboardIcon,
  left_panel_hidden: PanelLeftOpenIcon,
  left_panel_visible: PanelLeftCloseIcon,
  lock: LockIcon,
  lock_open: LockOpenIcon,
  magic_wand: Wand2Icon,
  merge: MergeIcon,
  minus: MinusIcon,
  minus_circle: MinusCircleIcon,
  moon: MoonIcon,
  more_vertical: MoreVerticalIcon,
  palette: PaletteIcon,
  paste: ClipboardPasteIcon,
  pencil: PencilIcon,
  pin: PinIcon,
  plug: Plug,
  plus: PlusIcon,
  plus_circle: PlusCircleIcon,
  puzzle: PuzzleIcon,
  refresh: RefreshCwIcon,
  rocket: RocketIcon,
  rows_2: Rows2Icon,
  save: SaveIcon,
  search: SearchIcon,
  send_horizontal: SendHorizontalIcon,
  settings: SettingsIcon,
  shield: ShieldIcon,
  shield_check: ShieldCheckIcon,
  shield_off: ShieldOffIcon,
  sparkles: SparklesIcon,
  square_terminal: SquareTerminalIcon,
  sun: SunIcon,
  table: TableIcon,
  text: FileTextIcon,
  trash: Trash2Icon,
  unpin: PinOffIcon,
  update: RefreshCcwIcon,
  upload: UploadIcon,
  variable: VariableIcon,
  wifi: WifiIcon,
  wrench: WrenchIcon,
  x: XIcon,
  _unknown: ShieldAlertIcon,

  empty: (props: HTMLAttributes<HTMLSpanElement>) => <div {...props} />,
};

export interface IconProps {
  icon: keyof typeof icons;
  className?: string;
  style?: CSSProperties;
  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  spin?: boolean;
  title?: string;
  color?: Color | 'custom' | 'default';
}

export const Icon = memo(function Icon({
  icon,
  color = 'default',
  spin,
  size = 'md',
  style,
  className,
  title,
}: IconProps) {
  const Component = icons[icon] ?? icons._unknown;
  return (
    <Component
      style={style}
      title={title}
      className={classNames(
        className,
        !spin && 'transform-gpu',
        spin && 'animate-spin',
        'flex-shrink-0',
        size === 'xl' && 'h-6 w-6',
        size === 'lg' && 'h-5 w-5',
        size === 'md' && 'h-4 w-4',
        size === 'sm' && 'h-3.5 w-3.5',
        size === 'xs' && 'h-3 w-3',
        size === '2xs' && 'h-2.5 w-2.5',
        color === 'default' && 'inherit',
        color === 'danger' && 'text-danger',
        color === 'warning' && 'text-warning',
        color === 'notice' && 'text-notice',
        color === 'info' && 'text-info',
        color === 'success' && 'text-success',
        color === 'primary' && 'text-primary',
        color === 'secondary' && 'text-secondary',
      )}
    />
  );
});