/* eslint-disable import/first */ // Graphics import GraphiteLogotypeSolid from "@graphite-frontend/assets/graphics/graphite-logotype-solid.svg"; const GRAPHICS = { GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined }, } as const; // 12px Solid import Add from "@graphite-frontend/assets/icon-12px-solid/add.svg"; import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg"; import Clipped from "@graphite-frontend/assets/icon-12px-solid/clipped.svg"; import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg"; import Delay from "@graphite-frontend/assets/icon-12px-solid/delay.svg"; import Dot from "@graphite-frontend/assets/icon-12px-solid/dot.svg"; import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg"; import Edit12px from "@graphite-frontend/assets/icon-12px-solid/edit-12px.svg"; import Empty12px from "@graphite-frontend/assets/icon-12px-solid/empty-12px.svg"; import Failure from "@graphite-frontend/assets/icon-12px-solid/failure.svg"; import FullscreenEnter from "@graphite-frontend/assets/icon-12px-solid/fullscreen-enter.svg"; import FullscreenExit from "@graphite-frontend/assets/icon-12px-solid/fullscreen-exit.svg"; import GridDotted from "@graphite-frontend/assets/icon-12px-solid/grid-dotted.svg"; import Grid from "@graphite-frontend/assets/icon-12px-solid/grid.svg"; import Info from "@graphite-frontend/assets/icon-12px-solid/info.svg"; import KeyboardArrowDown from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-down.svg"; import KeyboardArrowLeft from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-left.svg"; import KeyboardArrowRight from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-right.svg"; import KeyboardArrowUp from "@graphite-frontend/assets/icon-12px-solid/keyboard-arrow-up.svg"; import KeyboardBackspace from "@graphite-frontend/assets/icon-12px-solid/keyboard-backspace.svg"; import KeyboardCommand from "@graphite-frontend/assets/icon-12px-solid/keyboard-command.svg"; import KeyboardControl from "@graphite-frontend/assets/icon-12px-solid/keyboard-control.svg"; import KeyboardEnter from "@graphite-frontend/assets/icon-12px-solid/keyboard-enter.svg"; import KeyboardOption from "@graphite-frontend/assets/icon-12px-solid/keyboard-option.svg"; import KeyboardShift from "@graphite-frontend/assets/icon-12px-solid/keyboard-shift.svg"; import KeyboardSpace from "@graphite-frontend/assets/icon-12px-solid/keyboard-space.svg"; import KeyboardTab from "@graphite-frontend/assets/icon-12px-solid/keyboard-tab.svg"; import License12px from "@graphite-frontend/assets/icon-12px-solid/license-12px.svg"; import Link from "@graphite-frontend/assets/icon-12px-solid/link.svg"; import Overlays from "@graphite-frontend/assets/icon-12px-solid/overlays.svg"; import Remove from "@graphite-frontend/assets/icon-12px-solid/remove.svg"; import Snapping from "@graphite-frontend/assets/icon-12px-solid/snapping.svg"; import SwapHorizontal from "@graphite-frontend/assets/icon-12px-solid/swap-horizontal.svg"; import SwapVertical from "@graphite-frontend/assets/icon-12px-solid/swap-vertical.svg"; import VerticalEllipsis from "@graphite-frontend/assets/icon-12px-solid/vertical-ellipsis.svg"; import Warning from "@graphite-frontend/assets/icon-12px-solid/warning.svg"; import WindowButtonWinClose from "@graphite-frontend/assets/icon-12px-solid/window-button-win-close.svg"; import WindowButtonWinMaximize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-maximize.svg"; import WindowButtonWinMinimize from "@graphite-frontend/assets/icon-12px-solid/window-button-win-minimize.svg"; import WindowButtonWinRestoreDown from "@graphite-frontend/assets/icon-12px-solid/window-button-win-restore-down.svg"; import WorkingColors from "@graphite-frontend/assets/icon-12px-solid/working-colors.svg"; const SOLID_12PX = { Add: { svg: Add, size: 12 }, Checkmark: { svg: Checkmark, size: 12 }, Clipped: { svg: Clipped, size: 12 }, CloseX: { svg: CloseX, size: 12 }, Delay: { svg: Delay, size: 12 }, Dot: { svg: Dot, size: 12 }, DropdownArrow: { svg: DropdownArrow, size: 12 }, Edit12px: { svg: Edit12px, size: 12 }, Empty12px: { svg: Empty12px, size: 12 }, Failure: { svg: Failure, size: 12 }, FullscreenEnter: { svg: FullscreenEnter, size: 12 }, FullscreenExit: { svg: FullscreenExit, size: 12 }, Grid: { svg: Grid, size: 12 }, GridDotted: { svg: GridDotted, size: 12 }, Info: { svg: Info, size: 12 }, KeyboardArrowDown: { svg: KeyboardArrowDown, size: 12 }, KeyboardArrowLeft: { svg: KeyboardArrowLeft, size: 12 }, KeyboardArrowRight: { svg: KeyboardArrowRight, size: 12 }, KeyboardArrowUp: { svg: KeyboardArrowUp, size: 12 }, KeyboardBackspace: { svg: KeyboardBackspace, size: 12 }, KeyboardCommand: { svg: KeyboardCommand, size: 12 }, KeyboardControl: { svg: KeyboardControl, size: 12 }, KeyboardEnter: { svg: KeyboardEnter, size: 12 }, KeyboardOption: { svg: KeyboardOption, size: 12 }, KeyboardShift: { svg: KeyboardShift, size: 12 }, KeyboardSpace: { svg: KeyboardSpace, size: 12 }, KeyboardTab: { svg: KeyboardTab, size: 12 }, License12px: { svg: License12px, size: 12 }, Link: { svg: Link, size: 12 }, Overlays: { svg: Overlays, size: 12 }, Remove: { svg: Remove, size: 12 }, Snapping: { svg: Snapping, size: 12 }, SwapHorizontal: { svg: SwapHorizontal, size: 12 }, SwapVertical: { svg: SwapVertical, size: 12 }, VerticalEllipsis: { svg: VerticalEllipsis, size: 12 }, Warning: { svg: Warning, size: 12 }, WindowButtonWinClose: { svg: WindowButtonWinClose, size: 12 }, WindowButtonWinMaximize: { svg: WindowButtonWinMaximize, size: 12 }, WindowButtonWinMinimize: { svg: WindowButtonWinMinimize, size: 12 }, WindowButtonWinRestoreDown: { svg: WindowButtonWinRestoreDown, size: 12 }, WorkingColors: { svg: WorkingColors, size: 12 }, } as const; // 16px Solid import AlignBottom from "@graphite-frontend/assets/icon-16px-solid/align-bottom.svg"; import AlignHorizontalCenter from "@graphite-frontend/assets/icon-16px-solid/align-horizontal-center.svg"; import AlignLeft from "@graphite-frontend/assets/icon-16px-solid/align-left.svg"; import AlignRight from "@graphite-frontend/assets/icon-16px-solid/align-right.svg"; import AlignTop from "@graphite-frontend/assets/icon-16px-solid/align-top.svg"; import AlignVerticalCenter from "@graphite-frontend/assets/icon-16px-solid/align-vertical-center.svg"; import Artboard from "@graphite-frontend/assets/icon-16px-solid/artboard.svg"; import BooleanDifference from "@graphite-frontend/assets/icon-16px-solid/boolean-difference.svg"; import BooleanDivide from "@graphite-frontend/assets/icon-16px-solid/boolean-divide.svg"; import BooleanIntersect from "@graphite-frontend/assets/icon-16px-solid/boolean-intersect.svg"; import BooleanSubtractBack from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-back.svg"; import BooleanSubtractFront from "@graphite-frontend/assets/icon-16px-solid/boolean-subtract-front.svg"; import BooleanUnion from "@graphite-frontend/assets/icon-16px-solid/boolean-union.svg"; import Bug from "@graphite-frontend/assets/icon-16px-solid/bug.svg"; import CheckboxChecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-checked.svg"; import CheckboxUnchecked from "@graphite-frontend/assets/icon-16px-solid/checkbox-unchecked.svg"; import CloseAll from "@graphite-frontend/assets/icon-16px-solid/close-all.svg"; import Close from "@graphite-frontend/assets/icon-16px-solid/close.svg"; import Code from "@graphite-frontend/assets/icon-16px-solid/code.svg"; import Copy from "@graphite-frontend/assets/icon-16px-solid/copy.svg"; import Credits from "@graphite-frontend/assets/icon-16px-solid/credits.svg"; import CustomColor from "@graphite-frontend/assets/icon-16px-solid/custom-color.svg"; import Cut from "@graphite-frontend/assets/icon-16px-solid/cut.svg"; import DeselectAll from "@graphite-frontend/assets/icon-16px-solid/deselect-all.svg"; import Edit from "@graphite-frontend/assets/icon-16px-solid/edit.svg"; import Empty from "@graphite-frontend/assets/icon-16px-solid/empty.svg"; import EyeHidden from "@graphite-frontend/assets/icon-16px-solid/eye-hidden.svg"; import EyeHide from "@graphite-frontend/assets/icon-16px-solid/eye-hide.svg"; import EyeShow from "@graphite-frontend/assets/icon-16px-solid/eye-show.svg"; import EyeVisible from "@graphite-frontend/assets/icon-16px-solid/eye-visible.svg"; import Eyedropper from "@graphite-frontend/assets/icon-16px-solid/eyedropper.svg"; import FileExport from "@graphite-frontend/assets/icon-16px-solid/file-export.svg"; import FileImport from "@graphite-frontend/assets/icon-16px-solid/file-import.svg"; import File from "@graphite-frontend/assets/icon-16px-solid/file.svg"; import FlipHorizontal from "@graphite-frontend/assets/icon-16px-solid/flip-horizontal.svg"; import FlipVertical from "@graphite-frontend/assets/icon-16px-solid/flip-vertical.svg"; import FolderOpen from "@graphite-frontend/assets/icon-16px-solid/folder-open.svg"; import Folder from "@graphite-frontend/assets/icon-16px-solid/folder.svg"; import FrameAll from "@graphite-frontend/assets/icon-16px-solid/frame-all.svg"; import FrameSelected from "@graphite-frontend/assets/icon-16px-solid/frame-selected.svg"; import GraphViewClosed from "@graphite-frontend/assets/icon-16px-solid/graph-view-closed.svg"; import GraphViewOpen from "@graphite-frontend/assets/icon-16px-solid/graph-view-open.svg"; import GraphiteLogo from "@graphite-frontend/assets/icon-16px-solid/graphite-logo.svg"; import HandleVisibilityAll from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-all.svg"; import HandleVisibilityFrontier from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-frontier.svg"; import HandleVisibilitySelected from "@graphite-frontend/assets/icon-16px-solid/handle-visibility-selected.svg"; import Heart from "@graphite-frontend/assets/icon-16px-solid/heart.svg"; import HistoryRedo from "@graphite-frontend/assets/icon-16px-solid/history-redo.svg"; import HistoryUndo from "@graphite-frontend/assets/icon-16px-solid/history-undo.svg"; import IconsGrid from "@graphite-frontend/assets/icon-16px-solid/icons-grid.svg"; import Image from "@graphite-frontend/assets/icon-16px-solid/image.svg"; import Layer from "@graphite-frontend/assets/icon-16px-solid/layer.svg"; import License from "@graphite-frontend/assets/icon-16px-solid/license.svg"; import NewLayer from "@graphite-frontend/assets/icon-16px-solid/new-layer.svg"; import NodeBlur from "@graphite-frontend/assets/icon-16px-solid/node-blur.svg"; import NodeBrushwork from "@graphite-frontend/assets/icon-16px-solid/node-brushwork.svg"; import NodeColorCorrection from "@graphite-frontend/assets/icon-16px-solid/node-color-correction.svg"; import NodeGradient from "@graphite-frontend/assets/icon-16px-solid/node-gradient.svg"; import NodeImaginate from "@graphite-frontend/assets/icon-16px-solid/node-imaginate.svg"; import NodeMagicWand from "@graphite-frontend/assets/icon-16px-solid/node-magic-wand.svg"; import NodeMask from "@graphite-frontend/assets/icon-16px-solid/node-mask.svg"; import NodeMotionBlur from "@graphite-frontend/assets/icon-16px-solid/node-motion-blur.svg"; import NodeNodes from "@graphite-frontend/assets/icon-16px-solid/node-nodes.svg"; import NodeOutput from "@graphite-frontend/assets/icon-16px-solid/node-output.svg"; import NodeShape from "@graphite-frontend/assets/icon-16px-solid/node-shape.svg"; import NodeText from "@graphite-frontend/assets/icon-16px-solid/node-text.svg"; import NodeTransform from "@graphite-frontend/assets/icon-16px-solid/node-transform.svg"; import Node from "@graphite-frontend/assets/icon-16px-solid/node.svg"; import PadlockLocked from "@graphite-frontend/assets/icon-16px-solid/padlock-locked.svg"; import PadlockUnlocked from "@graphite-frontend/assets/icon-16px-solid/padlock-unlocked.svg"; import Paste from "@graphite-frontend/assets/icon-16px-solid/paste.svg"; import PinActive from "@graphite-frontend/assets/icon-16px-solid/pin-active.svg"; import PinInactive from "@graphite-frontend/assets/icon-16px-solid/pin-inactive.svg"; import PlaybackPause from "@graphite-frontend/assets/icon-16px-solid/playback-pause.svg"; import PlaybackPlay from "@graphite-frontend/assets/icon-16px-solid/playback-play.svg"; import PlaybackToEnd from "@graphite-frontend/assets/icon-16px-solid/playback-to-end.svg"; import PlaybackToStart from "@graphite-frontend/assets/icon-16px-solid/playback-to-start.svg"; import Random from "@graphite-frontend/assets/icon-16px-solid/random.svg"; import Reload from "@graphite-frontend/assets/icon-16px-solid/reload.svg"; import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg"; import Resync from "@graphite-frontend/assets/icon-16px-solid/resync.svg"; import ReverseRadialGradientToLeft from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-left.svg"; import ReverseRadialGradientToRight from "@graphite-frontend/assets/icon-16px-solid/reverse-radial-gradient-to-right.svg"; import Reverse from "@graphite-frontend/assets/icon-16px-solid/reverse.svg"; import Save from "@graphite-frontend/assets/icon-16px-solid/save.svg"; import SelectAll from "@graphite-frontend/assets/icon-16px-solid/select-all.svg"; import SelectParent from "@graphite-frontend/assets/icon-16px-solid/select-parent.svg"; import Settings from "@graphite-frontend/assets/icon-16px-solid/settings.svg"; import SmallDot from "@graphite-frontend/assets/icon-16px-solid/small-dot.svg"; import StackBottom from "@graphite-frontend/assets/icon-16px-solid/stack-bottom.svg"; import StackHollow from "@graphite-frontend/assets/icon-16px-solid/stack-hollow.svg"; import StackLower from "@graphite-frontend/assets/icon-16px-solid/stack-lower.svg"; import StackRaise from "@graphite-frontend/assets/icon-16px-solid/stack-raise.svg"; import StackReverse from "@graphite-frontend/assets/icon-16px-solid/stack-reverse.svg"; import Stack from "@graphite-frontend/assets/icon-16px-solid/stack.svg"; import TiltReset from "@graphite-frontend/assets/icon-16px-solid/tilt-reset.svg"; import Tilt from "@graphite-frontend/assets/icon-16px-solid/tilt.svg"; import TransformationGrab from "@graphite-frontend/assets/icon-16px-solid/transformation-grab.svg"; import TransformationRotate from "@graphite-frontend/assets/icon-16px-solid/transformation-rotate.svg"; import TransformationScale from "@graphite-frontend/assets/icon-16px-solid/transformation-scale.svg"; import Trash from "@graphite-frontend/assets/icon-16px-solid/trash.svg"; import TurnNegative90 from "@graphite-frontend/assets/icon-16px-solid/turn-negative-90.svg"; import TurnPositive90 from "@graphite-frontend/assets/icon-16px-solid/turn-positive-90.svg"; import UserManual from "@graphite-frontend/assets/icon-16px-solid/user-manual.svg"; import ViewModeNormal from "@graphite-frontend/assets/icon-16px-solid/view-mode-normal.svg"; import ViewModeOutline from "@graphite-frontend/assets/icon-16px-solid/view-mode-outline.svg"; import ViewModePixels from "@graphite-frontend/assets/icon-16px-solid/view-mode-pixels.svg"; import ViewportDesignMode from "@graphite-frontend/assets/icon-16px-solid/viewport-design-mode.svg"; import ViewportGuideMode from "@graphite-frontend/assets/icon-16px-solid/viewport-guide-mode.svg"; import ViewportSelectMode from "@graphite-frontend/assets/icon-16px-solid/viewport-select-mode.svg"; import Volunteer from "@graphite-frontend/assets/icon-16px-solid/volunteer.svg"; import Website from "@graphite-frontend/assets/icon-16px-solid/website.svg"; import WorkingColorsPrimary from "@graphite-frontend/assets/icon-16px-solid/working-colors-primary.svg"; import WorkingColorsSecondary from "@graphite-frontend/assets/icon-16px-solid/working-colors-secondary.svg"; import Zoom1x from "@graphite-frontend/assets/icon-16px-solid/zoom-1x.svg"; import Zoom2x from "@graphite-frontend/assets/icon-16px-solid/zoom-2x.svg"; import ZoomIn from "@graphite-frontend/assets/icon-16px-solid/zoom-in.svg"; import ZoomOut from "@graphite-frontend/assets/icon-16px-solid/zoom-out.svg"; import ZoomReset from "@graphite-frontend/assets/icon-16px-solid/zoom-reset.svg"; const SOLID_16PX = { AlignBottom: { svg: AlignBottom, size: 16 }, AlignHorizontalCenter: { svg: AlignHorizontalCenter, size: 16 }, AlignLeft: { svg: AlignLeft, size: 16 }, AlignRight: { svg: AlignRight, size: 16 }, AlignTop: { svg: AlignTop, size: 16 }, AlignVerticalCenter: { svg: AlignVerticalCenter, size: 16 }, Artboard: { svg: Artboard, size: 16 }, BooleanDifference: { svg: BooleanDifference, size: 16 }, BooleanDivide: { svg: BooleanDivide, size: 16 }, BooleanIntersect: { svg: BooleanIntersect, size: 16 }, BooleanSubtractBack: { svg: BooleanSubtractBack, size: 16 }, BooleanSubtractFront: { svg: BooleanSubtractFront, size: 16 }, BooleanUnion: { svg: BooleanUnion, size: 16 }, Bug: { svg: Bug, size: 16 }, CheckboxChecked: { svg: CheckboxChecked, size: 16 }, CheckboxUnchecked: { svg: CheckboxUnchecked, size: 16 }, Close: { svg: Close, size: 16 }, CloseAll: { svg: CloseAll, size: 16 }, Code: { svg: Code, size: 16 }, Copy: { svg: Copy, size: 16 }, Credits: { svg: Credits, size: 16 }, CustomColor: { svg: CustomColor, size: 16 }, Cut: { svg: Cut, size: 16 }, DeselectAll: { svg: DeselectAll, size: 16 }, Edit: { svg: Edit, size: 16 }, Empty: { svg: Empty, size: 16 }, Eyedropper: { svg: Eyedropper, size: 16 }, EyeHidden: { svg: EyeHidden, size: 16 }, EyeHide: { svg: EyeHide, size: 16 }, EyeShow: { svg: EyeShow, size: 16 }, EyeVisible: { svg: EyeVisible, size: 16 }, File: { svg: File, size: 16 }, FileExport: { svg: FileExport, size: 16 }, FileImport: { svg: FileImport, size: 16 }, FlipHorizontal: { svg: FlipHorizontal, size: 16 }, FlipVertical: { svg: FlipVertical, size: 16 }, Folder: { svg: Folder, size: 16 }, FolderOpen: { svg: FolderOpen, size: 16 }, FrameAll: { svg: FrameAll, size: 16 }, FrameSelected: { svg: FrameSelected, size: 16 }, GraphiteLogo: { svg: GraphiteLogo, size: 16 }, GraphViewClosed: { svg: GraphViewClosed, size: 16 }, GraphViewOpen: { svg: GraphViewOpen, size: 16 }, HandleVisibilityAll: { svg: HandleVisibilityAll, size: 16 }, HandleVisibilityFrontier: { svg: HandleVisibilityFrontier, size: 16 }, HandleVisibilitySelected: { svg: HandleVisibilitySelected, size: 16 }, Heart: { svg: Heart, size: 16 }, HistoryRedo: { svg: HistoryRedo, size: 16 }, HistoryUndo: { svg: HistoryUndo, size: 16 }, IconsGrid: { svg: IconsGrid, size: 16 }, Image: { svg: Image, size: 16 }, Layer: { svg: Layer, size: 16 }, License: { svg: License, size: 16 }, NewLayer: { svg: NewLayer, size: 16 }, Node: { svg: Node, size: 16 }, NodeBlur: { svg: NodeBlur, size: 16 }, NodeBrushwork: { svg: NodeBrushwork, size: 16 }, NodeColorCorrection: { svg: NodeColorCorrection, size: 16 }, NodeGradient: { svg: NodeGradient, size: 16 }, NodeImaginate: { svg: NodeImaginate, size: 16 }, NodeMagicWand: { svg: NodeMagicWand, size: 16 }, NodeMask: { svg: NodeMask, size: 16 }, NodeMotionBlur: { svg: NodeMotionBlur, size: 16 }, NodeNodes: { svg: NodeNodes, size: 16 }, NodeOutput: { svg: NodeOutput, size: 16 }, NodeShape: { svg: NodeShape, size: 16 }, NodeText: { svg: NodeText, size: 16 }, NodeTransform: { svg: NodeTransform, size: 16 }, PadlockLocked: { svg: PadlockLocked, size: 16 }, PadlockUnlocked: { svg: PadlockUnlocked, size: 16 }, Paste: { svg: Paste, size: 16 }, PinActive: { svg: PinActive, size: 16 }, PinInactive: { svg: PinInactive, size: 16 }, PlaybackPause: { svg: PlaybackPause, size: 16 }, PlaybackPlay: { svg: PlaybackPlay, size: 16 }, PlaybackToEnd: { svg: PlaybackToEnd, size: 16 }, PlaybackToStart: { svg: PlaybackToStart, size: 16 }, Random: { svg: Random, size: 16 }, Reload: { svg: Reload, size: 16 }, Reset: { svg: Reset, size: 16 }, Resync: { svg: Resync, size: 16 }, Reverse: { svg: Reverse, size: 16 }, ReverseRadialGradientToLeft: { svg: ReverseRadialGradientToLeft, size: 16 }, ReverseRadialGradientToRight: { svg: ReverseRadialGradientToRight, size: 16 }, Save: { svg: Save, size: 16 }, SelectAll: { svg: SelectAll, size: 16 }, SelectParent: { svg: SelectParent, size: 16 }, Settings: { svg: Settings, size: 16 }, SmallDot: { svg: SmallDot, size: 16 }, Stack: { svg: Stack, size: 16 }, StackBottom: { svg: StackBottom, size: 16 }, StackHollow: { svg: StackHollow, size: 16 }, StackLower: { svg: StackLower, size: 16 }, StackRaise: { svg: StackRaise, size: 16 }, StackReverse: { svg: StackReverse, size: 16 }, Tilt: { svg: Tilt, size: 16 }, TiltReset: { svg: TiltReset, size: 16 }, TransformationGrab: { svg: TransformationGrab, size: 16 }, TransformationRotate: { svg: TransformationRotate, size: 16 }, TransformationScale: { svg: TransformationScale, size: 16 }, Trash: { svg: Trash, size: 16 }, TurnNegative90: { svg: TurnNegative90, size: 16 }, TurnPositive90: { svg: TurnPositive90, size: 16 }, UserManual: { svg: UserManual, size: 16 }, ViewModeNormal: { svg: ViewModeNormal, size: 16 }, ViewModeOutline: { svg: ViewModeOutline, size: 16 }, ViewModePixels: { svg: ViewModePixels, size: 16 }, ViewportDesignMode: { svg: ViewportDesignMode, size: 16 }, ViewportGuideMode: { svg: ViewportGuideMode, size: 16 }, ViewportSelectMode: { svg: ViewportSelectMode, size: 16 }, Volunteer: { svg: Volunteer, size: 16 }, Website: { svg: Website, size: 16 }, WorkingColorsPrimary: { svg: WorkingColorsPrimary, size: 16 }, WorkingColorsSecondary: { svg: WorkingColorsSecondary, size: 16 }, Zoom1x: { svg: Zoom1x, size: 16 }, Zoom2x: { svg: Zoom2x, size: 16 }, ZoomIn: { svg: ZoomIn, size: 16 }, ZoomOut: { svg: ZoomOut, size: 16 }, ZoomReset: { svg: ZoomReset, size: 16 }, } as const; // 16px Two-Tone import MouseHintDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-drag.svg"; import MouseHintLmbDouble from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-double.svg"; import MouseHintLmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg"; import MouseHintLmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-lmb.svg"; import MouseHintMmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg"; import MouseHintMmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-mmb.svg"; import MouseHintNone from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-none.svg"; import MouseHintRmbDouble from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb-double.svg"; import MouseHintRmbDrag from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg"; import MouseHintRmb from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-rmb.svg"; import MouseHintScrollDown from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-down.svg"; import MouseHintScrollUp from "@graphite-frontend/assets/icon-16px-two-tone/mouse-hint-scroll-up.svg"; const TWO_TONE_16PX = { MouseHintDrag: { svg: MouseHintDrag, size: 16 }, MouseHintLmb: { svg: MouseHintLmb, size: 16 }, MouseHintLmbDouble: { svg: MouseHintLmbDouble, size: 16 }, MouseHintLmbDrag: { svg: MouseHintLmbDrag, size: 16 }, MouseHintMmb: { svg: MouseHintMmb, size: 16 }, MouseHintMmbDrag: { svg: MouseHintMmbDrag, size: 16 }, MouseHintNone: { svg: MouseHintNone, size: 16 }, MouseHintRmb: { svg: MouseHintRmb, size: 16 }, MouseHintRmbDouble: { svg: MouseHintRmbDouble, size: 16 }, MouseHintRmbDrag: { svg: MouseHintRmbDrag, size: 16 }, MouseHintScrollDown: { svg: MouseHintScrollDown, size: 16 }, MouseHintScrollUp: { svg: MouseHintScrollUp, size: 16 }, } as const; // 24px Two-Tone import GeneralArtboardTool from "@graphite-frontend/assets/icon-24px-two-tone/general-artboard-tool.svg"; import GeneralEyedropperTool from "@graphite-frontend/assets/icon-24px-two-tone/general-eyedropper-tool.svg"; import GeneralFillTool from "@graphite-frontend/assets/icon-24px-two-tone/general-fill-tool.svg"; import GeneralGradientTool from "@graphite-frontend/assets/icon-24px-two-tone/general-gradient-tool.svg"; import GeneralNavigateTool from "@graphite-frontend/assets/icon-24px-two-tone/general-navigate-tool.svg"; import GeneralSelectTool from "@graphite-frontend/assets/icon-24px-two-tone/general-select-tool.svg"; import RasterBrushTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-brush-tool.svg"; import RasterCloneTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-clone-tool.svg"; import RasterDetailTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-detail-tool.svg"; import RasterHealTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-heal-tool.svg"; import RasterImaginateTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-imaginate-tool.svg"; import RasterPatchTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-patch-tool.svg"; import RasterRelightTool from "@graphite-frontend/assets/icon-24px-two-tone/raster-relight-tool.svg"; import VectorEllipseTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-ellipse-tool.svg"; import VectorFreehandTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-freehand-tool.svg"; import VectorLineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-line-tool.svg"; import VectorPathTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-path-tool.svg"; import VectorPenTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-pen-tool.svg"; import VectorPolygonTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-polygon-tool.svg"; import VectorRectangleTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg"; import VectorSplineTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-spline-tool.svg"; import VectorTextTool from "@graphite-frontend/assets/icon-24px-two-tone/vector-text-tool.svg"; const TWO_TONE_24PX = { GeneralArtboardTool: { svg: GeneralArtboardTool, size: 24 }, GeneralEyedropperTool: { svg: GeneralEyedropperTool, size: 24 }, GeneralFillTool: { svg: GeneralFillTool, size: 24 }, GeneralGradientTool: { svg: GeneralGradientTool, size: 24 }, GeneralNavigateTool: { svg: GeneralNavigateTool, size: 24 }, GeneralSelectTool: { svg: GeneralSelectTool, size: 24 }, RasterBrushTool: { svg: RasterBrushTool, size: 24 }, RasterCloneTool: { svg: RasterCloneTool, size: 24 }, RasterDetailTool: { svg: RasterDetailTool, size: 24 }, RasterHealTool: { svg: RasterHealTool, size: 24 }, RasterImaginateTool: { svg: RasterImaginateTool, size: 24 }, RasterPatchTool: { svg: RasterPatchTool, size: 24 }, RasterRelightTool: { svg: RasterRelightTool, size: 24 }, VectorEllipseTool: { svg: VectorEllipseTool, size: 24 }, VectorFreehandTool: { svg: VectorFreehandTool, size: 24 }, VectorLineTool: { svg: VectorLineTool, size: 24 }, VectorPathTool: { svg: VectorPathTool, size: 24 }, VectorPenTool: { svg: VectorPenTool, size: 24 }, VectorRectangleTool: { svg: VectorRectangleTool, size: 24 }, VectorPolygonTool: { svg: VectorPolygonTool, size: 24 }, VectorSplineTool: { svg: VectorSplineTool, size: 24 }, VectorTextTool: { svg: VectorTextTool, size: 24 }, } as const; // All icons const ICON_LIST = { ...GRAPHICS, ...SOLID_12PX, ...SOLID_16PX, ...TWO_TONE_16PX, ...TWO_TONE_24PX, } as const; // Exported icons and types export const ICONS: IconDefinitionType = ICON_LIST; export const ICON_SVG_STRINGS = Object.fromEntries(Object.entries(ICONS).map(([name, data]) => [name, data.svg])); export type IconName = keyof typeof ICONS; export type IconSize = undefined | 12 | 16 | 24 | 32; export type PopoverButtonStyle = "DropdownArrow" | "VerticalEllipsis"; // The following helper type declarations allow us to avoid manually maintaining the `IconName` type declaration as a string union paralleling the keys of the // icon definitions. It lets TypeScript do that for us. Our goal is to define the big key-value pair of icons by constraining its values, but inferring its keys. // Constraining its values means that TypeScript can make sure each icon definition has a valid size number from the union of numbers that is `IconSize`. // Inferring its keys means we don't have to specify a supertype like `string` or `any` for the key-value pair's keys, which would prevent us from accessing // the individual keys with `keyof typeof`. Absent a specified type for the keys, TypeScript falls back to inferring that the key-value pair's type is the // map of all its individual entries. Having the full list of entries lets us automatically set the `IconName` type to the union of strings that is the full // list of keys. The result is that we don't have to maintain a separate list of icon names since this scheme infers it from the keys of the icon definitions. // Based on https://stackoverflow.com/a/64119715/775283 type IconDefinition = { svg: string; size: IconSize }; type EvaluateType = T extends infer O ? { [K in keyof O]: O[K] } : never; type IconDefinitionType> = EvaluateType<{ [key in keyof T]: IconDefinition }>;