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/TemplateDetails.vue

@@ -9,10 +9,10 @@
 					:key="node.name"
 					:class="$style.icon"
 				>
-					<HoverableNodeIcon
+					<NodeIcon
 						:nodeType="node"
-						:title="node.name"
 						:size="24"
+						:showTooltip="true"
 						@click="redirectToSearchPage(node)"
 					/>
 				</div>
@@ -48,13 +48,10 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-
 import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
-import HoverableNodeIcon from '@/components/HoverableNodeIcon.vue';
-
+import NodeIcon from '@/components/NodeIcon.vue';
 import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers';
 import { ITemplatesNode } from '@/Interface';
-
 export default Vue.extend({
 	name: 'TemplateDetails',
 	props: {
@@ -69,7 +66,7 @@ export default Vue.extend({
 		},
 	},
 	components: {
-		HoverableNodeIcon,
+		NodeIcon,
 		TemplateDetailsBlock,
 	},
 	methods: {
@@ -91,12 +88,11 @@ export default Vue.extend({
 	display: flex;
 	flex-wrap: wrap;
 }
-
 .icon {
 	margin-right: var(--spacing-xs);
 	margin-bottom: var(--spacing-xs);
+	cursor: pointer;
 }
-
 .text {
 	padding-bottom: var(--spacing-xs);
 }