From 06aa06c31c08aaef4908ec474205bddefec10ebb Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 20 Apr 2022 18:57:41 -0700
Subject: [PATCH] icon importing, landing page updates, vite config

---
 .vscode/settings.json                         |   1 -
 apps/desktop/package.json                     |   4 +-
 apps/desktop/vite.config.ts                   |   5 +-
 apps/landing/package.json                     |  10 +-
 apps/landing/src/App.tsx                      |  66 ++--
 apps/landing/src/assets/apple.svg             |  12 +
 apps/landing/src/assets/windows.svg           |  46 +++
 apps/web/package.json                         |   4 +-
 apps/web/vite.config.ts                       |   8 +-
 packages/interface/package.json               |   8 +-
 .../interface/scripts/generateSvgImports.mjs  |  43 +++
 .../interface/src/assets/icons/file_light.svg |   1 -
 .../src/assets/icons/folder_light_open.svg    |   3 -
 .../icons/{go_package.svg => gopackage.svg}   |   0
 packages/interface/src/assets/icons/icons.ts  | 348 ++++++++++++++++++
 packages/interface/src/assets/icons/index.ts  | 348 ++++++++++++++++++
 ...editorconfig.svg => lighteditorconfig.svg} |   0
 .../src/components/file/FileItem.tsx          |  21 +-
 .../src/components/file/FileThumb.tsx         |   3 +-
 packages/interface/src/screens/Overview.tsx   |   7 +-
 .../src/screens/settings/GeneralSettings.tsx  |   4 +
 packages/interface/src/types.d.ts             |   7 +
 packages/interface/tsconfig.json              |   3 +-
 pnpm-lock.yaml                                | Bin 185804 -> 185643 bytes
 24 files changed, 889 insertions(+), 63 deletions(-)
 create mode 100644 apps/landing/src/assets/apple.svg
 create mode 100644 apps/landing/src/assets/windows.svg
 create mode 100644 packages/interface/scripts/generateSvgImports.mjs
 delete mode 100644 packages/interface/src/assets/icons/file_light.svg
 delete mode 100644 packages/interface/src/assets/icons/folder_light_open.svg
 rename packages/interface/src/assets/icons/{go_package.svg => gopackage.svg} (100%)
 create mode 100644 packages/interface/src/assets/icons/icons.ts
 create mode 100644 packages/interface/src/assets/icons/index.ts
 rename packages/interface/src/assets/icons/{light_editorconfig.svg => lighteditorconfig.svg} (100%)
 create mode 100644 packages/interface/src/types.d.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e5cb9394b..1dbe20c96 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,6 @@
   "cSpell.words": [
     "bpfrpt",
     "creationdate",
-    "honkhonk",
     "ipfs",
     "Keepsafe",
     "pathctx",
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 0ebe60c66..4d155ee33 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -23,7 +23,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@tauri-apps/cli": "^1.0.0-rc.8",
     "@types/babel-core": "^6.25.7",
     "@types/byte-size": "^8.1.0",
@@ -38,9 +37,10 @@
     "prettier": "^2.6.2",
     "sass": "^1.50.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.1",
+    "vite": "^2.9.5",
     "vite-plugin-filter-replace": "^0.1.9",
     "vite-plugin-react-svg": "^0.2.0",
+    "vite-plugin-svgr": "^1.1.0",
     "vite-tsconfig-paths": "^3.4.1"
   }
 }
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 2bc86c870..8dfe3cf2e 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { name, version } from './package.json';
 import * as path from 'path';
-import svgr from '@honkhonk/vite-plugin-svgr';
+import svg from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,10 +10,11 @@ export default defineConfig({
     port: 8001
   },
   plugins: [
+    //@ts-ignore
     react({
       jsxRuntime: 'classic'
     }),
-    svgr()
+    svg({ svgrOptions: { icon: true } })
   ],
   root: 'src',
   publicDir: '../../packages/interface/src/assets',
diff --git a/apps/landing/package.json b/apps/landing/package.json
index be19c1deb..1e265e716 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -8,7 +8,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@sd/client": "workspace:*",
     "@sd/core": "workspace:*",
     "@sd/interface": "workspace:*",
@@ -17,18 +16,17 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-tsparticles": "^2.0.6",
-    "tsparticles": "^2.0.6",
-    "vite-plugin-react-svg": "^0.2.0",
-    "vite-plugin-svgr": "^1.1.0"
+    "tsparticles": "^2.0.6"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^1.3.1",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "tailwind": "^4.0.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-svgr": "^1.1.0",
+    "@vitejs/plugin-react": "^1.3.1"
   }
 }
diff --git a/apps/landing/src/App.tsx b/apps/landing/src/App.tsx
index 72b933411..026470c0f 100644
--- a/apps/landing/src/App.tsx
+++ b/apps/landing/src/App.tsx
@@ -3,32 +3,54 @@ import { Bubbles } from './Bubbles';
 import './index.css';
 
 import { ReactComponent as GithubLogo } from './assets/github.svg';
+import { ReactComponent as AppleLogo } from './assets/apple.svg';
 
 function App() {
   return (
-    <div className="flex flex-col items-center text-white bg-black">
-      <img src="app-logo.svg" className="z-50 w-40 pt-20" />
-      <h1 className="mt-10 text-6xl font-black">The file explorer from the future</h1>
-      <p className="mt-1 mb-10 text-lg text-gray-450">
-        Spacedrive is the first file explorer that puts the full power of the cloud in your hands.
-      </p>
-      <div className="flex flex-row space-x-4">
-        <Button variant="primary" className="mb-10">
-          Download
-        </Button>
-        <Button variant="gray" className="mb-10">
-          <GithubLogo className="inline -mt-[3px] mr-1.5" fill="white" />
-          Star on GitHub
-        </Button>
-      </div>
+    <div>
+      <div className="container z-10 flex flex-col items-center px-4 mx-auto text-white bg-black">
+        <img src="app-logo.svg" className="z-50 w-40 pt-20" />
+        <h1 className="mt-10 text-6xl font-black">The file explorer from the future</h1>
+        <p className="max-w-5xl mt-1 mb-6 text-lg text-center text-gray-450">
+          Spacedrive is the first file explorer that puts the full power of the cloud in your hands.
+        </p>
+        <div className="flex flex-row space-x-4">
+          {/* <Button className="px-2">
+          <WindowsLogo className="" fill="white" />
+        </Button> */}
+          <Button variant="primary">
+            <AppleLogo className="inline -mt-[3px] mr-1.5" fill="white" />
+            Download
+          </Button>
+          <Button variant="gray">
+            <GithubLogo className="inline -mt-[3px] mr-1.5" fill="white" />
+            Star on GitHub
+          </Button>
+        </div>
+        <p className="text-xs text-center text-gray-500 mt-7">
+          Available on macOS (Intel & Apple Silicon), Windows and Linux.
+          <br />
+          Coming soon to iOS & Android.
+        </p>
 
-      <iframe
-        className="z-50 border rounded-lg shadow-2xl border-gray-550"
-        width={1200}
-        height={600}
-        src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"
-      />
-      <div className="h-[500px]" />
+        <iframe
+          className="z-50 mt-10 border rounded-lg shadow-2xl bg-gray-850 border-gray-550"
+          width={1200}
+          height={600}
+          src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"
+        />
+        <div className="grid grid-cols-2 my-32">
+          <div className="p-10">
+            <h1 className="text-4xl font-black">See the bigger picture</h1>
+            <p className="mt-5 text-xl text-gray-450">
+              Using content addressable storage in a virtual distributed filesystem, Spacedrive
+              securely combines the storage capacity and processing power of your devices into one.
+            </p>
+          </div>
+          <div className="p-10 "></div>
+        </div>
+        <div className="h-[500px]" />
+      </div>
       <Bubbles />
     </div>
   );
diff --git a/apps/landing/src/assets/apple.svg b/apps/landing/src/assets/apple.svg
new file mode 100644
index 000000000..d62b0ae35
--- /dev/null
+++ b/apps/landing/src/assets/apple.svg
@@ -0,0 +1,12 @@
+
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="814px" height="1000px" viewBox="0 0 814 1000" enable-background="new 0 0 814 1000" xml:space="preserve">
+<path d="M788.1,340.9c-5.8,4.5-108.2,62.2-108.2,190.5c0,148.4,130.3,200.9,134.2,202.2c-0.6,3.2-20.7,71.9-68.7,141.9
+	c-42.8,61.6-87.5,123.1-155.5,123.1s-85.5-39.5-164-39.5c-76.5,0-103.7,40.8-165.9,40.8s-105.6-57-155.5-127
+	C46.7,790.7,0,663,0,541.8c0-194.4,126.4-297.5,250.8-297.5c66.1,0,121.2,43.4,162.7,43.4c39.5,0,101.1-46,176.3-46
+	C618.3,241.7,720.7,244.3,788.1,340.9z M554.1,159.4c31.1-36.9,53.1-88.1,53.1-139.3c0-7.1-0.6-14.3-1.9-20.1
+	c-50.6,1.9-110.8,33.7-147.1,75.8c-28.5,32.4-55.1,83.6-55.1,135.5c0,7.8,1.3,15.6,1.9,18.1c3.2,0.6,8.4,1.3,13.6,1.3
+	C464,230.7,521.1,200.3,554.1,159.4z"/>
+</svg>
\ No newline at end of file
diff --git a/apps/landing/src/assets/windows.svg b/apps/landing/src/assets/windows.svg
new file mode 100644
index 000000000..05142caaf
--- /dev/null
+++ b/apps/landing/src/assets/windows.svg
@@ -0,0 +1,46 @@
+
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 497.886 497.886" style="enable-background:new 0 0 497.886 497.886;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<polygon points="227.959,39.869 227.959,242.386 496.549,242.386 496.549,0 			"/>
+			<polygon points="1.336,244.746 211.172,244.746 211.172,41.818 1.336,72.798 			"/>
+			<polygon points="227.959,458.017 496.549,497.886 496.549,261.535 227.959,261.535 			"/>
+			<polygon points="1.336,425.086 211.172,456.066 211.172,261.531 1.336,261.531 			"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/apps/web/package.json b/apps/web/package.json
index f46e6b896..83170213f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,7 +18,6 @@
     "tsparticles": "^2.0.6"
   },
   "devDependencies": {
-    "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.1",
@@ -26,6 +25,7 @@
     "postcss": "^8.4.12",
     "tailwind": "^4.0.0",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "vite": "^2.9.5",
+    "vite-plugin-svgr": "^1.1.0"
   }
 }
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index dbcaec665..9e280ffcc 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,8 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { name, version } from './package.json';
-import * as path from 'path';
-import svgr from '@honkhonk/vite-plugin-svgr';
+import svg from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,12 +9,11 @@ export default defineConfig({
     port: 8002
   },
   plugins: [
-    //@ts-ignore
+    //@ts-ignore - no idea why one moment this errors, next its fine. all on same version.
     react({
       jsxRuntime: 'classic'
     }),
-    //@ts-ignore
-    svgr()
+    svg({ svgrOptions: { icon: true } })
   ],
   root: 'src',
   publicDir: '../../packages/interface/src/assets',
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 538ab1dda..106380f2b 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -4,6 +4,9 @@
   "license": "MIT",
   "private": true,
   "main": "src/index.ts",
+  "scripts": {
+    "icons": "ts-node ./scripts/generateSvgImports.mjs"
+  },
   "resolutions": {
     "react-virtualized": "patch:react-virtualized@9.22.3#./path/to/react-virtualized-9.22.3.patch"
   },
@@ -46,10 +49,10 @@
     "zustand": "^3.7.2"
   },
   "devDependencies": {
-    "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/babel-core": "^6.25.7",
     "@types/byte-size": "^8.1.0",
+    "@types/node": "^17.0.23",
     "@types/pretty-bytes": "^5.2.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -63,6 +66,7 @@
     "concurrently": "^7.1.0",
     "prettier": "^2.6.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.1"
+    "vite": "^2.9.1",
+    "vite-plugin-svgr": "^1.1.0"
   }
 }
diff --git a/packages/interface/scripts/generateSvgImports.mjs b/packages/interface/scripts/generateSvgImports.mjs
new file mode 100644
index 000000000..af04a0cdf
--- /dev/null
+++ b/packages/interface/scripts/generateSvgImports.mjs
@@ -0,0 +1,43 @@
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+(async function main() {
+  async function exists(path) {
+    try {
+      await fs.access(path);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  const files = await fs.readdir('./src/assets/icons');
+  const icons = files.filter((f) => f.endsWith('.svg'));
+  let str = '';
+
+  for (let binding of icons) {
+    let name = binding.split('.')[0];
+    str += `import { ReactComponent as ${
+      name.charAt(0).toUpperCase() + name.slice(1)
+    } } from './${name}.svg';\n`;
+  }
+  str += '\n\nexport default {\n';
+
+  for (let binding of icons) {
+    let name = binding.split('.')[0];
+    let componentName = name.charAt(0).toUpperCase() + name.slice(1);
+    str += `  ${name}: ${componentName},\n`;
+  }
+
+  str += '}\n';
+
+  let outPath = './src/assets/icons/index.ts';
+
+  let indexExists = await exists(outPath);
+
+  if (indexExists) {
+    await fs.rm(outPath);
+  }
+
+  await fs.writeFile(outPath, str);
+})();
diff --git a/packages/interface/src/assets/icons/file_light.svg b/packages/interface/src/assets/icons/file_light.svg
deleted file mode 100644
index d00f37fd3..000000000
--- a/packages/interface/src/assets/icons/file_light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1,.cls-2{opacity:0.45;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><g class="cls-1"><path d="M9.09,3l1.44,1.45L12,5.91V13H4V3H9.09m0-1H4A1,1,0,0,0,3,3V13a1,1,0,0,0,1,1h8a1,1,0,0,0,1-1V5.91a1,1,0,0,0-.29-.7C12,4.53,10.47,3,9.79,2.29A1,1,0,0,0,9.09,2Z"/></g><line class="cls-2" x1="5.5" y1="5" x2="8.5" y2="5"/><line class="cls-2" x1="5.5" y1="7.5" x2="10" y2="7.5"/><line class="cls-2" x1="5.5" y1="10" x2="10" y2="10"/></svg>
\ No newline at end of file
diff --git a/packages/interface/src/assets/icons/folder_light_open.svg b/packages/interface/src/assets/icons/folder_light_open.svg
deleted file mode 100644
index e041bb894..000000000
--- a/packages/interface/src/assets/icons/folder_light_open.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.45" d="M14 5H8.65C8.45367 5.00633 8.25983 4.9547 8.09266 4.85156C7.92549 4.74841 7.7924 4.59831 7.71 4.42L7.29 3.58C7.2076 3.40169 7.07451 3.25159 6.90734 3.14845C6.74017 3.0453 6.54633 2.99367 6.35 3H2.05C1.78478 3 1.53043 3.10536 1.34289 3.29289C1.15536 3.48043 1.05 3.73478 1.05 4V12C1.04322 12.1355 1.06406 12.2709 1.11127 12.3981C1.15848 12.5252 1.23107 12.6414 1.32461 12.7397C1.41815 12.8379 1.5307 12.916 1.6554 12.9694C1.78011 13.0227 1.91436 13.0502 2.05 13.05H14C14.1356 13.0502 14.2699 13.0227 14.3946 12.9694C14.5193 12.916 14.6318 12.8379 14.7254 12.7397C14.8189 12.6414 14.8915 12.5252 14.9387 12.3981C14.9859 12.2709 15.0068 12.1355 15 12V6.05C15.0068 5.91453 14.9859 5.7791 14.9387 5.65195C14.8915 5.52479 14.8189 5.40857 14.7254 5.31035C14.6318 5.21212 14.5193 5.13396 14.3946 5.08061C14.2699 5.02726 14.1356 4.99983 14 5ZM14 9H2V4.05H6.3L6.73 4.9C6.90627 5.25194 7.18248 5.54405 7.52401 5.73972C7.86555 5.93539 8.25724 6.02593 8.65 6H14H14.05L14 9Z" fill="black"/>
-</svg>
diff --git a/packages/interface/src/assets/icons/go_package.svg b/packages/interface/src/assets/icons/gopackage.svg
similarity index 100%
rename from packages/interface/src/assets/icons/go_package.svg
rename to packages/interface/src/assets/icons/gopackage.svg
diff --git a/packages/interface/src/assets/icons/icons.ts b/packages/interface/src/assets/icons/icons.ts
new file mode 100644
index 000000000..87579041d
--- /dev/null
+++ b/packages/interface/src/assets/icons/icons.ts
@@ -0,0 +1,348 @@
+import { ReactComponent as Ai } from './ai.svg';
+import { ReactComponent as Angular } from './angular.svg';
+import { ReactComponent as Audio } from './audio.svg';
+import { ReactComponent as Audiomp3 } from './audiomp3.svg';
+import { ReactComponent as Audioogg } from './audioogg.svg';
+import { ReactComponent as Audiowav } from './audiowav.svg';
+import { ReactComponent as Babel } from './babel.svg';
+import { ReactComponent as Bat } from './bat.svg';
+import { ReactComponent as Bicep } from './bicep.svg';
+import { ReactComponent as Binary } from './binary.svg';
+import { ReactComponent as Blade } from './blade.svg';
+import { ReactComponent as Browserslist } from './browserslist.svg';
+import { ReactComponent as Bsconfig } from './bsconfig.svg';
+import { ReactComponent as Bundler } from './bundler.svg';
+import { ReactComponent as C } from './c.svg';
+import { ReactComponent as Cert } from './cert.svg';
+import { ReactComponent as Cheader } from './cheader.svg';
+import { ReactComponent as Cli } from './cli.svg';
+import { ReactComponent as Compodoc } from './compodoc.svg';
+import { ReactComponent as Composer } from './composer.svg';
+import { ReactComponent as Conf } from './conf.svg';
+import { ReactComponent as Cpp } from './cpp.svg';
+import { ReactComponent as Csharp } from './csharp.svg';
+import { ReactComponent as Cshtml } from './cshtml.svg';
+import { ReactComponent as Css } from './css.svg';
+import { ReactComponent as Cssmap } from './cssmap.svg';
+import { ReactComponent as Csv } from './csv.svg';
+import { ReactComponent as Dartlang } from './dartlang.svg';
+import { ReactComponent as Docker } from './docker.svg';
+import { ReactComponent as Dockerdebug } from './dockerdebug.svg';
+import { ReactComponent as Dockerignore } from './dockerignore.svg';
+import { ReactComponent as Editorconfig } from './editorconfig.svg';
+import { ReactComponent as Eex } from './eex.svg';
+import { ReactComponent as Elixir } from './elixir.svg';
+import { ReactComponent as Elm } from './elm.svg';
+import { ReactComponent as Env } from './env.svg';
+import { ReactComponent as Erb } from './erb.svg';
+import { ReactComponent as Erlang } from './erlang.svg';
+import { ReactComponent as Eslint } from './eslint.svg';
+import { ReactComponent as Exs } from './exs.svg';
+import { ReactComponent as Exx } from './exx.svg';
+import { ReactComponent as File } from './file.svg';
+import { ReactComponent as Folder } from './folder.svg';
+import { ReactComponent as Folder_light } from './folder_light.svg';
+import { ReactComponent as Folder_open } from './folder_open.svg';
+import { ReactComponent as Fontotf } from './fontotf.svg';
+import { ReactComponent as Fontttf } from './fontttf.svg';
+import { ReactComponent as Fontwoff } from './fontwoff.svg';
+import { ReactComponent as Fontwoff2 } from './fontwoff2.svg';
+import { ReactComponent as Git } from './git.svg';
+import { ReactComponent as Go } from './go.svg';
+import { ReactComponent as Gopackage } from './gopackage.svg';
+import { ReactComponent as Gradle } from './gradle.svg';
+import { ReactComponent as Graphql } from './graphql.svg';
+import { ReactComponent as Groovy } from './groovy.svg';
+import { ReactComponent as Grunt } from './grunt.svg';
+import { ReactComponent as Gulp } from './gulp.svg';
+import { ReactComponent as Haml } from './haml.svg';
+import { ReactComponent as Handlebars } from './handlebars.svg';
+import { ReactComponent as Haskell } from './haskell.svg';
+import { ReactComponent as Html } from './html.svg';
+import { ReactComponent as Image } from './image.svg';
+import { ReactComponent as Imagegif } from './imagegif.svg';
+import { ReactComponent as Imageico } from './imageico.svg';
+import { ReactComponent as Imagejpg } from './imagejpg.svg';
+import { ReactComponent as Imagepng } from './imagepng.svg';
+import { ReactComponent as Imagewebp } from './imagewebp.svg';
+import { ReactComponent as Info } from './info.svg';
+import { ReactComponent as Ipynb } from './ipynb.svg';
+import { ReactComponent as Java } from './java.svg';
+import { ReactComponent as Jenkins } from './jenkins.svg';
+import { ReactComponent as Jest } from './jest.svg';
+import { ReactComponent as Jinja } from './jinja.svg';
+import { ReactComponent as Js } from './js.svg';
+import { ReactComponent as Jsmap } from './jsmap.svg';
+import { ReactComponent as Json } from './json.svg';
+import { ReactComponent as Jsp } from './jsp.svg';
+import { ReactComponent as Julia } from './julia.svg';
+import { ReactComponent as Karma } from './karma.svg';
+import { ReactComponent as Key } from './key.svg';
+import { ReactComponent as Less } from './less.svg';
+import { ReactComponent as License } from './license.svg';
+import { ReactComponent as Lighteditorconfig } from './lighteditorconfig.svg';
+import { ReactComponent as Liquid } from './liquid.svg';
+import { ReactComponent as Llvm } from './llvm.svg';
+import { ReactComponent as Log } from './log.svg';
+import { ReactComponent as Lua } from './lua.svg';
+import { ReactComponent as M } from './m.svg';
+import { ReactComponent as Markdown } from './markdown.svg';
+import { ReactComponent as Mint } from './mint.svg';
+import { ReactComponent as Mov } from './mov.svg';
+import { ReactComponent as Mp4 } from './mp4.svg';
+import { ReactComponent as Nestjs } from './nestjs.svg';
+import { ReactComponent as Nestjscontroller } from './nestjscontroller.svg';
+import { ReactComponent as Nestjsdecorator } from './nestjsdecorator.svg';
+import { ReactComponent as Nestjsfilter } from './nestjsfilter.svg';
+import { ReactComponent as Nestjsguard } from './nestjsguard.svg';
+import { ReactComponent as Nestjsmodule } from './nestjsmodule.svg';
+import { ReactComponent as Nestjsservice } from './nestjsservice.svg';
+import { ReactComponent as Netlify } from './netlify.svg';
+import { ReactComponent as Nginx } from './nginx.svg';
+import { ReactComponent as Nim } from './nim.svg';
+import { ReactComponent as Njk } from './njk.svg';
+import { ReactComponent as Nodemon } from './nodemon.svg';
+import { ReactComponent as Npm } from './npm.svg';
+import { ReactComponent as Npmlock } from './npmlock.svg';
+import { ReactComponent as Nuxt } from './nuxt.svg';
+import { ReactComponent as Nvm } from './nvm.svg';
+import { ReactComponent as Opengl } from './opengl.svg';
+import { ReactComponent as Pdf } from './pdf.svg';
+import { ReactComponent as Photoshop } from './photoshop.svg';
+import { ReactComponent as Php } from './php.svg';
+import { ReactComponent as Postcssconfig } from './postcssconfig.svg';
+import { ReactComponent as Powershell } from './powershell.svg';
+import { ReactComponent as Powershelldata } from './powershelldata.svg';
+import { ReactComponent as Powershellmodule } from './powershellmodule.svg';
+import { ReactComponent as Prettier } from './prettier.svg';
+import { ReactComponent as Prisma } from './prisma.svg';
+import { ReactComponent as Prolog } from './prolog.svg';
+import { ReactComponent as Pug } from './pug.svg';
+import { ReactComponent as Python } from './python.svg';
+import { ReactComponent as Qt } from './qt.svg';
+import { ReactComponent as Razor } from './razor.svg';
+import { ReactComponent as Reactjs } from './reactjs.svg';
+import { ReactComponent as Reactts } from './reactts.svg';
+import { ReactComponent as Readme } from './readme.svg';
+import { ReactComponent as Rescript } from './rescript.svg';
+import { ReactComponent as Rjson } from './rjson.svg';
+import { ReactComponent as Robots } from './robots.svg';
+import { ReactComponent as Rollup } from './rollup.svg';
+import { ReactComponent as Ruby } from './ruby.svg';
+import { ReactComponent as Rust } from './rust.svg';
+import { ReactComponent as Sass } from './sass.svg';
+import { ReactComponent as Scss } from './scss.svg';
+import { ReactComponent as Shell } from './shell.svg';
+import { ReactComponent as Smarty } from './smarty.svg';
+import { ReactComponent as Sol } from './sol.svg';
+import { ReactComponent as Sql } from './sql.svg';
+import { ReactComponent as Storybook } from './storybook.svg';
+import { ReactComponent as Stylelint } from './stylelint.svg';
+import { ReactComponent as Stylus } from './stylus.svg';
+import { ReactComponent as Svelte } from './svelte.svg';
+import { ReactComponent as Svg } from './svg.svg';
+import { ReactComponent as Swift } from './swift.svg';
+import { ReactComponent as Symfony } from './symfony.svg';
+import { ReactComponent as Tailwind } from './tailwind.svg';
+import { ReactComponent as Testjs } from './testjs.svg';
+import { ReactComponent as Testts } from './testts.svg';
+import { ReactComponent as Tmpl } from './tmpl.svg';
+import { ReactComponent as Toml } from './toml.svg';
+import { ReactComponent as Travis } from './travis.svg';
+import { ReactComponent as Tsconfig } from './tsconfig.svg';
+import { ReactComponent as Tsx } from './tsx.svg';
+import { ReactComponent as Twig } from './twig.svg';
+import { ReactComponent as Txt } from './txt.svg';
+import { ReactComponent as Typescript } from './typescript.svg';
+import { ReactComponent as Typescriptdef } from './typescriptdef.svg';
+import { ReactComponent as Ui } from './ui.svg';
+import { ReactComponent as User } from './user.svg';
+import { ReactComponent as Vercel } from './vercel.svg';
+import { ReactComponent as Video } from './video.svg';
+import { ReactComponent as Vite } from './vite.svg';
+import { ReactComponent as Vscode } from './vscode.svg';
+import { ReactComponent as Vue } from './vue.svg';
+import { ReactComponent as Wasm } from './wasm.svg';
+import { ReactComponent as Webpack } from './webpack.svg';
+import { ReactComponent as Windi } from './windi.svg';
+import { ReactComponent as Xml } from './xml.svg';
+import { ReactComponent as Yaml } from './yaml.svg';
+import { ReactComponent as Yarn } from './yarn.svg';
+import { ReactComponent as Yarnerror } from './yarnerror.svg';
+import { ReactComponent as Zip } from './zip.svg';
+
+
+export default {
+  ai: Ai,
+  angular: Angular,
+  audio: Audio,
+  audiomp3: Audiomp3,
+  audioogg: Audioogg,
+  audiowav: Audiowav,
+  babel: Babel,
+  bat: Bat,
+  bicep: Bicep,
+  binary: Binary,
+  blade: Blade,
+  browserslist: Browserslist,
+  bsconfig: Bsconfig,
+  bundler: Bundler,
+  c: C,
+  cert: Cert,
+  cheader: Cheader,
+  cli: Cli,
+  compodoc: Compodoc,
+  composer: Composer,
+  conf: Conf,
+  cpp: Cpp,
+  csharp: Csharp,
+  cshtml: Cshtml,
+  css: Css,
+  cssmap: Cssmap,
+  csv: Csv,
+  dartlang: Dartlang,
+  docker: Docker,
+  dockerdebug: Dockerdebug,
+  dockerignore: Dockerignore,
+  editorconfig: Editorconfig,
+  eex: Eex,
+  elixir: Elixir,
+  elm: Elm,
+  env: Env,
+  erb: Erb,
+  erlang: Erlang,
+  eslint: Eslint,
+  exs: Exs,
+  exx: Exx,
+  file: File,
+  folder: Folder,
+  folder_light: Folder_light,
+  folder_open: Folder_open,
+  fontotf: Fontotf,
+  fontttf: Fontttf,
+  fontwoff: Fontwoff,
+  fontwoff2: Fontwoff2,
+  git: Git,
+  go: Go,
+  gopackage: Gopackage,
+  gradle: Gradle,
+  graphql: Graphql,
+  groovy: Groovy,
+  grunt: Grunt,
+  gulp: Gulp,
+  haml: Haml,
+  handlebars: Handlebars,
+  haskell: Haskell,
+  html: Html,
+  image: Image,
+  imagegif: Imagegif,
+  imageico: Imageico,
+  imagejpg: Imagejpg,
+  imagepng: Imagepng,
+  imagewebp: Imagewebp,
+  info: Info,
+  ipynb: Ipynb,
+  java: Java,
+  jenkins: Jenkins,
+  jest: Jest,
+  jinja: Jinja,
+  js: Js,
+  jsmap: Jsmap,
+  json: Json,
+  jsp: Jsp,
+  julia: Julia,
+  karma: Karma,
+  key: Key,
+  less: Less,
+  license: License,
+  lighteditorconfig: Lighteditorconfig,
+  liquid: Liquid,
+  llvm: Llvm,
+  log: Log,
+  lua: Lua,
+  m: M,
+  markdown: Markdown,
+  mint: Mint,
+  mov: Mov,
+  mp4: Mp4,
+  nestjs: Nestjs,
+  nestjscontroller: Nestjscontroller,
+  nestjsdecorator: Nestjsdecorator,
+  nestjsfilter: Nestjsfilter,
+  nestjsguard: Nestjsguard,
+  nestjsmodule: Nestjsmodule,
+  nestjsservice: Nestjsservice,
+  netlify: Netlify,
+  nginx: Nginx,
+  nim: Nim,
+  njk: Njk,
+  nodemon: Nodemon,
+  npm: Npm,
+  npmlock: Npmlock,
+  nuxt: Nuxt,
+  nvm: Nvm,
+  opengl: Opengl,
+  pdf: Pdf,
+  photoshop: Photoshop,
+  php: Php,
+  postcssconfig: Postcssconfig,
+  powershell: Powershell,
+  powershelldata: Powershelldata,
+  powershellmodule: Powershellmodule,
+  prettier: Prettier,
+  prisma: Prisma,
+  prolog: Prolog,
+  pug: Pug,
+  python: Python,
+  qt: Qt,
+  razor: Razor,
+  reactjs: Reactjs,
+  reactts: Reactts,
+  readme: Readme,
+  rescript: Rescript,
+  rjson: Rjson,
+  robots: Robots,
+  rollup: Rollup,
+  ruby: Ruby,
+  rust: Rust,
+  sass: Sass,
+  scss: Scss,
+  shell: Shell,
+  smarty: Smarty,
+  sol: Sol,
+  sql: Sql,
+  storybook: Storybook,
+  stylelint: Stylelint,
+  stylus: Stylus,
+  svelte: Svelte,
+  svg: Svg,
+  swift: Swift,
+  symfony: Symfony,
+  tailwind: Tailwind,
+  testjs: Testjs,
+  testts: Testts,
+  tmpl: Tmpl,
+  toml: Toml,
+  travis: Travis,
+  tsconfig: Tsconfig,
+  tsx: Tsx,
+  twig: Twig,
+  txt: Txt,
+  typescript: Typescript,
+  typescriptdef: Typescriptdef,
+  ui: Ui,
+  user: User,
+  vercel: Vercel,
+  video: Video,
+  vite: Vite,
+  vscode: Vscode,
+  vue: Vue,
+  wasm: Wasm,
+  webpack: Webpack,
+  windi: Windi,
+  xml: Xml,
+  yaml: Yaml,
+  yarn: Yarn,
+  yarnerror: Yarnerror,
+  zip: Zip,
+}
diff --git a/packages/interface/src/assets/icons/index.ts b/packages/interface/src/assets/icons/index.ts
new file mode 100644
index 000000000..87579041d
--- /dev/null
+++ b/packages/interface/src/assets/icons/index.ts
@@ -0,0 +1,348 @@
+import { ReactComponent as Ai } from './ai.svg';
+import { ReactComponent as Angular } from './angular.svg';
+import { ReactComponent as Audio } from './audio.svg';
+import { ReactComponent as Audiomp3 } from './audiomp3.svg';
+import { ReactComponent as Audioogg } from './audioogg.svg';
+import { ReactComponent as Audiowav } from './audiowav.svg';
+import { ReactComponent as Babel } from './babel.svg';
+import { ReactComponent as Bat } from './bat.svg';
+import { ReactComponent as Bicep } from './bicep.svg';
+import { ReactComponent as Binary } from './binary.svg';
+import { ReactComponent as Blade } from './blade.svg';
+import { ReactComponent as Browserslist } from './browserslist.svg';
+import { ReactComponent as Bsconfig } from './bsconfig.svg';
+import { ReactComponent as Bundler } from './bundler.svg';
+import { ReactComponent as C } from './c.svg';
+import { ReactComponent as Cert } from './cert.svg';
+import { ReactComponent as Cheader } from './cheader.svg';
+import { ReactComponent as Cli } from './cli.svg';
+import { ReactComponent as Compodoc } from './compodoc.svg';
+import { ReactComponent as Composer } from './composer.svg';
+import { ReactComponent as Conf } from './conf.svg';
+import { ReactComponent as Cpp } from './cpp.svg';
+import { ReactComponent as Csharp } from './csharp.svg';
+import { ReactComponent as Cshtml } from './cshtml.svg';
+import { ReactComponent as Css } from './css.svg';
+import { ReactComponent as Cssmap } from './cssmap.svg';
+import { ReactComponent as Csv } from './csv.svg';
+import { ReactComponent as Dartlang } from './dartlang.svg';
+import { ReactComponent as Docker } from './docker.svg';
+import { ReactComponent as Dockerdebug } from './dockerdebug.svg';
+import { ReactComponent as Dockerignore } from './dockerignore.svg';
+import { ReactComponent as Editorconfig } from './editorconfig.svg';
+import { ReactComponent as Eex } from './eex.svg';
+import { ReactComponent as Elixir } from './elixir.svg';
+import { ReactComponent as Elm } from './elm.svg';
+import { ReactComponent as Env } from './env.svg';
+import { ReactComponent as Erb } from './erb.svg';
+import { ReactComponent as Erlang } from './erlang.svg';
+import { ReactComponent as Eslint } from './eslint.svg';
+import { ReactComponent as Exs } from './exs.svg';
+import { ReactComponent as Exx } from './exx.svg';
+import { ReactComponent as File } from './file.svg';
+import { ReactComponent as Folder } from './folder.svg';
+import { ReactComponent as Folder_light } from './folder_light.svg';
+import { ReactComponent as Folder_open } from './folder_open.svg';
+import { ReactComponent as Fontotf } from './fontotf.svg';
+import { ReactComponent as Fontttf } from './fontttf.svg';
+import { ReactComponent as Fontwoff } from './fontwoff.svg';
+import { ReactComponent as Fontwoff2 } from './fontwoff2.svg';
+import { ReactComponent as Git } from './git.svg';
+import { ReactComponent as Go } from './go.svg';
+import { ReactComponent as Gopackage } from './gopackage.svg';
+import { ReactComponent as Gradle } from './gradle.svg';
+import { ReactComponent as Graphql } from './graphql.svg';
+import { ReactComponent as Groovy } from './groovy.svg';
+import { ReactComponent as Grunt } from './grunt.svg';
+import { ReactComponent as Gulp } from './gulp.svg';
+import { ReactComponent as Haml } from './haml.svg';
+import { ReactComponent as Handlebars } from './handlebars.svg';
+import { ReactComponent as Haskell } from './haskell.svg';
+import { ReactComponent as Html } from './html.svg';
+import { ReactComponent as Image } from './image.svg';
+import { ReactComponent as Imagegif } from './imagegif.svg';
+import { ReactComponent as Imageico } from './imageico.svg';
+import { ReactComponent as Imagejpg } from './imagejpg.svg';
+import { ReactComponent as Imagepng } from './imagepng.svg';
+import { ReactComponent as Imagewebp } from './imagewebp.svg';
+import { ReactComponent as Info } from './info.svg';
+import { ReactComponent as Ipynb } from './ipynb.svg';
+import { ReactComponent as Java } from './java.svg';
+import { ReactComponent as Jenkins } from './jenkins.svg';
+import { ReactComponent as Jest } from './jest.svg';
+import { ReactComponent as Jinja } from './jinja.svg';
+import { ReactComponent as Js } from './js.svg';
+import { ReactComponent as Jsmap } from './jsmap.svg';
+import { ReactComponent as Json } from './json.svg';
+import { ReactComponent as Jsp } from './jsp.svg';
+import { ReactComponent as Julia } from './julia.svg';
+import { ReactComponent as Karma } from './karma.svg';
+import { ReactComponent as Key } from './key.svg';
+import { ReactComponent as Less } from './less.svg';
+import { ReactComponent as License } from './license.svg';
+import { ReactComponent as Lighteditorconfig } from './lighteditorconfig.svg';
+import { ReactComponent as Liquid } from './liquid.svg';
+import { ReactComponent as Llvm } from './llvm.svg';
+import { ReactComponent as Log } from './log.svg';
+import { ReactComponent as Lua } from './lua.svg';
+import { ReactComponent as M } from './m.svg';
+import { ReactComponent as Markdown } from './markdown.svg';
+import { ReactComponent as Mint } from './mint.svg';
+import { ReactComponent as Mov } from './mov.svg';
+import { ReactComponent as Mp4 } from './mp4.svg';
+import { ReactComponent as Nestjs } from './nestjs.svg';
+import { ReactComponent as Nestjscontroller } from './nestjscontroller.svg';
+import { ReactComponent as Nestjsdecorator } from './nestjsdecorator.svg';
+import { ReactComponent as Nestjsfilter } from './nestjsfilter.svg';
+import { ReactComponent as Nestjsguard } from './nestjsguard.svg';
+import { ReactComponent as Nestjsmodule } from './nestjsmodule.svg';
+import { ReactComponent as Nestjsservice } from './nestjsservice.svg';
+import { ReactComponent as Netlify } from './netlify.svg';
+import { ReactComponent as Nginx } from './nginx.svg';
+import { ReactComponent as Nim } from './nim.svg';
+import { ReactComponent as Njk } from './njk.svg';
+import { ReactComponent as Nodemon } from './nodemon.svg';
+import { ReactComponent as Npm } from './npm.svg';
+import { ReactComponent as Npmlock } from './npmlock.svg';
+import { ReactComponent as Nuxt } from './nuxt.svg';
+import { ReactComponent as Nvm } from './nvm.svg';
+import { ReactComponent as Opengl } from './opengl.svg';
+import { ReactComponent as Pdf } from './pdf.svg';
+import { ReactComponent as Photoshop } from './photoshop.svg';
+import { ReactComponent as Php } from './php.svg';
+import { ReactComponent as Postcssconfig } from './postcssconfig.svg';
+import { ReactComponent as Powershell } from './powershell.svg';
+import { ReactComponent as Powershelldata } from './powershelldata.svg';
+import { ReactComponent as Powershellmodule } from './powershellmodule.svg';
+import { ReactComponent as Prettier } from './prettier.svg';
+import { ReactComponent as Prisma } from './prisma.svg';
+import { ReactComponent as Prolog } from './prolog.svg';
+import { ReactComponent as Pug } from './pug.svg';
+import { ReactComponent as Python } from './python.svg';
+import { ReactComponent as Qt } from './qt.svg';
+import { ReactComponent as Razor } from './razor.svg';
+import { ReactComponent as Reactjs } from './reactjs.svg';
+import { ReactComponent as Reactts } from './reactts.svg';
+import { ReactComponent as Readme } from './readme.svg';
+import { ReactComponent as Rescript } from './rescript.svg';
+import { ReactComponent as Rjson } from './rjson.svg';
+import { ReactComponent as Robots } from './robots.svg';
+import { ReactComponent as Rollup } from './rollup.svg';
+import { ReactComponent as Ruby } from './ruby.svg';
+import { ReactComponent as Rust } from './rust.svg';
+import { ReactComponent as Sass } from './sass.svg';
+import { ReactComponent as Scss } from './scss.svg';
+import { ReactComponent as Shell } from './shell.svg';
+import { ReactComponent as Smarty } from './smarty.svg';
+import { ReactComponent as Sol } from './sol.svg';
+import { ReactComponent as Sql } from './sql.svg';
+import { ReactComponent as Storybook } from './storybook.svg';
+import { ReactComponent as Stylelint } from './stylelint.svg';
+import { ReactComponent as Stylus } from './stylus.svg';
+import { ReactComponent as Svelte } from './svelte.svg';
+import { ReactComponent as Svg } from './svg.svg';
+import { ReactComponent as Swift } from './swift.svg';
+import { ReactComponent as Symfony } from './symfony.svg';
+import { ReactComponent as Tailwind } from './tailwind.svg';
+import { ReactComponent as Testjs } from './testjs.svg';
+import { ReactComponent as Testts } from './testts.svg';
+import { ReactComponent as Tmpl } from './tmpl.svg';
+import { ReactComponent as Toml } from './toml.svg';
+import { ReactComponent as Travis } from './travis.svg';
+import { ReactComponent as Tsconfig } from './tsconfig.svg';
+import { ReactComponent as Tsx } from './tsx.svg';
+import { ReactComponent as Twig } from './twig.svg';
+import { ReactComponent as Txt } from './txt.svg';
+import { ReactComponent as Typescript } from './typescript.svg';
+import { ReactComponent as Typescriptdef } from './typescriptdef.svg';
+import { ReactComponent as Ui } from './ui.svg';
+import { ReactComponent as User } from './user.svg';
+import { ReactComponent as Vercel } from './vercel.svg';
+import { ReactComponent as Video } from './video.svg';
+import { ReactComponent as Vite } from './vite.svg';
+import { ReactComponent as Vscode } from './vscode.svg';
+import { ReactComponent as Vue } from './vue.svg';
+import { ReactComponent as Wasm } from './wasm.svg';
+import { ReactComponent as Webpack } from './webpack.svg';
+import { ReactComponent as Windi } from './windi.svg';
+import { ReactComponent as Xml } from './xml.svg';
+import { ReactComponent as Yaml } from './yaml.svg';
+import { ReactComponent as Yarn } from './yarn.svg';
+import { ReactComponent as Yarnerror } from './yarnerror.svg';
+import { ReactComponent as Zip } from './zip.svg';
+
+
+export default {
+  ai: Ai,
+  angular: Angular,
+  audio: Audio,
+  audiomp3: Audiomp3,
+  audioogg: Audioogg,
+  audiowav: Audiowav,
+  babel: Babel,
+  bat: Bat,
+  bicep: Bicep,
+  binary: Binary,
+  blade: Blade,
+  browserslist: Browserslist,
+  bsconfig: Bsconfig,
+  bundler: Bundler,
+  c: C,
+  cert: Cert,
+  cheader: Cheader,
+  cli: Cli,
+  compodoc: Compodoc,
+  composer: Composer,
+  conf: Conf,
+  cpp: Cpp,
+  csharp: Csharp,
+  cshtml: Cshtml,
+  css: Css,
+  cssmap: Cssmap,
+  csv: Csv,
+  dartlang: Dartlang,
+  docker: Docker,
+  dockerdebug: Dockerdebug,
+  dockerignore: Dockerignore,
+  editorconfig: Editorconfig,
+  eex: Eex,
+  elixir: Elixir,
+  elm: Elm,
+  env: Env,
+  erb: Erb,
+  erlang: Erlang,
+  eslint: Eslint,
+  exs: Exs,
+  exx: Exx,
+  file: File,
+  folder: Folder,
+  folder_light: Folder_light,
+  folder_open: Folder_open,
+  fontotf: Fontotf,
+  fontttf: Fontttf,
+  fontwoff: Fontwoff,
+  fontwoff2: Fontwoff2,
+  git: Git,
+  go: Go,
+  gopackage: Gopackage,
+  gradle: Gradle,
+  graphql: Graphql,
+  groovy: Groovy,
+  grunt: Grunt,
+  gulp: Gulp,
+  haml: Haml,
+  handlebars: Handlebars,
+  haskell: Haskell,
+  html: Html,
+  image: Image,
+  imagegif: Imagegif,
+  imageico: Imageico,
+  imagejpg: Imagejpg,
+  imagepng: Imagepng,
+  imagewebp: Imagewebp,
+  info: Info,
+  ipynb: Ipynb,
+  java: Java,
+  jenkins: Jenkins,
+  jest: Jest,
+  jinja: Jinja,
+  js: Js,
+  jsmap: Jsmap,
+  json: Json,
+  jsp: Jsp,
+  julia: Julia,
+  karma: Karma,
+  key: Key,
+  less: Less,
+  license: License,
+  lighteditorconfig: Lighteditorconfig,
+  liquid: Liquid,
+  llvm: Llvm,
+  log: Log,
+  lua: Lua,
+  m: M,
+  markdown: Markdown,
+  mint: Mint,
+  mov: Mov,
+  mp4: Mp4,
+  nestjs: Nestjs,
+  nestjscontroller: Nestjscontroller,
+  nestjsdecorator: Nestjsdecorator,
+  nestjsfilter: Nestjsfilter,
+  nestjsguard: Nestjsguard,
+  nestjsmodule: Nestjsmodule,
+  nestjsservice: Nestjsservice,
+  netlify: Netlify,
+  nginx: Nginx,
+  nim: Nim,
+  njk: Njk,
+  nodemon: Nodemon,
+  npm: Npm,
+  npmlock: Npmlock,
+  nuxt: Nuxt,
+  nvm: Nvm,
+  opengl: Opengl,
+  pdf: Pdf,
+  photoshop: Photoshop,
+  php: Php,
+  postcssconfig: Postcssconfig,
+  powershell: Powershell,
+  powershelldata: Powershelldata,
+  powershellmodule: Powershellmodule,
+  prettier: Prettier,
+  prisma: Prisma,
+  prolog: Prolog,
+  pug: Pug,
+  python: Python,
+  qt: Qt,
+  razor: Razor,
+  reactjs: Reactjs,
+  reactts: Reactts,
+  readme: Readme,
+  rescript: Rescript,
+  rjson: Rjson,
+  robots: Robots,
+  rollup: Rollup,
+  ruby: Ruby,
+  rust: Rust,
+  sass: Sass,
+  scss: Scss,
+  shell: Shell,
+  smarty: Smarty,
+  sol: Sol,
+  sql: Sql,
+  storybook: Storybook,
+  stylelint: Stylelint,
+  stylus: Stylus,
+  svelte: Svelte,
+  svg: Svg,
+  swift: Swift,
+  symfony: Symfony,
+  tailwind: Tailwind,
+  testjs: Testjs,
+  testts: Testts,
+  tmpl: Tmpl,
+  toml: Toml,
+  travis: Travis,
+  tsconfig: Tsconfig,
+  tsx: Tsx,
+  twig: Twig,
+  txt: Txt,
+  typescript: Typescript,
+  typescriptdef: Typescriptdef,
+  ui: Ui,
+  user: User,
+  vercel: Vercel,
+  video: Video,
+  vite: Vite,
+  vscode: Vscode,
+  vue: Vue,
+  wasm: Wasm,
+  webpack: Webpack,
+  windi: Windi,
+  xml: Xml,
+  yaml: Yaml,
+  yarn: Yarn,
+  yarnerror: Yarnerror,
+  zip: Zip,
+}
diff --git a/packages/interface/src/assets/icons/light_editorconfig.svg b/packages/interface/src/assets/icons/lighteditorconfig.svg
similarity index 100%
rename from packages/interface/src/assets/icons/light_editorconfig.svg
rename to packages/interface/src/assets/icons/lighteditorconfig.svg
diff --git a/packages/interface/src/components/file/FileItem.tsx b/packages/interface/src/components/file/FileItem.tsx
index 576f6b80c..a372a37cb 100644
--- a/packages/interface/src/components/file/FileItem.tsx
+++ b/packages/interface/src/components/file/FileItem.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 import { DefaultProps } from '../primitive/types';
 
-import Folder from '../../assets/svg/folder.svg?component';
+import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import icons from '../../assets/icons';
 
 interface Props extends DefaultProps {
   fileName: string;
@@ -66,12 +67,18 @@ export default function FileItem(props: Props) {
               <path d="M41.4116 40.5577H11.234C5.02962 40.5577 0 35.5281 0 29.3238V0L41.4116 40.5577Z" />
             </svg>
             <div className="absolute flex flex-col items-center justify-center w-full h-full">
-              <img
-                className="mt-2 pointer-events-none margin-auto"
-                width={40}
-                height={40}
-                src={`/icons/${props.iconName}.svg`}
-              />
+              {/* @ts-ignore */}
+              {props.iconName && icons[props.iconName] ? (
+                (() => {
+                  // @ts-ignore
+                  let Icon = icons[props.iconName];
+                  return (
+                    <Icon className="mt-2 pointer-events-none margin-auto w-[40px] h-[40px]" />
+                  );
+                })()
+              ) : (
+                <></>
+              )}
               <span className="mt-1 text-xs font-bold text-center uppercase cursor-default text-gray-450">
                 {props.format}
               </span>
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index a1d160a71..1c6485942 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -1,11 +1,10 @@
 import { useBridgeQuery } from '@sd/client';
 import { FilePath } from '@sd/core';
-
 import clsx from 'clsx';
 import React, { useContext } from 'react';
 import { AppPropsContext } from '../../App';
 
-import Folder from '../../assets/svg/folder.svg?component';
+import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
 
 export default function FileThumb(props: {
   file: FilePath;
diff --git a/packages/interface/src/screens/Overview.tsx b/packages/interface/src/screens/Overview.tsx
index 7778d818b..060564e01 100644
--- a/packages/interface/src/screens/Overview.tsx
+++ b/packages/interface/src/screens/Overview.tsx
@@ -121,12 +121,7 @@ export const OverviewScreen: React.FC<{}> = (props) => {
           />
         </div>
         <hr className="my-5 border-gray-50 dark:border-gray-600" />
-        <p className="px-5 py-3 mb-3 text-gray-400 rounded-md bg-gray-50 dark:text-gray-500 dark:bg-gray-600">
-          <b>Note: </b>This is a pre-alpha build of Spacedrive, an open source personal cloud
-          powered by your daily devices. Under the hood, a secure Rust based virtual filesystem
-          synchronized cross-platform in realtime. Enjoy this barely functional UI while pre-alpha
-          is still in progress.
-        </p>
+
         {/* <hr className="my-5 dark:border-gray-600" /> */}
       </div>
     </div>
diff --git a/packages/interface/src/screens/settings/GeneralSettings.tsx b/packages/interface/src/screens/settings/GeneralSettings.tsx
index 8742ce1ce..5e4b1b73b 100644
--- a/packages/interface/src/screens/settings/GeneralSettings.tsx
+++ b/packages/interface/src/screens/settings/GeneralSettings.tsx
@@ -26,6 +26,10 @@ export default function GeneralSettings() {
         <p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
         {/* <hr className="mt-4 border-gray-550" /> */}
       </div>
+      <p className="px-5 py-3 mb-3 text-gray-400 rounded-md bg-gray-50 dark:text-gray-400 dark:bg-gray-600">
+        <b>Note: </b>This is a pre-alpha build of Spacedrive, many features are yet to be
+        functional.
+      </p>
       <div className="flex flex-row pb-4 space-x-2">
         <Button className="w-40" variant="gray" size="sm" onClick={() => {}}>
           Open data folder
diff --git a/packages/interface/src/types.d.ts b/packages/interface/src/types.d.ts
new file mode 100644
index 000000000..6326494cf
--- /dev/null
+++ b/packages/interface/src/types.d.ts
@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+}
diff --git a/packages/interface/tsconfig.json b/packages/interface/tsconfig.json
index a4ca59446..2313dd98d 100644
--- a/packages/interface/tsconfig.json
+++ b/packages/interface/tsconfig.json
@@ -16,12 +16,11 @@
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true,
-    "types": [ "@honkhonk/vite-plugin-svgr/client" ],
     "baseUrl": "./",
     "paths": {
       "@sd/ui": ["../ui/src/index.ts"],
       "@sd/client": ["../client/src/index.ts"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "scripts"],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81f57f14db19cf0002d1a6405aa4c7c4b3565606..de5af8c8a97e5a62c020397397419fe3c4daf1fb 100644
GIT binary patch
delta 1282
zcmai!e@xV69LM+h+;PX<eUCf7cVY}XepF7NgFAkM<3gJQj49|M%cwI?U>WHu-P+vz
z!#1}LiTN2ln{zC;S_&(a2Y52aAqZYaE|z8HW_2!G18iaix;97O?-${&zxwa9_w#<g
zp3n1nzR&kcucf!g(ix#_z0?ogNQ)*XwHoa-rYj+j`7wS^_X5zFACq`6VHlv8YK^<d
zBIVOP-D(OOZHjW;n4_kT!&_`;7TU;@w4bs~Gn6hFsM4HCQHP$~`cKJc`Gii|Q|W^_
z2R*ch$tq=&+qzfH@+oU4P_pFwPawnI6>sL_$@g`%KE=l8SA7VyMK&hB;w{bd<P{Xs
zPgyR0Vm0UqWjEE?tkkV@K5D?i$J3mKjMvJ_y@e%3C7x1mQCVTZ?m%Fd*BkKeDGwBv
z2E5J9G@DsP{;YO|yNch=It&z$YbecX2QNv|I{x01@Dy!}I%r3Yi=VCy8mYcOPp9W>
zieP1TLg?T-8p2LK(Ry<u+cJeR4V`z;-5!}w_PT&}M$IJ7%QQFQq}0z&#T=>->GjbQ
zpWlizS!l5@nJW7}iZ@#LVqbm?<sVL?=5ui<Md0QA=`n|IK&GQS#^AmIPi!?f*dL<@
z2W8$ow9@DrvWM(+L9EapR|S6Tixv9hayFNr{c<VCZ(MjE>Ek&EZw+<m)YEVndlo2T
z(nR}O%)Ite6Q~898=qaC9zQi<2KI9un)u-5Losj3SAS_<UNo5i>_9}B=Ns1~Ui-D)
zMP2i$ls{wREz{dGl`D}&$P8^s^tWFY`Ki!p(mE5DvS8N8zQ2O9=+A*$vJ#UStAu~l
z2<!5}ytc?Xo`FA>s>4-qh6Q{|;OPx;0yOmGM!2bGZAEBe(QRlFJ=KtwsGLz|k*z=)
z(_jCnxL*&~mo~iG04aKH@y_!wz}kFjvJuKNnEx9vFjoL2@%us8Ud^u6Dcku%Q0UO?
z2fl@4Y9S0)A!1}=6lC$;4M;ar%8V=)eubF?mNA5SYK$g{+tV;DS#sZb+x_Ogz@93v
zhd~2mi$53Ob)emHsd)JTgv?#PDGZkm4HX)AT_rY}R}N$rN2>84sIy}aYcQx;+G}yE
zRjYn!#7(I7=n&a2;t#t2eMM|TJFXRFO?U`xagF6E&r}S&iVrqxw{*4#g+&|h-XRnT
zY+*zRRfKRouy@C>n01d}p7NoX*xg~2sH4TnHjm<3w&o&^kh|r%Ww}CCE~=52SnepM
sFLCydVxsb+5{i5rMN=4akWG!D35uCCfnISWjF*Aw!q^~=MsSn#FOM+(5C8xG

delta 1504
zcmc&!Sxi({7|wr&VTPGu1_oqOhO$<xP)26hgene;tcGo5k<=0}hyznL0im@C_Q6(@
zrodl3X=6}h9|*{Lf=3*dfl|Pvw!Ro!HH2VXT3dv)me#hkv$VxN*xIK)+>`&F?|jSs
z?|*MkxAfB<Y3t>{gVj})wrgvnvA!&{#?(-5tO`BUSYG#HtpBT8jaCyjXki5JdVAvA
zf@JoMARAu#Cyt#`Y!lP#G%*@2PF_>7bm16)7R90x>$)KD!G4j#T1|+8pTVCkh?W5d
z1d(`L?&bY-Z#*h`u5DJ1J@V6dN9=|}k`9~^$gNB%7K!3;M)4i)msLK4W1D3IyCG`@
zjIyZM8Tn557gv0&aK-FEF@E;7Gd4>n*`nL3!1w7%ZJov1lU|rz<Baoa7q;U0F0fNx
zZcg}tOOUlOSCm>7t-dexC~2s#uBj_KU~DR@(`&;t5t<0x8KD1fZ=f-t15bG=Saje)
zz!7(M+$?ir{x85rY)x0<`D_WxNNX2iT)Y&eSpiIyWAPOK8J>PQMpE*Nwr1o;M&wnS
znoBZsO{KX7Rdt1>;fW!-!g^Db(UjVl6u!T#x^_=~epF1>p~LkRhLobDvID89nHeF5
zoIFE9>E4{`FjIP#u3~q&u_i1hp=q}^9?!nvFR@LEwI4c7Bo0PBkA9bgR53<8=(TZ@
z=c4~B#+HfyC5F@y&o;@CSfbm(u9w|PV3S=bfD^Atai&X&Yuy_#ruz&|cB$A}clbJ>
z>GeV5c?Y2Bja>(BTvFrdzOyz4T5HzQ@3#(`2Zro`c|gfN8uVQU=7$`>{E(8(vL}ER
zvp1@T9dg#1{XG1HT#H$PdfsQ3bkuSda?!zNhLIBlGe=a6j2;o#9*Dg&kqFrTqma#8
z_5rFZrMPSA0qUm$u=wL8x_p^PSpM`8`w=Xdc4Ln|xotnj7H5UP9?g0B;?g~DJl3>{
z72FFA;O%0lm2-C$yzj!9KRguifz5D7Nzc6uYqWnm{6sJ8fE79%2fe&zCv*b$iH8NJ
zlgr@5<;kEH)96f~^p<Tongus`MK*Xl(e^!Xk^Zs*5^l(Y7=Qj@0~Dn2-$o(YgC<>t
zHh%jmToLi{FCa+5A1=a@kUzK&-^%FnDs1GkAD{ww?<$N-crziASl+gs6iMu+zb2Ez
zK;KFw?{U90VsPax`6P|->xJZ|!1ZrmBkhzy2w#1Lyh&(ZF;VdLV)9iwKi*BuQl5K(
zn1%H57}><bM@g*p=SRaVB$A#RBZ>TbGkG1X)3n8QtFd-j!h<J>vu$e|w(NDW?a*Tu
x666s0+(N{E2o!PM6xl|sYMnDg%lA!@8K50=B!_CIhzqZnCc%W?og=$szXL@#OCSIM