- The file explorer from the future
-- Spacedrive is the first file explorer that puts the full power of the cloud in your hands. -
-
-
-
-
+
+
);
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 @@
+
+
+
+
\ 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 @@
+
+
+
+
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 @@
-
\ 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 @@
-
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) {
+
+
+ The file explorer from the future
++ Spacedrive is the first file explorer that puts the full power of the cloud in your hands. +
+
+ {/* */}
+
+
+
+
+ Available on macOS (Intel & Apple Silicon), Windows and Linux.
+
+ Coming soon to iOS & Android.
+
+
+
+
+
+
+ See the bigger picture
++ Using content addressable storage in a virtual distributed filesystem, Spacedrive + securely combines the storage capacity and processing power of your devices into one. +
+
- 
+ {/* @ts-ignore */}
+ {props.iconName && icons[props.iconName] ? (
+ (() => {
+ // @ts-ignore
+ let Icon = icons[props.iconName];
+ return (
+
+ {/* @ts-ignore */}
+ {props.iconName && icons[props.iconName] ? (
+ (() => {
+ // @ts-ignore
+ let Icon = icons[props.iconName];
+ return (
+ -
- Note: 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. -
+ {/**/}