488 lines
30 KiB
TypeScript
488 lines
30 KiB
TypeScript
// Graphics
|
|
import GraphiteLogotypeSolid from "/../branding/assets/graphics/graphite-logotype-solid.svg";
|
|
|
|
const GRAPHICS = {
|
|
GraphiteLogotypeSolid: { svg: GraphiteLogotypeSolid, size: undefined },
|
|
} as const;
|
|
|
|
// 12px Solid
|
|
import Add from "/../branding/assets/icon-12px-solid/add.svg";
|
|
import Checkmark from "/../branding/assets/icon-12px-solid/checkmark.svg";
|
|
import Clipped from "/../branding/assets/icon-12px-solid/clipped.svg";
|
|
import CloseX from "/../branding/assets/icon-12px-solid/close-x.svg";
|
|
import Delay from "/../branding/assets/icon-12px-solid/delay.svg";
|
|
import DotThick from "/../branding/assets/icon-12px-solid/dot-thick.svg";
|
|
import Dot from "/../branding/assets/icon-12px-solid/dot.svg";
|
|
import DropdownArrow from "/../branding/assets/icon-12px-solid/dropdown-arrow.svg";
|
|
import Edit12px from "/../branding/assets/icon-12px-solid/edit-12px.svg";
|
|
import Empty12px from "/../branding/assets/icon-12px-solid/empty-12px.svg";
|
|
import Failure from "/../branding/assets/icon-12px-solid/failure.svg";
|
|
import FullscreenEnter from "/../branding/assets/icon-12px-solid/fullscreen-enter.svg";
|
|
import FullscreenExit from "/../branding/assets/icon-12px-solid/fullscreen-exit.svg";
|
|
import GridDotted from "/../branding/assets/icon-12px-solid/grid-dotted.svg";
|
|
import Grid from "/../branding/assets/icon-12px-solid/grid.svg";
|
|
import Info from "/../branding/assets/icon-12px-solid/info.svg";
|
|
import KeyboardArrowDown from "/../branding/assets/icon-12px-solid/keyboard-arrow-down.svg";
|
|
import KeyboardArrowLeft from "/../branding/assets/icon-12px-solid/keyboard-arrow-left.svg";
|
|
import KeyboardArrowRight from "/../branding/assets/icon-12px-solid/keyboard-arrow-right.svg";
|
|
import KeyboardArrowUp from "/../branding/assets/icon-12px-solid/keyboard-arrow-up.svg";
|
|
import KeyboardBackspace from "/../branding/assets/icon-12px-solid/keyboard-backspace.svg";
|
|
import KeyboardCommand from "/../branding/assets/icon-12px-solid/keyboard-command.svg";
|
|
import KeyboardControl from "/../branding/assets/icon-12px-solid/keyboard-control.svg";
|
|
import KeyboardEnter from "/../branding/assets/icon-12px-solid/keyboard-enter.svg";
|
|
import KeyboardOption from "/../branding/assets/icon-12px-solid/keyboard-option.svg";
|
|
import KeyboardShift from "/../branding/assets/icon-12px-solid/keyboard-shift.svg";
|
|
import KeyboardSpace from "/../branding/assets/icon-12px-solid/keyboard-space.svg";
|
|
import KeyboardTab from "/../branding/assets/icon-12px-solid/keyboard-tab.svg";
|
|
import License12px from "/../branding/assets/icon-12px-solid/license-12px.svg";
|
|
import Link from "/../branding/assets/icon-12px-solid/link.svg";
|
|
import Overlays from "/../branding/assets/icon-12px-solid/overlays.svg";
|
|
import Remove from "/../branding/assets/icon-12px-solid/remove.svg";
|
|
import RenderModeNormal from "/../branding/assets/icon-12px-solid/render-mode-normal.svg";
|
|
import RenderModeOutline from "/../branding/assets/icon-12px-solid/render-mode-outline.svg";
|
|
import RenderModePixels from "/../branding/assets/icon-12px-solid/render-mode-pixels.svg";
|
|
import RenderModeSvg from "/../branding/assets/icon-12px-solid/render-mode-svg.svg";
|
|
import Snapping from "/../branding/assets/icon-12px-solid/snapping.svg";
|
|
import SwapHorizontal from "/../branding/assets/icon-12px-solid/swap-horizontal.svg";
|
|
import SwapVertical from "/../branding/assets/icon-12px-solid/swap-vertical.svg";
|
|
import VerticalEllipsis from "/../branding/assets/icon-12px-solid/vertical-ellipsis.svg";
|
|
import Warning from "/../branding/assets/icon-12px-solid/warning.svg";
|
|
import WindowButtonWinClose from "/../branding/assets/icon-12px-solid/window-button-win-close.svg";
|
|
import WindowButtonWinMaximize from "/../branding/assets/icon-12px-solid/window-button-win-maximize.svg";
|
|
import WindowButtonWinMinimize from "/../branding/assets/icon-12px-solid/window-button-win-minimize.svg";
|
|
import WindowButtonWinRestoreDown from "/../branding/assets/icon-12px-solid/window-button-win-restore-down.svg";
|
|
import WorkingColors from "/../branding/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 },
|
|
DotThick: { svg: DotThick, 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 },
|
|
RenderModeNormal: { svg: RenderModeNormal, size: 12 },
|
|
RenderModeOutline: { svg: RenderModeOutline, size: 12 },
|
|
RenderModePixels: { svg: RenderModePixels, size: 12 },
|
|
RenderModeSvg: { svg: RenderModeSvg, 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 "/../branding/assets/icon-16px-solid/align-bottom.svg";
|
|
import AlignHorizontalCenter from "/../branding/assets/icon-16px-solid/align-horizontal-center.svg";
|
|
import AlignLeft from "/../branding/assets/icon-16px-solid/align-left.svg";
|
|
import AlignRight from "/../branding/assets/icon-16px-solid/align-right.svg";
|
|
import AlignTop from "/../branding/assets/icon-16px-solid/align-top.svg";
|
|
import AlignVerticalCenter from "/../branding/assets/icon-16px-solid/align-vertical-center.svg";
|
|
import Artboard from "/../branding/assets/icon-16px-solid/artboard.svg";
|
|
import BooleanDifference from "/../branding/assets/icon-16px-solid/boolean-difference.svg";
|
|
import BooleanDivide from "/../branding/assets/icon-16px-solid/boolean-divide.svg";
|
|
import BooleanIntersect from "/../branding/assets/icon-16px-solid/boolean-intersect.svg";
|
|
import BooleanSubtractBack from "/../branding/assets/icon-16px-solid/boolean-subtract-back.svg";
|
|
import BooleanSubtractFront from "/../branding/assets/icon-16px-solid/boolean-subtract-front.svg";
|
|
import BooleanUnion from "/../branding/assets/icon-16px-solid/boolean-union.svg";
|
|
import Bug from "/../branding/assets/icon-16px-solid/bug.svg";
|
|
import CheckboxChecked from "/../branding/assets/icon-16px-solid/checkbox-checked.svg";
|
|
import CheckboxUnchecked from "/../branding/assets/icon-16px-solid/checkbox-unchecked.svg";
|
|
import CloseAll from "/../branding/assets/icon-16px-solid/close-all.svg";
|
|
import Close from "/../branding/assets/icon-16px-solid/close.svg";
|
|
import Code from "/../branding/assets/icon-16px-solid/code.svg";
|
|
import Copy from "/../branding/assets/icon-16px-solid/copy.svg";
|
|
import Credits from "/../branding/assets/icon-16px-solid/credits.svg";
|
|
import CustomColor from "/../branding/assets/icon-16px-solid/custom-color.svg";
|
|
import Cut from "/../branding/assets/icon-16px-solid/cut.svg";
|
|
import DeselectAll from "/../branding/assets/icon-16px-solid/deselect-all.svg";
|
|
import Edit from "/../branding/assets/icon-16px-solid/edit.svg";
|
|
import Empty from "/../branding/assets/icon-16px-solid/empty.svg";
|
|
import EyeHidden from "/../branding/assets/icon-16px-solid/eye-hidden.svg";
|
|
import EyeHide from "/../branding/assets/icon-16px-solid/eye-hide.svg";
|
|
import EyeShow from "/../branding/assets/icon-16px-solid/eye-show.svg";
|
|
import EyeVisible from "/../branding/assets/icon-16px-solid/eye-visible.svg";
|
|
import Eyedropper from "/../branding/assets/icon-16px-solid/eyedropper.svg";
|
|
import FileExport from "/../branding/assets/icon-16px-solid/file-export.svg";
|
|
import FileImport from "/../branding/assets/icon-16px-solid/file-import.svg";
|
|
import File from "/../branding/assets/icon-16px-solid/file.svg";
|
|
import FlipHorizontal from "/../branding/assets/icon-16px-solid/flip-horizontal.svg";
|
|
import FlipVertical from "/../branding/assets/icon-16px-solid/flip-vertical.svg";
|
|
import FolderOpen from "/../branding/assets/icon-16px-solid/folder-open.svg";
|
|
import Folder from "/../branding/assets/icon-16px-solid/folder.svg";
|
|
import FrameAll from "/../branding/assets/icon-16px-solid/frame-all.svg";
|
|
import FrameSelected from "/../branding/assets/icon-16px-solid/frame-selected.svg";
|
|
import GraphViewClosed from "/../branding/assets/icon-16px-solid/graph-view-closed.svg";
|
|
import GraphViewOpen from "/../branding/assets/icon-16px-solid/graph-view-open.svg";
|
|
import GraphiteLogo from "/../branding/assets/icon-16px-solid/graphite-logo.svg";
|
|
import HandleVisibilityAll from "/../branding/assets/icon-16px-solid/handle-visibility-all.svg";
|
|
import HandleVisibilityFrontier from "/../branding/assets/icon-16px-solid/handle-visibility-frontier.svg";
|
|
import HandleVisibilitySelected from "/../branding/assets/icon-16px-solid/handle-visibility-selected.svg";
|
|
import Heart from "/../branding/assets/icon-16px-solid/heart.svg";
|
|
import HistoryRedo from "/../branding/assets/icon-16px-solid/history-redo.svg";
|
|
import HistoryUndo from "/../branding/assets/icon-16px-solid/history-undo.svg";
|
|
import IconsGrid from "/../branding/assets/icon-16px-solid/icons-grid.svg";
|
|
import Image from "/../branding/assets/icon-16px-solid/image.svg";
|
|
import InterpolationBlend from "/../branding/assets/icon-16px-solid/interpolation-blend.svg";
|
|
import InterpolationMorph from "/../branding/assets/icon-16px-solid/interpolation-morph.svg";
|
|
import Layer from "/../branding/assets/icon-16px-solid/layer.svg";
|
|
import License from "/../branding/assets/icon-16px-solid/license.svg";
|
|
import NewLayer from "/../branding/assets/icon-16px-solid/new-layer.svg";
|
|
import NodeBlur from "/../branding/assets/icon-16px-solid/node-blur.svg";
|
|
import NodeBrushwork from "/../branding/assets/icon-16px-solid/node-brushwork.svg";
|
|
import NodeColorCorrection from "/../branding/assets/icon-16px-solid/node-color-correction.svg";
|
|
import NodeGradient from "/../branding/assets/icon-16px-solid/node-gradient.svg";
|
|
import NodeMagicWand from "/../branding/assets/icon-16px-solid/node-magic-wand.svg";
|
|
import NodeMask from "/../branding/assets/icon-16px-solid/node-mask.svg";
|
|
import NodeMotionBlur from "/../branding/assets/icon-16px-solid/node-motion-blur.svg";
|
|
import NodeNodes from "/../branding/assets/icon-16px-solid/node-nodes.svg";
|
|
import NodeOutput from "/../branding/assets/icon-16px-solid/node-output.svg";
|
|
import NodeShape from "/../branding/assets/icon-16px-solid/node-shape.svg";
|
|
import NodeText from "/../branding/assets/icon-16px-solid/node-text.svg";
|
|
import NodeTransform from "/../branding/assets/icon-16px-solid/node-transform.svg";
|
|
import Node from "/../branding/assets/icon-16px-solid/node.svg";
|
|
import PadlockLocked from "/../branding/assets/icon-16px-solid/padlock-locked.svg";
|
|
import PadlockUnlocked from "/../branding/assets/icon-16px-solid/padlock-unlocked.svg";
|
|
import Paste from "/../branding/assets/icon-16px-solid/paste.svg";
|
|
import PinActive from "/../branding/assets/icon-16px-solid/pin-active.svg";
|
|
import PinInactive from "/../branding/assets/icon-16px-solid/pin-inactive.svg";
|
|
import PlaybackPause from "/../branding/assets/icon-16px-solid/playback-pause.svg";
|
|
import PlaybackPlay from "/../branding/assets/icon-16px-solid/playback-play.svg";
|
|
import PlaybackToEnd from "/../branding/assets/icon-16px-solid/playback-to-end.svg";
|
|
import PlaybackToStart from "/../branding/assets/icon-16px-solid/playback-to-start.svg";
|
|
import Random from "/../branding/assets/icon-16px-solid/random.svg";
|
|
import Reload from "/../branding/assets/icon-16px-solid/reload.svg";
|
|
import Reset from "/../branding/assets/icon-16px-solid/reset.svg";
|
|
import Resync from "/../branding/assets/icon-16px-solid/resync.svg";
|
|
import ReverseRadialGradientToLeft from "/../branding/assets/icon-16px-solid/reverse-radial-gradient-to-left.svg";
|
|
import ReverseRadialGradientToRight from "/../branding/assets/icon-16px-solid/reverse-radial-gradient-to-right.svg";
|
|
import Reverse from "/../branding/assets/icon-16px-solid/reverse.svg";
|
|
import Save from "/../branding/assets/icon-16px-solid/save.svg";
|
|
import SelectAll from "/../branding/assets/icon-16px-solid/select-all.svg";
|
|
import SelectParent from "/../branding/assets/icon-16px-solid/select-parent.svg";
|
|
import Settings from "/../branding/assets/icon-16px-solid/settings.svg";
|
|
import SmallDot from "/../branding/assets/icon-16px-solid/small-dot.svg";
|
|
import StackBottom from "/../branding/assets/icon-16px-solid/stack-bottom.svg";
|
|
import StackHollow from "/../branding/assets/icon-16px-solid/stack-hollow.svg";
|
|
import StackLower from "/../branding/assets/icon-16px-solid/stack-lower.svg";
|
|
import StackRaise from "/../branding/assets/icon-16px-solid/stack-raise.svg";
|
|
import StackReverse from "/../branding/assets/icon-16px-solid/stack-reverse.svg";
|
|
import Stack from "/../branding/assets/icon-16px-solid/stack.svg";
|
|
import StrokeAlignCenter from "/../branding/assets/icon-16px-solid/stroke-align-center.svg";
|
|
import StrokeAlignInside from "/../branding/assets/icon-16px-solid/stroke-align-inside.svg";
|
|
import StrokeAlignOutside from "/../branding/assets/icon-16px-solid/stroke-align-outside.svg";
|
|
import StrokeCapButt from "/../branding/assets/icon-16px-solid/stroke-cap-butt.svg";
|
|
import StrokeCapRound from "/../branding/assets/icon-16px-solid/stroke-cap-round.svg";
|
|
import StrokeCapSquare from "/../branding/assets/icon-16px-solid/stroke-cap-square.svg";
|
|
import StrokeJoinBevel from "/../branding/assets/icon-16px-solid/stroke-join-bevel.svg";
|
|
import StrokeJoinMiter from "/../branding/assets/icon-16px-solid/stroke-join-miter.svg";
|
|
import StrokeJoinRound from "/../branding/assets/icon-16px-solid/stroke-join-round.svg";
|
|
import StrokeOrderAbove from "/../branding/assets/icon-16px-solid/stroke-order-above.svg";
|
|
import StrokeOrderBelow from "/../branding/assets/icon-16px-solid/stroke-order-below.svg";
|
|
import TextAlignCenter from "/../branding/assets/icon-16px-solid/text-align-center.svg";
|
|
import TextAlignLeft from "/../branding/assets/icon-16px-solid/text-align-left.svg";
|
|
import TextAlignRight from "/../branding/assets/icon-16px-solid/text-align-right.svg";
|
|
import TextAlignSpineAway from "/../branding/assets/icon-16px-solid/text-align-spine-away.svg";
|
|
import TextAlignSpineTowards from "/../branding/assets/icon-16px-solid/text-align-spine-towards.svg";
|
|
import TextJustifyAll from "/../branding/assets/icon-16px-solid/text-justify-all.svg";
|
|
import TextJustifyCenter from "/../branding/assets/icon-16px-solid/text-justify-center.svg";
|
|
import TextJustifyLeft from "/../branding/assets/icon-16px-solid/text-justify-left.svg";
|
|
import TextJustifyRight from "/../branding/assets/icon-16px-solid/text-justify-right.svg";
|
|
import TiltReset from "/../branding/assets/icon-16px-solid/tilt-reset.svg";
|
|
import Tilt from "/../branding/assets/icon-16px-solid/tilt.svg";
|
|
import TransformationGrab from "/../branding/assets/icon-16px-solid/transformation-grab.svg";
|
|
import TransformationRotate from "/../branding/assets/icon-16px-solid/transformation-rotate.svg";
|
|
import TransformationScale from "/../branding/assets/icon-16px-solid/transformation-scale.svg";
|
|
import Trash from "/../branding/assets/icon-16px-solid/trash.svg";
|
|
import TurnNegative90 from "/../branding/assets/icon-16px-solid/turn-negative-90.svg";
|
|
import TurnPositive90 from "/../branding/assets/icon-16px-solid/turn-positive-90.svg";
|
|
import UserManual from "/../branding/assets/icon-16px-solid/user-manual.svg";
|
|
import ViewportDesignMode from "/../branding/assets/icon-16px-solid/viewport-design-mode.svg";
|
|
import ViewportGuideMode from "/../branding/assets/icon-16px-solid/viewport-guide-mode.svg";
|
|
import ViewportSelectMode from "/../branding/assets/icon-16px-solid/viewport-select-mode.svg";
|
|
import Volunteer from "/../branding/assets/icon-16px-solid/volunteer.svg";
|
|
import Website from "/../branding/assets/icon-16px-solid/website.svg";
|
|
import WorkingColorsPrimary from "/../branding/assets/icon-16px-solid/working-colors-primary.svg";
|
|
import WorkingColorsSecondary from "/../branding/assets/icon-16px-solid/working-colors-secondary.svg";
|
|
import Zoom1x from "/../branding/assets/icon-16px-solid/zoom-1x.svg";
|
|
import Zoom2x from "/../branding/assets/icon-16px-solid/zoom-2x.svg";
|
|
import ZoomIn from "/../branding/assets/icon-16px-solid/zoom-in.svg";
|
|
import ZoomOut from "/../branding/assets/icon-16px-solid/zoom-out.svg";
|
|
import ZoomReset from "/../branding/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 },
|
|
InterpolationBlend: { svg: InterpolationBlend, size: 16 },
|
|
InterpolationMorph: { svg: InterpolationMorph, 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 },
|
|
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 },
|
|
StrokeAlignCenter: { svg: StrokeAlignCenter, size: 16 },
|
|
StrokeAlignInside: { svg: StrokeAlignInside, size: 16 },
|
|
StrokeAlignOutside: { svg: StrokeAlignOutside, size: 16 },
|
|
StrokeCapButt: { svg: StrokeCapButt, size: 16 },
|
|
StrokeCapRound: { svg: StrokeCapRound, size: 16 },
|
|
StrokeCapSquare: { svg: StrokeCapSquare, size: 16 },
|
|
StrokeJoinBevel: { svg: StrokeJoinBevel, size: 16 },
|
|
StrokeJoinMiter: { svg: StrokeJoinMiter, size: 16 },
|
|
StrokeJoinRound: { svg: StrokeJoinRound, size: 16 },
|
|
StrokeOrderAbove: { svg: StrokeOrderAbove, size: 16 },
|
|
StrokeOrderBelow: { svg: StrokeOrderBelow, size: 16 },
|
|
TextAlignCenter: { svg: TextAlignCenter, size: 16 },
|
|
TextAlignLeft: { svg: TextAlignLeft, size: 16 },
|
|
TextAlignRight: { svg: TextAlignRight, size: 16 },
|
|
TextAlignSpineAway: { svg: TextAlignSpineAway, size: 16 },
|
|
TextAlignSpineTowards: { svg: TextAlignSpineTowards, size: 16 },
|
|
TextJustifyAll: { svg: TextJustifyAll, size: 16 },
|
|
TextJustifyCenter: { svg: TextJustifyCenter, size: 16 },
|
|
TextJustifyLeft: { svg: TextJustifyLeft, size: 16 },
|
|
TextJustifyRight: { svg: TextJustifyRight, 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 },
|
|
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 "/../branding/assets/icon-16px-two-tone/mouse-hint-drag.svg";
|
|
import MouseHintLmbDouble from "/../branding/assets/icon-16px-two-tone/mouse-hint-lmb-double.svg";
|
|
import MouseHintLmbDrag from "/../branding/assets/icon-16px-two-tone/mouse-hint-lmb-drag.svg";
|
|
import MouseHintLmb from "/../branding/assets/icon-16px-two-tone/mouse-hint-lmb.svg";
|
|
import MouseHintMmbDrag from "/../branding/assets/icon-16px-two-tone/mouse-hint-mmb-drag.svg";
|
|
import MouseHintMmb from "/../branding/assets/icon-16px-two-tone/mouse-hint-mmb.svg";
|
|
import MouseHintNone from "/../branding/assets/icon-16px-two-tone/mouse-hint-none.svg";
|
|
import MouseHintRmbDouble from "/../branding/assets/icon-16px-two-tone/mouse-hint-rmb-double.svg";
|
|
import MouseHintRmbDrag from "/../branding/assets/icon-16px-two-tone/mouse-hint-rmb-drag.svg";
|
|
import MouseHintRmb from "/../branding/assets/icon-16px-two-tone/mouse-hint-rmb.svg";
|
|
import MouseHintScrollDown from "/../branding/assets/icon-16px-two-tone/mouse-hint-scroll-down.svg";
|
|
import MouseHintScrollUp from "/../branding/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 "/../branding/assets/icon-24px-two-tone/general-artboard-tool.svg";
|
|
import GeneralEyedropperTool from "/../branding/assets/icon-24px-two-tone/general-eyedropper-tool.svg";
|
|
import GeneralFillTool from "/../branding/assets/icon-24px-two-tone/general-fill-tool.svg";
|
|
import GeneralGradientTool from "/../branding/assets/icon-24px-two-tone/general-gradient-tool.svg";
|
|
import GeneralNavigateTool from "/../branding/assets/icon-24px-two-tone/general-navigate-tool.svg";
|
|
import GeneralSelectTool from "/../branding/assets/icon-24px-two-tone/general-select-tool.svg";
|
|
import RasterBrushTool from "/../branding/assets/icon-24px-two-tone/raster-brush-tool.svg";
|
|
import RasterCloneTool from "/../branding/assets/icon-24px-two-tone/raster-clone-tool.svg";
|
|
import RasterDetailTool from "/../branding/assets/icon-24px-two-tone/raster-detail-tool.svg";
|
|
import RasterHealTool from "/../branding/assets/icon-24px-two-tone/raster-heal-tool.svg";
|
|
import RasterPatchTool from "/../branding/assets/icon-24px-two-tone/raster-patch-tool.svg";
|
|
import RasterRelightTool from "/../branding/assets/icon-24px-two-tone/raster-relight-tool.svg";
|
|
import VectorEllipseTool from "/../branding/assets/icon-24px-two-tone/vector-ellipse-tool.svg";
|
|
import VectorFreehandTool from "/../branding/assets/icon-24px-two-tone/vector-freehand-tool.svg";
|
|
import VectorLineTool from "/../branding/assets/icon-24px-two-tone/vector-line-tool.svg";
|
|
import VectorPathTool from "/../branding/assets/icon-24px-two-tone/vector-path-tool.svg";
|
|
import VectorPenTool from "/../branding/assets/icon-24px-two-tone/vector-pen-tool.svg";
|
|
import VectorPolygonTool from "/../branding/assets/icon-24px-two-tone/vector-polygon-tool.svg";
|
|
import VectorRectangleTool from "/../branding/assets/icon-24px-two-tone/vector-rectangle-tool.svg";
|
|
import VectorSplineTool from "/../branding/assets/icon-24px-two-tone/vector-spline-tool.svg";
|
|
import VectorTextTool from "/../branding/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 },
|
|
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<typeof ICON_LIST> = 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> = T extends infer O ? { [K in keyof O]: O[K] } : never;
|
|
type IconDefinitionType<T extends Record<string, IconDefinition>> = EvaluateType<{ [key in keyof T]: IconDefinition }>;
|