refactor(editor): Implemented NodeIcon design system component (#3727)

* ✨ Implemented `NodeIcon` design system component

* ✨ Updated editor to use N8nNodeIcon component, removed HoverableNodeIcon

* ➕ Adding design system types import to editor-ui

* ✔️ Fixing linting errors

* 👌 Updating `NodeIcon` component based on review feedback

* 👌 Minor changes to `NodeIcon` component

* 👌 Removing unnecessary `Vue.use statement

* 🐛 Fixing unknown node icon bug and adding click listener to node icon component

* 💄 Removing unnecessary pointer cursor from the `NodeIcon` component

* 💄 Adding pointer cursor to node icons in the template details

* 💄 Updating node icon size in collections page

packages/editor-ui/src/components/NodeList.vue

@@ -1,7 +1,11 @@
 <template>
 	<div :class="$style.list">
 		<div v-for="node in slicedNodes" :class="[$style.container, $style[size]]" :key="node.name">
-			<HoverableNodeIcon :nodeType="node" :size="size === 'md'? 24: 18" :title="node.name" />
+			<NodeIcon
+				:nodeType="node"
+				:size="size === 'md'? 24: 18"
+				:showTooltip="true"
+			/>
 		</div>
 		<div :class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]" v-if="filteredCoreNodes.length > limit + 1">
 			+{{ hiddenNodes }}
@@ -10,14 +14,11 @@
 </template>
 
 <script lang="ts">
-import HoverableNodeIcon from '@/components/HoverableNodeIcon.vue';
-
+import NodeIcon from '@/components/NodeIcon.vue';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { ITemplatesNode } from '@/Interface';
-
 import mixins from 'vue-typed-mixins';
 import { filterTemplateNodes } from './helpers';
-
 export default mixins(genericHelpers).extend({
 	name: 'NodeList',
 	props: {
@@ -34,7 +35,7 @@ export default mixins(genericHelpers).extend({
 		},
 	},
 	components: {
-		HoverableNodeIcon,
+		NodeIcon,
 	},
 	computed: {
 		filteredCoreNodes() {
@@ -67,20 +68,16 @@ export default mixins(genericHelpers).extend({
 	justify-content: flex-end;
 	align-items: center;
 }
-
 .container {
 	position: relative;
 	display: block;
 }
-
 .sm {
 	margin-left: var(--spacing-2xs);
 }
-
 .md {
 	margin-left: var(--spacing-xs);
 }
-
 .button {
 	top: 0px;
 	position: relative;
@@ -94,14 +91,12 @@ export default mixins(genericHelpers).extend({
 	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
 }
-
 .buttonSm {
 	margin-left: var(--spacing-2xs);
 	width: 20px;
 	min-width: 20px;
 	height: 20px;
 }
-
 .buttonMd {
 	margin-left: var(--spacing-xs);
 	width: 24px;