From 1a80a6afed76ad463b6dce68cecd773ebcd98e1c Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Sat, 3 Oct 2020 14:10:08 +0200
Subject: [PATCH] :zap: Improve support for svg-icons

---
 packages/editor-ui/src/components/NodeIcon.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 4d7a95f47e..d32a1a40ef 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="node-icon-wrapper" :style="iconStyleData">
+	<div class="node-icon-wrapper" :style="iconStyleData" :class="{full: isSvgIcon}">
 		<div v-if="nodeIconData !== null" class="icon">
 			<img :src="nodeIconData.path" style="width: 100%; height: 100%;" v-if="nodeIconData.type === 'file'"/>
 			<font-awesome-icon :icon="nodeIconData.path" v-else-if="nodeIconData.type === 'fa'" />
@@ -17,6 +17,7 @@ import Vue from 'vue';
 interface NodeIconData {
 	type: string;
 	path: string;
+	fileExtension?: string;
 }
 
 export default Vue.extend({
@@ -41,6 +42,12 @@ export default Vue.extend({
 				'border-radius': Math.ceil(size / 2) + 'px',
 			};
 		},
+		isSvgIcon (): boolean {
+			if (this.nodeIconData && this.nodeIconData.type === 'file' && this.nodeIconData.fileExtension === 'svg') {
+				return true;
+			}
+			return false;
+		},
 		nodeIconData (): null | NodeIconData {
 			if (this.nodeType === null) {
 				return null;
@@ -51,13 +58,14 @@ export default Vue.extend({
 			if (this.nodeType.icon) {
 				let type, path;
 				[type, path] = this.nodeType.icon.split(':');
-				const returnData = {
+				const returnData: NodeIconData = {
 					type,
 					path,
 				};
 
 				if (type === 'file') {
 					returnData.path = restUrl + '/node-icon/' + this.nodeType.name;
+					returnData.fileExtension = path.split('.').slice(-1).join();
 				}
 
 				return returnData;
@@ -83,6 +91,10 @@ export default Vue.extend({
 	font-weight: bold;
 	font-size: 20px;
 
+	&.full .icon {
+		margin: 0.24em;
+	}
+
 	.node-icon-placeholder {
 		text-align: center;
 	}