From cdcddf176b22ab86ac1e99a42c2dc8a9f5a969cc Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 27 May 2021 02:14:32 -0700
Subject: [PATCH] Move all icon SVG imports to the Icon component

This change also removes the need to specify the icon size.
---
 client/web/src/components/panels/Document.vue | 160 +++++-------------
 .../web/src/components/panels/LayerTree.vue   |  13 +-
 .../web/src/components/widgets/ShelfItem.vue  |   6 +-
 .../src/components/widgets/WorkingColors.vue  |  12 +-
 .../components/widgets/buttons/IconButton.vue |  54 +++---
 .../widgets/buttons/PopoverButton.vue         |  10 +-
 .../widgets/inputs/MenuBarInput.vue           |   6 +-
 .../src/components/widgets/labels/Icon.vue    | 157 +++++++++++++++--
 .../widgets/labels/UserInputLabel.vue         |  60 +++----
 .../window/title-bar/WindowButtonsWindows.vue |  20 +--
 client/web/src/components/workspace/Panel.vue |   6 +-
 11 files changed, 254 insertions(+), 250 deletions(-)

diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index 40cc59c7..3751faca 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -6,15 +6,15 @@
 
 				<Separator :type="SeparatorType.Section" />
 
-				<IconButton :size="24" :iconSize="16" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
-				<IconButton :size="24" :iconSize="16" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
+				<IconButton :icon="'AlignHorizontalLeft'" :size="24" title="Horizontal Align Left" />
+				<IconButton :icon="'AlignHorizontalCenter'" :size="24" title="Horizontal Align Center" />
+				<IconButton :icon="'AlignHorizontalRight'" :size="24" gapAfter title="Horizontal Align Right" />
 
 				<Separator :type="SeparatorType.Unrelated" />
 
-				<IconButton :size="24" :iconSize="16" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
+				<IconButton :icon="'AlignVerticalTop'" :size="24" title="Vertical Align Top" />
+				<IconButton :icon="'AlignVerticalCenter'" :size="24" title="Vertical Align Center" />
+				<IconButton :icon="'AlignVerticalBottom'" :size="24" title="Vertical Align Bottom" />
 
 				<Separator :type="SeparatorType.Related" />
 
@@ -25,8 +25,8 @@
 
 				<Separator :type="SeparatorType.Section" />
 
-				<IconButton :size="24" :iconSize="16" title="Flip Horizontal"><FlipHorizontal /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Flip Vertical"><FlipVertical /></IconButton>
+				<IconButton :icon="'FlipHorizontal'" :size="24" title="Flip Horizontal" />
+				<IconButton :icon="'FlipVertical'" :size="24" title="Flip Vertical" />
 
 				<Separator :type="SeparatorType.Related" />
 
@@ -37,11 +37,11 @@
 
 				<Separator :type="SeparatorType.Section" />
 
-				<IconButton :size="24" :iconSize="16" title="Boolean Union"><BooleanUnion /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Boolean Intersect"><BooleanIntersect /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Boolean Difference"><BooleanDifference /></IconButton>
+				<IconButton :icon="'BooleanUnion'" :size="24" title="Boolean Union" />
+				<IconButton :icon="'BooleanSubtractFront'" :size="24" title="Boolean Subtract Front" />
+				<IconButton :icon="'BooleanSubtractBack'" :size="24" title="Boolean Subtract Back" />
+				<IconButton :icon="'BooleanIntersect'" :size="24" title="Boolean Intersect" />
+				<IconButton :icon="'BooleanDifference'" :size="24" title="Boolean Difference" />
 
 				<Separator :type="SeparatorType.Related" />
 
@@ -53,9 +53,9 @@
 			<div class="spacer"></div>
 			<div class="right side">
 				<RadioInput :initialIndex="0" @changed="viewModeChanged">
-					<IconButton :size="24" :iconSize="16" title="View Mode: Normal"><ViewModeNormal /></IconButton>
-					<IconButton :size="24" :iconSize="16" title="View Mode: Outline"><ViewModeOutline /></IconButton>
-					<IconButton :size="24" :iconSize="16" title="View Mode: Pixels"><ViewModePixels /></IconButton>
+					<IconButton :icon="'ViewModeNormal'" :size="24" title="View Mode: Normal" />
+					<IconButton :icon="'ViewModeOutline'" :size="24" title="View Mode: Outline" />
+					<IconButton :icon="'ViewModePixels'" :size="24" title="View Mode: Pixels" />
 					<PopoverButton>
 						<h3>Display Mode</h3>
 						<p>More display mode options will be here</p>
@@ -64,9 +64,9 @@
 
 				<Separator :type="SeparatorType.Section" />
 
-				<IconButton :size="24" :iconSize="16" title="Zoom In"><ZoomIn /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Zoom Out"><ZoomOut /></IconButton>
-				<IconButton :size="24" :iconSize="16" title="Zoom to 100%"><ZoomReset /></IconButton>
+				<IconButton :icon="'ZoomIn'" :size="24" title="Zoom In" />
+				<IconButton :icon="'ZoomOut'" :size="24" title="Zoom Out" />
+				<IconButton :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
 
 				<Separator :type="SeparatorType.Related" />
 
@@ -76,36 +76,36 @@
 		<LayoutRow :class="'shelf-and-viewport'">
 			<LayoutCol :class="'shelf'">
 				<div class="tools">
-					<ShelfItem title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')"><SelectTool /></ShelfItem>
-					<ShelfItem title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')"><CropTool /></ShelfItem>
-					<ShelfItem title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')"><NavigateTool /></ShelfItem>
-					<ShelfItem title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')"><EyedropperTool /></ShelfItem>
+					<ShelfItem :icon="'SelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
+					<ShelfItem :icon="'CropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
+					<ShelfItem :icon="'NavigateTool'" title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
+					<ShelfItem :icon="'EyedropperTool'" title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')"><TextTool /></ShelfItem>
-					<ShelfItem title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')"><FillTool /></ShelfItem>
-					<ShelfItem title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')"><GradientTool /></ShelfItem>
+					<ShelfItem :icon="'TextTool'" title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
+					<ShelfItem :icon="'FillTool'" title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')" />
+					<ShelfItem :icon="'GradientTool'" title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')"><BrushTool /></ShelfItem>
-					<ShelfItem title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')"><HealTool /></ShelfItem>
-					<ShelfItem title="Clone Tool" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')"><CloneTool /></ShelfItem>
-					<ShelfItem title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')"><PatchTool /></ShelfItem>
-					<ShelfItem title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')"><BlurSharpenTool /></ShelfItem>
-					<ShelfItem title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')"><RelightTool /></ShelfItem>
+					<ShelfItem :icon="'BrushTool'" title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
+					<ShelfItem :icon="'HealTool'" title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
+					<ShelfItem :icon="'CloneTool'" title="Clone Tool" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
+					<ShelfItem :icon="'PatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
+					<ShelfItem :icon="'BlurSharpenTool'" title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
+					<ShelfItem :icon="'RelightTool'" title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')"><PathTool /></ShelfItem>
-					<ShelfItem title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')"><PenTool /></ShelfItem>
-					<ShelfItem title="Freehand Tool" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')"><FreehandTool /></ShelfItem>
-					<ShelfItem title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')"><SplineTool /></ShelfItem>
-					<ShelfItem title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')"><LineTool /></ShelfItem>
-					<ShelfItem title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')"><RectangleTool /></ShelfItem>
-					<ShelfItem title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')"><EllipseTool /></ShelfItem>
-					<ShelfItem title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')"><ShapeTool /></ShelfItem>
+					<ShelfItem :icon="'PathTool'" title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
+					<ShelfItem :icon="'PenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
+					<ShelfItem :icon="'FreehandTool'" title="Freehand Tool" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
+					<ShelfItem :icon="'SplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
+					<ShelfItem :icon="'LineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
+					<ShelfItem :icon="'RectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
+					<ShelfItem :icon="'EllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
+					<ShelfItem :icon="'ShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
 				</div>
 				<div class="spacer"></div>
 				<WorkingColors />
@@ -176,46 +176,6 @@ import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton from "../widgets/buttons/PopoverButton.vue";
 import RadioInput from "../widgets/inputs/RadioInput.vue";
 import NumberInput from "../widgets/inputs/NumberInput.vue";
-import SelectTool from "../../../assets/24px-two-tone/document-tool-layout-select.svg";
-import CropTool from "../../../assets/24px-two-tone/document-tool-layout-crop.svg";
-import NavigateTool from "../../../assets/24px-two-tone/document-tool-layout-navigate.svg";
-import EyedropperTool from "../../../assets/24px-two-tone/document-tool-layout-eyedropper.svg";
-import TextTool from "../../../assets/24px-two-tone/document-tool-parametric-text.svg";
-import FillTool from "../../../assets/24px-two-tone/document-tool-parametric-fill.svg";
-import GradientTool from "../../../assets/24px-two-tone/document-tool-parametric-gradient.svg";
-import BrushTool from "../../../assets/24px-two-tone/document-tool-raster-brush.svg";
-import HealTool from "../../../assets/24px-two-tone/document-tool-raster-heal.svg";
-import CloneTool from "../../../assets/24px-two-tone/document-tool-raster-clone.svg";
-import PatchTool from "../../../assets/24px-two-tone/document-tool-raster-patch.svg";
-import BlurSharpenTool from "../../../assets/24px-two-tone/document-tool-raster-detail.svg";
-import RelightTool from "../../../assets/24px-two-tone/document-tool-raster-relight.svg";
-import PathTool from "../../../assets/24px-two-tone/document-tool-vector-path.svg";
-import PenTool from "../../../assets/24px-two-tone/document-tool-vector-pen.svg";
-import FreehandTool from "../../../assets/24px-two-tone/document-tool-vector-freehand.svg";
-import SplineTool from "../../../assets/24px-two-tone/document-tool-vector-spline.svg";
-import LineTool from "../../../assets/24px-two-tone/document-tool-vector-line.svg";
-import RectangleTool from "../../../assets/24px-two-tone/document-tool-vector-rectangle.svg";
-import EllipseTool from "../../../assets/24px-two-tone/document-tool-vector-ellipse.svg";
-import ShapeTool from "../../../assets/24px-two-tone/document-tool-vector-shape.svg";
-import AlignHorizontalLeft from "../../../assets/16px-solid/align-horizontal-left.svg";
-import AlignHorizontalCenter from "../../../assets/16px-solid/align-horizontal-center.svg";
-import AlignHorizontalRight from "../../../assets/16px-solid/align-horizontal-right.svg";
-import AlignVerticalTop from "../../../assets/16px-solid/align-vertical-top.svg";
-import AlignVerticalCenter from "../../../assets/16px-solid/align-vertical-center.svg";
-import AlignVerticalBottom from "../../../assets/16px-solid/align-vertical-bottom.svg";
-import FlipHorizontal from "../../../assets/16px-solid/flip-horizontal.svg";
-import FlipVertical from "../../../assets/16px-solid/flip-vertical.svg";
-import BooleanUnion from "../../../assets/16px-solid/boolean-union.svg";
-import BooleanSubtractFront from "../../../assets/16px-solid/boolean-subtract-front.svg";
-import BooleanSubtractBack from "../../../assets/16px-solid/boolean-subtract-back.svg";
-import BooleanIntersect from "../../../assets/16px-solid/boolean-intersect.svg";
-import BooleanDifference from "../../../assets/16px-solid/boolean-difference.svg";
-import ZoomReset from "../../../assets/16px-solid/zoom-reset.svg";
-import ZoomIn from "../../../assets/16px-solid/zoom-in.svg";
-import ZoomOut from "../../../assets/16px-solid/zoom-out.svg";
-import ViewModeNormal from "../../../assets/16px-solid/view-mode-normal.svg";
-import ViewModeOutline from "../../../assets/16px-solid/view-mode-outline.svg";
-import ViewModePixels from "../../../assets/16px-solid/view-mode-pixels.svg";
 
 const wasm = import("../../../wasm/pkg");
 
@@ -230,46 +190,6 @@ export default defineComponent({
 		PopoverButton,
 		RadioInput,
 		NumberInput,
-		SelectTool,
-		CropTool,
-		NavigateTool,
-		EyedropperTool,
-		TextTool,
-		FillTool,
-		GradientTool,
-		BrushTool,
-		HealTool,
-		CloneTool,
-		PatchTool,
-		BlurSharpenTool,
-		RelightTool,
-		PathTool,
-		PenTool,
-		FreehandTool,
-		SplineTool,
-		LineTool,
-		RectangleTool,
-		EllipseTool,
-		ShapeTool,
-		AlignHorizontalLeft,
-		AlignHorizontalCenter,
-		AlignHorizontalRight,
-		AlignVerticalTop,
-		AlignVerticalCenter,
-		AlignVerticalBottom,
-		FlipHorizontal,
-		FlipVertical,
-		BooleanUnion,
-		BooleanSubtractFront,
-		BooleanSubtractBack,
-		BooleanIntersect,
-		BooleanDifference,
-		ZoomReset,
-		ZoomIn,
-		ZoomOut,
-		ViewModeNormal,
-		ViewModeOutline,
-		ViewModePixels,
 	},
 	methods: {
 		async canvasMouseDown(e: MouseEvent) {
diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 4edd1200..fe5f4c73 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -14,15 +14,12 @@
 			<LayoutCol :class="'list'">
 				<div class="layer-row" v-for="layer in layers" :key="layer.path">
 					<div class="layer-visibility">
-						<IconButton @click="toggleLayerVisibility(layer.path)" :size="24" :iconSize="16" :title="layer.visible ? 'Visible' : 'Hidden'">
-							<EyeVisible v-if="layer.visible" />
-							<EyeHidden v-if="!layer.visible" />
-						</IconButton>
+						<IconButton :icon="layer.visible ? 'Visible' : 'Hidden'" @click="toggleLayerVisibility(layer.path)" :size="24" :title="layer.visible ? 'Visible' : 'Hidden'" />
 					</div>
 					<div class="layer">
 						<div class="layer-thumbnail"></div>
 						<div class="layer-type-icon">
-							<Icon :size="24" title="Path"><NodeTypePath /></Icon>
+							<Icon :icon="'NodeTypePath'" title="Path" />
 						</div>
 						<div class="layer-name">
 							<span>{{ layer.name }}</span>
@@ -91,9 +88,6 @@ import PopoverButton from "../widgets/buttons/PopoverButton.vue";
 import { PopoverDirection } from "../widgets/overlays/Popover.vue";
 import IconButton from "../widgets/buttons/IconButton.vue";
 import Icon from "../widgets/labels/Icon.vue";
-import EyeVisible from "../../../assets/16px-solid/visibility-eye-visible.svg";
-import EyeHidden from "../../../assets/16px-solid/visibility-eye-hidden.svg";
-import NodeTypePath from "../../../assets/24px-full-color/node-type-path.svg";
 
 const wasm = import("../../../wasm/pkg");
 
@@ -106,9 +100,6 @@ export default defineComponent({
 		NumberInput,
 		IconButton,
 		Icon,
-		EyeVisible,
-		EyeHidden,
-		NodeTypePath,
 	},
 	props: {},
 	methods: {
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue
index cf934afd..a0308d1d 100644
--- a/client/web/src/components/widgets/ShelfItem.vue
+++ b/client/web/src/components/widgets/ShelfItem.vue
@@ -1,12 +1,11 @@
 <template>
 	<div class="shelf-item" :class="{ active: active }">
-		<slot></slot>
+		<IconButton :icon="icon" :size="32" />
 	</div>
 </template>
 
 <style lang="scss">
 .shelf-item {
-	padding: 4px;
 	border-radius: 2px;
 
 	&:hover {
@@ -27,9 +26,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import IconButton from "./buttons/IconButton.vue";
 
 export default defineComponent({
+	components: { IconButton },
 	props: {
+		icon: { type: String, required: true },
 		active: { type: Boolean, default: false },
 	},
 });
diff --git a/client/web/src/components/widgets/WorkingColors.vue b/client/web/src/components/widgets/WorkingColors.vue
index 7eeae9a8..ba11fdc7 100644
--- a/client/web/src/components/widgets/WorkingColors.vue
+++ b/client/web/src/components/widgets/WorkingColors.vue
@@ -2,12 +2,8 @@
 	<div class="working-colors">
 		<SwatchPairInput />
 		<div class="swap-and-reset">
-			<IconButton :size="16" :iconSize="12">
-				<SwapButton />
-			</IconButton>
-			<IconButton :size="16" :iconSize="12">
-				<ResetColorsButton />
-			</IconButton>
+			<IconButton :icon="'SwapButton'" :size="16" />
+			<IconButton :icon="'ResetColorsButton'" :size="16" />
 		</div>
 	</div>
 </template>
@@ -24,15 +20,11 @@
 import { defineComponent } from "vue";
 import SwatchPairInput from "./inputs/SwatchPairInput.vue";
 import IconButton from "./buttons/IconButton.vue";
-import SwapButton from "../../../assets/12px-solid/swap.svg";
-import ResetColorsButton from "../../../assets/12px-solid/reset-colors.svg";
 
 export default defineComponent({
 	components: {
 		SwatchPairInput,
 		IconButton,
-		SwapButton,
-		ResetColorsButton,
 	},
 });
 </script>
diff --git a/client/web/src/components/widgets/buttons/IconButton.vue b/client/web/src/components/widgets/buttons/IconButton.vue
index caedf375..827c186b 100644
--- a/client/web/src/components/widgets/buttons/IconButton.vue
+++ b/client/web/src/components/widgets/buttons/IconButton.vue
@@ -1,12 +1,14 @@
 <template>
-	<button class="icon-button" :class="`size-${String(size)} icon-size-${String(iconSize)}`">
-		<slot></slot>
+	<button class="icon-button" :class="`size-${String(size)}`">
+		<Icon :icon="icon" />
 	</button>
 </template>
 
 <style lang="scss">
 .icon-button {
-	display: inline-block;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
 	flex: 0 0 auto;
 	padding: 0;
 	outline: none;
@@ -27,50 +29,38 @@
 		fill: var(--color-f-white);
 	}
 
-	&.icon-size-12 {
-		svg {
-			width: 12px;
-			height: 12px;
-		}
-
-		&.size-16 {
-			padding: (16px - 12px) / 2;
-		}
-
-		&.size-24 {
-			padding: (24px - 12px) / 2;
-		}
-
-		&.size-32 {
-			padding: (32px - 12px) / 2;
-		}
+	&.size-12 {
+		width: 12px;
+		height: 12px;
 	}
 
-	&.icon-size-16 {
-		svg {
-			width: 16px;
-			height: 16px;
-		}
+	&.size-16 {
+		width: 16px;
+		height: 16px;
+	}
 
-		&.size-24 {
-			padding: (24px - 16px) / 2;
-		}
+	&.size-24 {
+		width: 24px;
+		height: 24px;
+	}
 
-		&.size-32 {
-			padding: (32px - 16px) / 2;
-		}
+	&.size-32 {
+		width: 32px;
+		height: 32px;
 	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import Icon from "../labels/Icon.vue";
 
 export default defineComponent({
 	props: {
+		icon: { type: String, required: true },
 		size: { type: Number, required: true },
-		iconSize: { type: Number, required: true },
 		gapAfter: { type: Boolean, default: false },
 	},
+	components: { Icon },
 });
 </script>
diff --git a/client/web/src/components/widgets/buttons/PopoverButton.vue b/client/web/src/components/widgets/buttons/PopoverButton.vue
index 91ac2d5b..ef6c795c 100644
--- a/client/web/src/components/widgets/buttons/PopoverButton.vue
+++ b/client/web/src/components/widgets/buttons/PopoverButton.vue
@@ -1,8 +1,6 @@
 <template>
 	<div class="popover-button">
-		<IconButton :size="16" :iconSize="12" @click="clickButton">
-			<component :is="icon" />
-		</IconButton>
+		<IconButton :icon="icon" :size="16" @click="clickButton" />
 		<Popover :direction="PopoverDirection.Bottom" ref="popover">
 			<slot></slot>
 		</Popover>
@@ -21,7 +19,7 @@
 		left: 50%;
 	}
 
-	button {
+	.icon-button {
 		width: 100%;
 		height: 100%;
 		padding: 0;
@@ -42,8 +40,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import DropdownArrow from "../../../../assets/12px-solid/dropdown-arrow.svg";
-import VerticalEllipsis from "../../../../assets/12px-solid/vertical-ellipsis.svg";
 import IconButton from "./IconButton.vue";
 import Popover, { PopoverDirection } from "../overlays/Popover.vue";
 
@@ -54,8 +50,6 @@ export enum PopoverButtonIcon {
 
 export default defineComponent({
 	components: {
-		VerticalEllipsis,
-		DropdownArrow,
 		Popover,
 		IconButton,
 	},
diff --git a/client/web/src/components/widgets/inputs/MenuBarInput.vue b/client/web/src/components/widgets/inputs/MenuBarInput.vue
index 462d4c69..80c8adc7 100644
--- a/client/web/src/components/widgets/inputs/MenuBarInput.vue
+++ b/client/web/src/components/widgets/inputs/MenuBarInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="menu-bar-input">
-		<div class="entry"><GraphiteLogo width="16" height="16" /></div>
+		<div class="entry"><Icon :icon="'GraphiteLogo'" /></div>
 		<div class="entry"><span>File</span></div>
 		<div class="entry"><span>Edit</span></div>
 		<div class="entry"><span>Document</span></div>
@@ -40,11 +40,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import Icon from "../labels/Icon.vue";
 import { ApplicationPlatform } from "../../window/MainWindow.vue";
-import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
 
 export default defineComponent({
-	components: { GraphiteLogo },
+	components: { Icon },
 	data() {
 		return {
 			ApplicationPlatform,
diff --git a/client/web/src/components/widgets/labels/Icon.vue b/client/web/src/components/widgets/labels/Icon.vue
index fcd54262..2face2b3 100644
--- a/client/web/src/components/widgets/labels/Icon.vue
+++ b/client/web/src/components/widgets/labels/Icon.vue
@@ -1,23 +1,14 @@
 <template>
-	<div class="icon" :class="`size-${String(size)}`">
-		<slot></slot>
+	<div class="icon" :class="`size-${String(icons[icon].size)}`">
+		<component :is="icon" />
 	</div>
 </template>
 
 <style lang="scss">
 .icon {
-	display: inline-block;
+	display: block;
 	flex: 0 0 auto;
 	fill: var(--color-e-nearwhite);
-	vertical-align: top;
-	width: 16px;
-	height: 16px;
-	margin-left: 0;
-
-	&.size-10 {
-		width: 10px;
-		height: 10px;
-	}
 
 	&.size-12 {
 		width: 12px;
@@ -39,10 +30,150 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import SelectTool from "../../../../assets/24px-two-tone/document-tool-layout-select.svg";
+import CropTool from "../../../../assets/24px-two-tone/document-tool-layout-crop.svg";
+import NavigateTool from "../../../../assets/24px-two-tone/document-tool-layout-navigate.svg";
+import EyedropperTool from "../../../../assets/24px-two-tone/document-tool-layout-eyedropper.svg";
+import TextTool from "../../../../assets/24px-two-tone/document-tool-parametric-text.svg";
+import FillTool from "../../../../assets/24px-two-tone/document-tool-parametric-fill.svg";
+import GradientTool from "../../../../assets/24px-two-tone/document-tool-parametric-gradient.svg";
+import BrushTool from "../../../../assets/24px-two-tone/document-tool-raster-brush.svg";
+import HealTool from "../../../../assets/24px-two-tone/document-tool-raster-heal.svg";
+import CloneTool from "../../../../assets/24px-two-tone/document-tool-raster-clone.svg";
+import PatchTool from "../../../../assets/24px-two-tone/document-tool-raster-patch.svg";
+import BlurSharpenTool from "../../../../assets/24px-two-tone/document-tool-raster-detail.svg";
+import RelightTool from "../../../../assets/24px-two-tone/document-tool-raster-relight.svg";
+import PathTool from "../../../../assets/24px-two-tone/document-tool-vector-path.svg";
+import PenTool from "../../../../assets/24px-two-tone/document-tool-vector-pen.svg";
+import FreehandTool from "../../../../assets/24px-two-tone/document-tool-vector-freehand.svg";
+import SplineTool from "../../../../assets/24px-two-tone/document-tool-vector-spline.svg";
+import LineTool from "../../../../assets/24px-two-tone/document-tool-vector-line.svg";
+import RectangleTool from "../../../../assets/24px-two-tone/document-tool-vector-rectangle.svg";
+import EllipseTool from "../../../../assets/24px-two-tone/document-tool-vector-ellipse.svg";
+import ShapeTool from "../../../../assets/24px-two-tone/document-tool-vector-shape.svg";
+
+import AlignHorizontalLeft from "../../../../assets/16px-solid/align-horizontal-left.svg";
+import AlignHorizontalCenter from "../../../../assets/16px-solid/align-horizontal-center.svg";
+import AlignHorizontalRight from "../../../../assets/16px-solid/align-horizontal-right.svg";
+import AlignVerticalTop from "../../../../assets/16px-solid/align-vertical-top.svg";
+import AlignVerticalCenter from "../../../../assets/16px-solid/align-vertical-center.svg";
+import AlignVerticalBottom from "../../../../assets/16px-solid/align-vertical-bottom.svg";
+import FlipHorizontal from "../../../../assets/16px-solid/flip-horizontal.svg";
+import FlipVertical from "../../../../assets/16px-solid/flip-vertical.svg";
+import BooleanUnion from "../../../../assets/16px-solid/boolean-union.svg";
+import BooleanSubtractFront from "../../../../assets/16px-solid/boolean-subtract-front.svg";
+import BooleanSubtractBack from "../../../../assets/16px-solid/boolean-subtract-back.svg";
+import BooleanIntersect from "../../../../assets/16px-solid/boolean-intersect.svg";
+import BooleanDifference from "../../../../assets/16px-solid/boolean-difference.svg";
+import ZoomReset from "../../../../assets/16px-solid/zoom-reset.svg";
+import ZoomIn from "../../../../assets/16px-solid/zoom-in.svg";
+import ZoomOut from "../../../../assets/16px-solid/zoom-out.svg";
+import ViewModeNormal from "../../../../assets/16px-solid/view-mode-normal.svg";
+import ViewModeOutline from "../../../../assets/16px-solid/view-mode-outline.svg";
+import ViewModePixels from "../../../../assets/16px-solid/view-mode-pixels.svg";
+import EyeVisible from "../../../../assets/16px-solid/visibility-eye-visible.svg";
+import EyeHidden from "../../../../assets/16px-solid/visibility-eye-hidden.svg";
+import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
+
+import SwapButton from "../../../../assets/12px-solid/swap.svg";
+import ResetColorsButton from "../../../../assets/12px-solid/reset-colors.svg";
+import DropdownArrow from "../../../../assets/12px-solid/dropdown-arrow.svg";
+import VerticalEllipsis from "../../../../assets/12px-solid/vertical-ellipsis.svg";
+import CloseX from "../../../../assets/12px-solid/close-x.svg";
+import WindowButtonWinMinimize from "../../../../assets/12px-solid/window-button-win-minimize.svg";
+import WindowButtonWinMaximize from "../../../../assets/12px-solid/window-button-win-maximize.svg";
+import WindowButtonWinRestoreDown from "../../../../assets/12px-solid/window-button-win-restore-down.svg";
+import WindowButtonWinClose from "../../../../assets/12px-solid/window-button-win-close.svg";
+
+import MouseHintNone from "../../../../assets/16px-two-tone/mouse-hint-none.svg";
+import MouseHintLMB from "../../../../assets/16px-two-tone/mouse-hint-lmb.svg";
+import MouseHintRMB from "../../../../assets/16px-two-tone/mouse-hint-rmb.svg";
+import MouseHintMMB from "../../../../assets/16px-two-tone/mouse-hint-mmb.svg";
+import MouseHintScrollUp from "../../../../assets/16px-two-tone/mouse-hint-scroll-up.svg";
+import MouseHintScrollDown from "../../../../assets/16px-two-tone/mouse-hint-scroll-down.svg";
+import MouseHintDrag from "../../../../assets/16px-two-tone/mouse-hint-drag.svg";
+import MouseHintLMBDrag from "../../../../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
+import MouseHintRMBDrag from "../../../../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
+import MouseHintMMBDrag from "../../../../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
+
+import NodeTypePath from "../../../../assets/24px-full-color/node-type-path.svg";
+
+const icons = {
+	SelectTool: { component: SelectTool, size: 24 },
+	CropTool: { component: CropTool, size: 24 },
+	NavigateTool: { component: NavigateTool, size: 24 },
+	EyedropperTool: { component: EyedropperTool, size: 24 },
+	TextTool: { component: TextTool, size: 24 },
+	FillTool: { component: FillTool, size: 24 },
+	GradientTool: { component: GradientTool, size: 24 },
+	BrushTool: { component: BrushTool, size: 24 },
+	HealTool: { component: HealTool, size: 24 },
+	CloneTool: { component: CloneTool, size: 24 },
+	PatchTool: { component: PatchTool, size: 24 },
+	BlurSharpenTool: { component: BlurSharpenTool, size: 24 },
+	RelightTool: { component: RelightTool, size: 24 },
+	PathTool: { component: PathTool, size: 24 },
+	PenTool: { component: PenTool, size: 24 },
+	FreehandTool: { component: FreehandTool, size: 24 },
+	SplineTool: { component: SplineTool, size: 24 },
+	LineTool: { component: LineTool, size: 24 },
+	RectangleTool: { component: RectangleTool, size: 24 },
+	EllipseTool: { component: EllipseTool, size: 24 },
+	ShapeTool: { component: ShapeTool, size: 24 },
+	AlignHorizontalLeft: { component: AlignHorizontalLeft, size: 16 },
+	AlignHorizontalCenter: { component: AlignHorizontalCenter, size: 16 },
+	AlignHorizontalRight: { component: AlignHorizontalRight, size: 16 },
+	AlignVerticalTop: { component: AlignVerticalTop, size: 16 },
+	AlignVerticalCenter: { component: AlignVerticalCenter, size: 16 },
+	AlignVerticalBottom: { component: AlignVerticalBottom, size: 16 },
+	FlipHorizontal: { component: FlipHorizontal, size: 16 },
+	FlipVertical: { component: FlipVertical, size: 16 },
+	BooleanUnion: { component: BooleanUnion, size: 16 },
+	BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
+	BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
+	BooleanIntersect: { component: BooleanIntersect, size: 16 },
+	BooleanDifference: { component: BooleanDifference, size: 16 },
+	ZoomReset: { component: ZoomReset, size: 16 },
+	ZoomIn: { component: ZoomIn, size: 16 },
+	ZoomOut: { component: ZoomOut, size: 16 },
+	ViewModeNormal: { component: ViewModeNormal, size: 16 },
+	ViewModeOutline: { component: ViewModeOutline, size: 16 },
+	ViewModePixels: { component: ViewModePixels, size: 16 },
+	EyeVisible: { component: EyeVisible, size: 16 },
+	EyeHidden: { component: EyeHidden, size: 16 },
+	GraphiteLogo: { component: GraphiteLogo, size: 16 },
+	SwapButton: { component: SwapButton, size: 12 },
+	ResetColorsButton: { component: ResetColorsButton, size: 12 },
+	DropdownArrow: { component: DropdownArrow, size: 12 },
+	VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
+	CloseX: { component: CloseX, size: 12 },
+	WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: 12 },
+	WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
+	WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
+	WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
+	MouseHintNone: { component: MouseHintNone, size: 16 },
+	MouseHintLMB: { component: MouseHintLMB, size: 16 },
+	MouseHintRMB: { component: MouseHintRMB, size: 16 },
+	MouseHintMMB: { component: MouseHintMMB, size: 16 },
+	MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
+	MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
+	MouseHintDrag: { component: MouseHintDrag, size: 16 },
+	MouseHintLMBDrag: { component: MouseHintLMBDrag, size: 16 },
+	MouseHintRMBDrag: { component: MouseHintRMBDrag, size: 16 },
+	MouseHintMMBDrag: { component: MouseHintMMBDrag, size: 16 },
+	NodeTypePath: { component: NodeTypePath, size: 24 },
+};
+
+const components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
+
 export default defineComponent({
 	props: {
-		size: { type: Number, required: true },
+		icon: { type: String, required: true },
 		gapAfter: { type: Boolean, default: false },
 	},
+	components,
+	data() {
+		return { icons };
+	},
 });
 </script>
diff --git a/client/web/src/components/widgets/labels/UserInputLabel.vue b/client/web/src/components/widgets/labels/UserInputLabel.vue
index 25d307ae..14afb7e4 100644
--- a/client/web/src/components/widgets/labels/UserInputLabel.vue
+++ b/client/web/src/components/widgets/labels/UserInputLabel.vue
@@ -4,16 +4,7 @@
 			{{ inputKey }}
 		</span>
 		<span class="input-mouse" v-if="inputMouse">
-			<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
-			<MouseHintLMB v-if="inputMouse === MouseInputInteraction.LMB" width="16" height="16" />
-			<MouseHintRMB v-if="inputMouse === MouseInputInteraction.RMB" width="16" height="16" />
-			<MouseHintMMB v-if="inputMouse === MouseInputInteraction.MMB" width="16" height="16" />
-			<MouseHintScrollUp v-if="inputMouse === MouseInputInteraction.ScrollUp" width="16" height="16" />
-			<MouseHintScrollDown v-if="inputMouse === MouseInputInteraction.ScrollDown" width="16" height="16" />
-			<MouseHintDrag v-if="inputMouse === MouseInputInteraction.Drag" width="16" height="16" />
-			<MouseHintLMBDrag v-if="inputMouse === MouseInputInteraction.LMBDrag" width="16" height="16" />
-			<MouseHintRMBDrag v-if="inputMouse === MouseInputInteraction.RMBDrag" width="16" height="16" />
-			<MouseHintMMBDrag v-if="inputMouse === MouseInputInteraction.MMBDrag" width="16" height="16" />
+			<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
 		</span>
 		<span class="hint-text">
 			<slot></slot>
@@ -87,16 +78,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import MouseHintNone from "../../../../assets/16px-two-tone/mouse-hint-none.svg";
-import MouseHintLMB from "../../../../assets/16px-two-tone/mouse-hint-lmb.svg";
-import MouseHintRMB from "../../../../assets/16px-two-tone/mouse-hint-rmb.svg";
-import MouseHintMMB from "../../../../assets/16px-two-tone/mouse-hint-mmb.svg";
-import MouseHintScrollUp from "../../../../assets/16px-two-tone/mouse-hint-scroll-up.svg";
-import MouseHintScrollDown from "../../../../assets/16px-two-tone/mouse-hint-scroll-down.svg";
-import MouseHintDrag from "../../../../assets/16px-two-tone/mouse-hint-drag.svg";
-import MouseHintLMBDrag from "../../../../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
-import MouseHintRMBDrag from "../../../../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
-import MouseHintMMBDrag from "../../../../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
+import Icon from "./Icon.vue";
 
 export enum MouseInputInteraction {
 	"None" = "None",
@@ -112,18 +94,7 @@ export enum MouseInputInteraction {
 }
 
 export default defineComponent({
-	components: {
-		MouseHintNone,
-		MouseHintLMB,
-		MouseHintRMB,
-		MouseHintMMB,
-		MouseHintScrollUp,
-		MouseHintScrollDown,
-		MouseHintDrag,
-		MouseHintLMBDrag,
-		MouseHintRMBDrag,
-		MouseHintMMBDrag,
-	},
+	components: { Icon },
 	props: {
 		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },
@@ -132,6 +103,31 @@ export default defineComponent({
 		keyCapWidth(keyText: string) {
 			return `width-${keyText.length * 8 + 8}`;
 		},
+		mouseInputInteractionToIcon(mouseInputInteraction: MouseInputInteraction) {
+			switch (mouseInputInteraction) {
+				case MouseInputInteraction.LMB:
+					return "MouseHintLMB";
+				case MouseInputInteraction.RMB:
+					return "MouseHintRMB";
+				case MouseInputInteraction.MMB:
+					return "MouseHintMMB";
+				case MouseInputInteraction.ScrollUp:
+					return "MouseHintScrollUp";
+				case MouseInputInteraction.ScrollDown:
+					return "MouseHintScrollDown";
+				case MouseInputInteraction.Drag:
+					return "MouseHintDrag";
+				case MouseInputInteraction.LMBDrag:
+					return "MouseHintLMBDrag";
+				case MouseInputInteraction.RMBDrag:
+					return "MouseHintRMBDrag";
+				case MouseInputInteraction.MMBDrag:
+					return "MouseHintMMBDrag";
+				default:
+				case MouseInputInteraction.None:
+					return "MouseHintNone";
+			}
+		},
 	},
 	data() {
 		return {
diff --git a/client/web/src/components/window/title-bar/WindowButtonsWindows.vue b/client/web/src/components/window/title-bar/WindowButtonsWindows.vue
index ea122484..64546c4f 100644
--- a/client/web/src/components/window/title-bar/WindowButtonsWindows.vue
+++ b/client/web/src/components/window/title-bar/WindowButtonsWindows.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="windows window-button minimize" title="Minimize">
-		<WindowButtonWinMinimize width="12" height="12" />
+		<Icon :icon="'WindowButtonWinMinimize'" />
 	</div>
 	<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
-		<WindowButtonWinMaximize width="12" height="12" />
+		<Icon :icon="'WindowButtonWinMaximize'" />
 	</div>
 	<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
-		<WindowButtonWinRestoreDown width="12" height="12" />
+		<Icon :icon="'WindowButtonWinRestoreDown'" />
 	</div>
 	<div class="windows window-button close" title="Close">
-		<WindowButtonWinClose width="12" height="12" />
+		<Icon :icon="'WindowButtonWinClose'" />
 	</div>
 </template>
 
@@ -39,18 +39,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import WindowButtonWinMinimize from "../../../../assets/12px-solid/window-button-win-minimize.svg";
-import WindowButtonWinMaximize from "../../../../assets/12px-solid/window-button-win-maximize.svg";
-import WindowButtonWinRestoreDown from "../../../../assets/12px-solid/window-button-win-restore-down.svg";
-import WindowButtonWinClose from "../../../../assets/12px-solid/window-button-win-close.svg";
+import Icon from "../../widgets/labels/Icon.vue";
 
 export default defineComponent({
-	components: {
-		WindowButtonWinMinimize,
-		WindowButtonWinMaximize,
-		WindowButtonWinRestoreDown,
-		WindowButtonWinClose,
-	},
+	components: { Icon },
 	props: {
 		maximized: { type: Boolean, default: false },
 	},
diff --git a/client/web/src/components/workspace/Panel.vue b/client/web/src/components/workspace/Panel.vue
index 1811d986..115bb92e 100644
--- a/client/web/src/components/workspace/Panel.vue
+++ b/client/web/src/components/workspace/Panel.vue
@@ -4,9 +4,7 @@
 			<div class="tab-group">
 				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
 					<span>{{ tabLabel }}</span>
-					<IconButton :size="16" :iconSize="12" v-if="tabCloseButtons">
-						<CloseX />
-					</IconButton>
+					<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
 				</div>
 			</div>
 			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
@@ -142,7 +140,6 @@ import Minimap from "../panels/Minimap.vue";
 import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
 import { PopoverDirection } from "../widgets/overlays/Popover.vue";
-import CloseX from "../../../assets/12px-solid/close-x.svg";
 
 export default defineComponent({
 	components: {
@@ -152,7 +149,6 @@ export default defineComponent({
 		Minimap,
 		IconButton,
 		PopoverButton,
-		CloseX,
 	},
 	props: {
 		tabMinWidths: { type: Boolean, default: false },