Clean up widget type naming conventions

client/web/src/components/panels/Document.vue

@@ -104,39 +104,45 @@
 		<LayoutRow :class="'shelf-and-viewport'">
 			<LayoutCol :class="'shelf'">
 				<div class="tools">
-					<ShelfItem :icon="'LayoutSelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
+					<ShelfItemInput :icon="'LayoutSelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
-					<ShelfItem :icon="'LayoutCropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
+					<ShelfItemInput :icon="'LayoutCropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
-					<ShelfItem :icon="'LayoutNavigateTool'" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
+					<ShelfItemInput :icon="'LayoutNavigateTool'" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
-					<ShelfItem :icon="'LayoutEyedropperTool'" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
+					<ShelfItemInput :icon="'LayoutEyedropperTool'" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem :icon="'ParametricTextTool'" title="Text Tool (T)" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
+					<ShelfItemInput :icon="'ParametricTextTool'" title="Text Tool (T)" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
-					<ShelfItem :icon="'ParametricFillTool'" title="Fill Tool (F)" :active="activeTool === 'Fill'" @click="selectTool('Fill')" />
+					<ShelfItemInput :icon="'ParametricFillTool'" title="Fill Tool (F)" :active="activeTool === 'Fill'" @click="selectTool('Fill')" />
-					<ShelfItem :icon="'ParametricGradientTool'" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
+					<ShelfItemInput :icon="'ParametricGradientTool'" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem :icon="'RasterBrushTool'" title="Brush Tool (B)" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
+					<ShelfItemInput :icon="'RasterBrushTool'" title="Brush Tool (B)" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
-					<ShelfItem :icon="'RasterHealTool'" title="Heal Tool (J)" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
+					<ShelfItemInput :icon="'RasterHealTool'" title="Heal Tool (J)" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
-					<ShelfItem :icon="'RasterCloneTool'" title="Clone Tool (C)" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
+					<ShelfItemInput :icon="'RasterCloneTool'" title="Clone Tool (C)" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
-					<ShelfItem :icon="'RasterPatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
+					<ShelfItemInput :icon="'RasterPatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
-					<ShelfItem :icon="'RasterBlurSharpenTool'" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
+					<ShelfItemInput :icon="'RasterBlurSharpenTool'" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
-					<ShelfItem :icon="'RasterRelightTool'" title="Relight Tool (O)" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
+					<ShelfItemInput :icon="'RasterRelightTool'" title="Relight Tool (O)" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
 
 					<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
 
-					<ShelfItem :icon="'VectorPathTool'" title="Path Tool (A)" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
+					<ShelfItemInput :icon="'VectorPathTool'" title="Path Tool (A)" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
-					<ShelfItem :icon="'VectorPenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
+					<ShelfItemInput :icon="'VectorPenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
-					<ShelfItem :icon="'VectorFreehandTool'" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
+					<ShelfItemInput :icon="'VectorFreehandTool'" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
-					<ShelfItem :icon="'VectorSplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
+					<ShelfItemInput :icon="'VectorSplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
-					<ShelfItem :icon="'VectorLineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
+					<ShelfItemInput :icon="'VectorLineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
-					<ShelfItem :icon="'VectorRectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
+					<ShelfItemInput :icon="'VectorRectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
-					<ShelfItem :icon="'VectorEllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
+					<ShelfItemInput :icon="'VectorEllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
-					<ShelfItem :icon="'VectorShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
+					<ShelfItemInput :icon="'VectorShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
 				</div>
 				<div class="spacer"></div>
-				<SwatchPair />
+				<div class="working-colors">
+					<SwatchPairInput />
+					<div class="swap-and-reset">
+						<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
+						<IconButton @click="resetColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
+					</div>
+				</div>
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
 				<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" ref="canvas">
@@ -169,6 +175,10 @@
 			flex: 0 0 auto;
 			display: flex;
 			flex-direction: column;
+
+			.working-colors .swap-and-reset {
+				font-size: 0;
+			}
 		}
 
 		.viewport {
@@ -196,9 +206,9 @@ import { makeModifiersBitfield } from "@/utilities/input";
 import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
-import SwatchPair from "@/components/widgets/inputs/SwatchPair.vue";
+import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
-import ShelfItem from "@/components/widgets/inputs/ShelfItem.vue";
+import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
 import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@@ -331,8 +341,8 @@ export default defineComponent({
 	components: {
 		LayoutRow,
 		LayoutCol,
-		SwatchPair,
+		SwatchPairInput,
-		ShelfItem,
+		ShelfItemInput,
 		Separator,
 		IconButton,
 		PopoverButton,

client/web/src/components/panels/LayerTree.vue

@@ -30,7 +30,7 @@
 					>
 						<div class="layer-thumbnail"></div>
 						<div class="layer-type-icon">
-							<Icon :icon="'NodeTypePath'" title="Path" />
+							<IconLabel :icon="'NodeTypePath'" title="Path" />
 						</div>
 						<div class="layer-name">
 							<span>{{ layer.name }}</span>
@@ -112,7 +112,7 @@ import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
@@ -230,7 +230,7 @@ export default defineComponent({
 		PopoverButton,
 		NumberInput,
 		IconButton,
-		Icon,
+		IconLabel,
 		DropdownInput,
 	},
 });

client/web/src/components/widgets/buttons/IconButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<button class="icon-button" :class="`size-${String(size)}`">
-		<Icon :icon="icon" />
+		<IconLabel :icon="icon" />
 	</button>
 </template>
 
@@ -53,7 +53,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	props: {
@@ -61,6 +61,6 @@ export default defineComponent({
 		size: { type: Number, required: true },
 		gapAfter: { type: Boolean, default: false },
 	},
-	components: { Icon },
+	components: { IconLabel },
 });
 </script>

client/web/src/components/widgets/floating-menus/MenuList.vue

@@ -12,10 +12,10 @@
 				@mouseleave="handleEntryMouseLeave(entry)"
 				:data-hover-menu-spawner-extend="entry.children && []"
 			>
-				<Icon :icon="entry.icon" v-if="entry.icon && drawIcon" />
+				<IconLabel :icon="entry.icon" v-if="entry.icon && drawIcon" />
 				<div class="no-icon" v-else-if="drawIcon" />
 				<span class="entry-label">{{ entry.label }}</span>
-				<Icon :icon="'Info'" v-if="entry.shortcutRequiresLock && !fullscreen.keyboardLocked" :title="keyboardLockInfoMessage" />
+				<IconLabel :icon="'Info'" v-if="entry.shortcutRequiresLock && !fullscreen.keyboardLocked" :title="keyboardLockInfoMessage" />
 				<UserInputLabel v-else-if="entry.shortcut && entry.shortcut.length" :inputKeys="[entry.shortcut]" />
 				<div class="submenu-arrow" v-if="entry.children && entry.children.length"></div>
 				<div class="no-submenu-arrow" v-else></div>
@@ -53,7 +53,7 @@
 				flex: 0 0 auto;
 			}
 
-			.icon svg {
+			.icon-label svg {
 				fill: var(--color-e-nearwhite);
 			}
 
@@ -66,7 +66,7 @@
 				margin-left: 8px;
 			}
 
-			.icon,
+			.icon-label,
 			.no-icon {
 				margin: 0 4px;
 
@@ -125,7 +125,7 @@ import { defineComponent, PropType } from "vue";
 import { keyboardLockApiSupported } from "@/utilities/fullscreen";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
 
 export type MenuListEntries = Array<MenuListEntry>;
@@ -259,7 +259,7 @@ const MenuList = defineComponent({
 	components: {
 		FloatingMenu,
 		Separator,
-		Icon,
+		IconLabel,
 		UserInputLabel,
 	},
 });

client/web/src/components/widgets/inputs/CheckboxInput.vue

@@ -3,7 +3,7 @@
 		<input type="checkbox" :id="`checkbox-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
 		<label :for="`checkbox-${id}`">
 			<div class="checkbox-box">
-				<Icon :icon="icon" />
+				<IconLabel :icon="icon" />
 			</div>
 		</label>
 	</div>
@@ -26,7 +26,7 @@
 			padding: 2px;
 			border-radius: 2px;
 
-			.icon {
+			.icon-label {
 				fill: var(--color-2-mildblack);
 			}
 		}
@@ -40,7 +40,7 @@
 		.checkbox-box {
 			background: var(--color-accent);
 
-			.icon {
+			.icon-label {
 				fill: var(--color-f-white);
 			}
 		}
@@ -54,7 +54,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
 	data() {
@@ -71,6 +71,6 @@ export default defineComponent({
 		checked: { type: Boolean, required: true },
 		icon: { type: String, default: "Checkmark" },
 	},
-	components: { Icon },
+	components: { IconLabel },
 });
 </script>

client/web/src/components/widgets/inputs/DropdownInput.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="dropdown-input">
 		<div class="dropdown-box" :style="{ minWidth: `${minWidth}px` }" @click="clickDropdownBox" data-hover-menu-spawner>
-			<Icon :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
+			<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
-			<Icon :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
+			<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
 		</div>
 		<MenuList
 			:menuEntries="menuEntries"
@@ -76,7 +76,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
@@ -105,7 +105,7 @@ export default defineComponent({
 		},
 	},
 	components: {
-		Icon,
+		IconLabel,
 		MenuList,
 	},
 });

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -2,12 +2,12 @@
 	<div class="menu-bar-input">
 		<div class="entry-container">
 			<div @click="handleLogoClick(entry)" class="entry">
-				<Icon :icon="'GraphiteLogo'" />
+				<IconLabel :icon="'GraphiteLogo'" />
 			</div>
 		</div>
 		<div class="entry-container" v-for="entry in menuEntries" :key="entry">
 			<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
-				<Icon :icon="entry.icon" v-if="entry.icon" />
+				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
 			<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="actionNotImplemented" :ref="(ref) => setEntryRefs(entry, ref)" />
@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
 import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -166,7 +166,7 @@ export default defineComponent({
 		};
 	},
 	components: {
-		Icon,
+		IconLabel,
 		MenuList,
 	},
 });

client/web/src/components/widgets/inputs/ShelfItemInput.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="shelf-item" :class="{ active: active }">
+	<div class="shelf-item-input" :class="{ active: active }">
 		<IconButton :icon="icon" :size="32" />
 	</div>
 </template>
 
 <style lang="scss">
-.shelf-item {
+.shelf-item-input {
 	flex: 0 0 auto;
 	border-radius: 2px;
 

client/web/src/components/widgets/inputs/SwatchPair.vue

@@ -1,42 +0,0 @@
-<template>
-	<div class="swatch-pair">
-		<SwatchPairInput />
-		<div class="swap-and-reset">
-			<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
-			<IconButton @click="resetColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
-		</div>
-	</div>
-</template>
-
-<style lang="scss">
-.swatch-pair {
-	.swap-and-reset {
-		font-size: 0;
-	}
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
-import IconButton from "@/components/widgets/buttons/IconButton.vue";
-
-const wasm = import("@/../wasm/pkg");
-
-export default defineComponent({
-	methods: {
-		async swapColors() {
-			const { swap_colors } = await wasm;
-			swap_colors();
-		},
-		async resetColors() {
-			const { reset_colors } = await wasm;
-			reset_colors();
-		},
-	},
-	components: {
-		SwatchPairInput,
-		IconButton,
-	},
-});
-</script>

client/web/src/components/widgets/labels/IconLabel.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="icon" :class="`size-${String(icons[icon].size)}`">
+	<div class="icon-label" :class="`size-${String(icons[icon].size)}`">
 		<component :is="icon" />
 	</div>
 </template>
 
 <style lang="scss">
-.icon {
+.icon-label {
 	display: block;
 	flex: 0 0 auto;
 	fill: var(--color-e-nearwhite);

client/web/src/components/widgets/labels/UserInputLabel.vue

@@ -7,7 +7,7 @@
 			</span>
 		</template>
 		<span class="input-mouse" v-if="inputMouse">
-			<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
+			<IconLabel :icon="mouseInputInteractionToIcon(inputMouse)" />
 		</span>
 		<span class="hint-text" v-if="hasSlotContent">
 			<slot></slot>
@@ -90,7 +90,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export enum MouseInputInteraction {
 	"None" = "None",
@@ -106,7 +106,7 @@ export enum MouseInputInteraction {
 }
 
 export default defineComponent({
-	components: { Icon },
+	components: { IconLabel },
 	props: {
 		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },

client/web/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
 		<TextLabel v-if="requestFullscreenHotkeys">Click to access all hotkeys</TextLabel>
-		<Icon :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
+		<IconLabel :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
 	</div>
 </template>
 
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 const canUseKeyboardLock = keyboardLockApiSupported();
@@ -48,7 +48,7 @@ export default defineComponent({
 		},
 	},
 	components: {
-		Icon,
+		IconLabel,
 		TextLabel,
 	},
 });

client/web/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="windows window-button minimize" title="Minimize">
-		<Icon :icon="'WindowButtonWinMinimize'" />
+		<IconLabel :icon="'WindowButtonWinMinimize'" />
 	</div>
 	<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
-		<Icon :icon="'WindowButtonWinMaximize'" />
+		<IconLabel :icon="'WindowButtonWinMaximize'" />
 	</div>
 	<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
-		<Icon :icon="'WindowButtonWinRestoreDown'" />
+		<IconLabel :icon="'WindowButtonWinRestoreDown'" />
 	</div>
 	<div class="windows window-button close" title="Close">
-		<Icon :icon="'WindowButtonWinClose'" />
+		<IconLabel :icon="'WindowButtonWinClose'" />
 	</div>
 </template>
 
@@ -39,10 +39,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import Icon from "@/components/widgets/labels/Icon.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
-	components: { Icon },
+	components: { IconLabel },
 	props: {
 		maximized: { type: Boolean, default: false },
 	},