refactor(editor): Address issues with new icons (#17643)

packages/frontend/editor-ui/src/components/MainSidebar.vue

@@ -110,7 +110,6 @@ const mainMenuItems = computed<IMenuItem[]>(() => [
 		id: 'variables',
 		icon: 'variable',
 		label: i18n.baseText('mainSidebar.variables'),
-		customIconSize: 'medium',
 		position: 'bottom',
 		route: { to: { name: VIEWS.VARIABLES } },
 	},
@@ -118,7 +117,6 @@ const mainMenuItems = computed<IMenuItem[]>(() => [
 		id: 'insights',
 		icon: 'chart-column-decreasing',
 		label: 'Insights',
-		customIconSize: 'medium',
 		position: 'bottom',
 		route: { to: { name: VIEWS.INSIGHTS } },
 		available:

packages/frontend/editor-ui/src/components/RunDataSearch.vue

@@ -116,7 +116,7 @@ watch(
 		@blur="onBlur"
 	>
 		<template #prefix>
-			<n8n-icon :class="$style.ioSearchIcon" icon="search" />
+			<n8n-icon :class="$style.ioSearchIcon" icon="search" size="large" />
 		</template>
 	</n8n-input>
 </template>

packages/frontend/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue

@@ -130,7 +130,7 @@ function onFocusNode() {
 					type="tertiary"
 					text
 					size="small"
-					icon="play"
+					icon="node-play"
 					:disabled="isExecuting || isDisabled"
 					:title="i18n.baseText('node.testStep')"
 					@click="executeNode"
@@ -142,7 +142,7 @@ function onFocusNode() {
 				type="tertiary"
 				text
 				size="small"
-				icon="power"
+				icon="node-power"
 				:title="nodeDisabledTitle"
 				@click="onToggleNode"
 			/>
@@ -152,7 +152,7 @@ function onFocusNode() {
 				type="tertiary"
 				size="small"
 				text
-				icon="trash-2"
+				icon="node-trash"
 				:title="i18n.baseText('node.delete')"
 				@click="onDeleteNode"
 			/>
@@ -174,7 +174,7 @@ function onFocusNode() {
 				type="tertiary"
 				size="small"
 				text
-				icon="ellipsis"
+				icon="node-ellipsis"
 				@click="onOpenContextMenu"
 			/>
 		</div>

packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue

@@ -8,8 +8,8 @@ import { CanvasNodeDirtiness, CanvasNodeRenderType } from '@/types';
 import { N8nTooltip } from '@n8n/design-system';
 import { useCanvas } from '@/composables/useCanvas';
 
-const { size = 'medium', spinnerScrim = false } = defineProps<{
-	size?: 'small' | 'medium';
+const { size = 'large', spinnerScrim = false } = defineProps<{
+	size?: 'small' | 'medium' | 'large';
 	spinnerScrim?: boolean;
 }>();
 
@@ -60,7 +60,7 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
 			<template #content>
 				<TitledList :title="`${i18n.baseText('node.issues')}:`" :items="issues" />
 			</template>
-			<N8nIcon icon="triangle-alert" :size="size" />
+			<N8nIcon icon="node-error" :size="size" />
 		</N8nTooltip>
 	</div>
 	<div v-else-if="executionWaiting || executionStatus === 'waiting'">
@@ -91,7 +91,7 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
 		data-test-id="canvas-node-status-pinned"
 		:class="[...commonClasses, $style.pinnedData]"
 	>
-		<N8nIcon icon="pin" :size="size" />
+		<N8nIcon icon="node-pin" :size="size" />
 	</div>
 	<div v-else-if="dirtiness !== undefined">
 		<N8nTooltip :show-after="500" placement="bottom">
@@ -105,7 +105,7 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
 				}}
 			</template>
 			<div data-test-id="canvas-node-status-warning" :class="[...commonClasses, $style.warning]">
-				<N8nIcon icon="triangle" :size="size" />
+				<N8nIcon icon="node-dirty" :size="size" />
 				<span v-if="runDataIterations > 1" :class="$style.count"> {{ runDataIterations }}</span>
 			</div>
 		</N8nTooltip>
@@ -115,7 +115,7 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
 		data-test-id="canvas-node-status-success"
 		:class="[...commonClasses, $style.runData]"
 	>
-		<N8nIcon icon="check" :size="size" />
+		<N8nIcon icon="node-success" :size="size" />
 		<span v-if="runDataIterations > 1" :class="$style.count"> {{ runDataIterations }}</span>
 	</div>
 </template>

packages/frontend/editor-ui/vite.config.mts

@@ -110,6 +110,8 @@ const plugins: UserConfig['plugins'] = [
 						overrides: {
 							// disable a default plugin
 							cleanupIds: false,
+							// preserve viewBox for scalability
+							removeViewBox: false,
 						},
 					},
 				},