Good hotkey support

src-web/components/core/Icon.tsx

@@ -1,44 +1,4 @@
-import {
-  ArchiveIcon,
-  CameraIcon,
-  CheckboxIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ClockIcon,
-  CodeIcon,
-  ColorWheelIcon,
-  CopyIcon,
-  Cross2Icon,
-  DividerHorizontalIcon,
-  DotsHorizontalIcon,
-  DotsVerticalIcon,
-  DownloadIcon,
-  DragHandleDots2Icon,
-  EyeClosedIcon,
-  EyeOpenIcon,
-  GearIcon,
-  HamburgerMenuIcon,
-  HomeIcon,
-  ListBulletIcon,
-  MagicWandIcon,
-  MagnifyingGlassIcon,
-  MoonIcon,
-  OpenInNewWindowIcon,
-  PaperPlaneIcon,
-  Pencil2Icon,
-  PlusCircledIcon,
-  PlusIcon,
-  QuestionMarkIcon,
-  RowsIcon,
-  SunIcon,
-  TrashIcon,
-  TriangleDownIcon,
-  TriangleLeftIcon,
-  TriangleRightIcon,
-  UpdateIcon,
-  UploadIcon,
-} from '@radix-ui/react-icons';
+import * as ReactIcons from '@radix-ui/react-icons';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { memo } from 'react';
@@ -46,47 +6,49 @@ import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPa
 import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
 
 const icons = {
-  archive: ArchiveIcon,
-  camera: CameraIcon,
-  check: CheckIcon,
-  checkbox: CheckboxIcon,
-  clock: ClockIcon,
-  chevronDown: ChevronDownIcon,
-  chevronRight: ChevronRightIcon,
-  code: CodeIcon,
-  colorWheel: ColorWheelIcon,
-  copy: CopyIcon,
-  dividerH: DividerHorizontalIcon,
-  dotsH: DotsHorizontalIcon,
-  dotsV: DotsVerticalIcon,
-  download: DownloadIcon,
-  drag: DragHandleDots2Icon,
-  eye: EyeOpenIcon,
-  eyeClosed: EyeClosedIcon,
-  gear: GearIcon,
-  hamburger: HamburgerMenuIcon,
-  home: HomeIcon,
+  archive: ReactIcons.ArchiveIcon,
+  camera: ReactIcons.CameraIcon,
+  check: ReactIcons.CheckIcon,
+  checkbox: ReactIcons.CheckboxIcon,
+  clock: ReactIcons.ClockIcon,
+  chevronDown: ReactIcons.ChevronDownIcon,
+  chevronRight: ReactIcons.ChevronRightIcon,
+  code: ReactIcons.CodeIcon,
+  colorWheel: ReactIcons.ColorWheelIcon,
+  copy: ReactIcons.CopyIcon,
+  dividerH: ReactIcons.DividerHorizontalIcon,
+  dotsH: ReactIcons.DotsHorizontalIcon,
+  dotsV: ReactIcons.DotsVerticalIcon,
+  download: ReactIcons.DownloadIcon,
+  drag: ReactIcons.DragHandleDots2Icon,
+  eye: ReactIcons.EyeOpenIcon,
+  eyeClosed: ReactIcons.EyeClosedIcon,
+  gear: ReactIcons.GearIcon,
+  hamburger: ReactIcons.HamburgerMenuIcon,
+  home: ReactIcons.HomeIcon,
+  listBullet: ReactIcons.ListBulletIcon,
+  magicWand: ReactIcons.MagicWandIcon,
+  magnifyingGlass: ReactIcons.MagnifyingGlassIcon,
+  moon: ReactIcons.MoonIcon,
+  openNewWindow: ReactIcons.OpenInNewWindowIcon,
+  paperPlane: ReactIcons.PaperPlaneIcon,
+  pencil: ReactIcons.Pencil2Icon,
+  plus: ReactIcons.PlusIcon,
+  plusCircle: ReactIcons.PlusCircledIcon,
+  question: ReactIcons.QuestionMarkIcon,
+  rows: ReactIcons.RowsIcon,
+  sun: ReactIcons.SunIcon,
+  trash: ReactIcons.TrashIcon,
+  triangleDown: ReactIcons.TriangleDownIcon,
+  triangleLeft: ReactIcons.TriangleLeftIcon,
+  triangleRight: ReactIcons.TriangleRightIcon,
+  update: ReactIcons.UpdateIcon,
+  upload: ReactIcons.UploadIcon,
+  x: ReactIcons.Cross2Icon,
+
+  // Custom
   leftPanelHidden: LeftPanelHiddenIcon,
   leftPanelVisible: LeftPanelVisibleIcon,
-  listBullet: ListBulletIcon,
-  magicWand: MagicWandIcon,
-  magnifyingGlass: MagnifyingGlassIcon,
-  moon: MoonIcon,
-  openNewWindow: OpenInNewWindowIcon,
-  paperPlane: PaperPlaneIcon,
-  pencil: Pencil2Icon,
-  plus: PlusIcon,
-  plusCircle: PlusCircledIcon,
-  question: QuestionMarkIcon,
-  rows: RowsIcon,
-  sun: SunIcon,
-  trash: TrashIcon,
-  triangleDown: TriangleDownIcon,
-  triangleLeft: TriangleLeftIcon,
-  triangleRight: TriangleRightIcon,
-  update: UpdateIcon,
-  upload: UploadIcon,
-  x: Cross2Icon,
   empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
 };