Merge pull request #1302 from dbgate/feature/db-icons

Feature/db icons

packages/web/src/appobj/ConnectionAppObject.svelte

@@ -431,13 +431,14 @@
   }
 
   $: apps = useAllApps();
+  $: driver = $extensions.drivers.find(x => x.engine == data.engine);
 </script>
 
 <AppObjectCore
   {...$$restProps}
   {data}
   title={getConnectionLabel(data, { showUnsaved: true })}
-  icon={data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server'}
+  icon={driver?.icon || (data._id.startsWith('cloud://') ? 'img cloud-connection' : data.singleDatabase ? 'img database' : 'img server')}
   isBold={data.singleDatabase
     ? $currentDatabase?.connection?._id == data._id && $currentDatabase?.name == data.defaultDatabase
     : $currentDatabase?.connection?._id == data._id}

packages/web/src/icons/FontIcon.svelte

@@ -32,6 +32,7 @@
   export let padRight = false;
   export let style = null;
   export let colorClass = null;
+  $: isSvgString = icon && icon.trim().startsWith('<svg');
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -357,17 +358,41 @@
   };
 </script>
 
-<span
-  class={`${iconNames[icon] || icon} ${colorClass || ''}`}
-  {title}
-  class:padLeft
-  class:padRight
-  {style}
-  on:click
-  data-testid={$$props['data-testid']}
-/>
+{#if isSvgString}
+  <span
+    class="svg-inline"
+    class:padLeft
+    class:padRight
+    {title}
+    {style}
+    on:click
+    data-testid={$$props['data-testid']}
+  >
+    {@html icon}
+  </span>
+{:else}
+  <span
+    class={`${iconNames[icon] || icon} ${colorClass || ''}`}
+    {title}
+    class:padLeft
+    class:padRight
+    {style}
+    on:click
+    data-testid={$$props['data-testid']}
+  />
+{/if}
 
 <style>
+  .svg-inline {
+    display: inline-block;
+    line-height: 1;
+  }
+  .svg-inline :global(svg) {
+    width: 1.125em;
+    height: 1.125em;
+    vertical-align: middle;
+    overflow: visible;
+  }
   .padLeft {
     margin-left: 0.25rem;
   }