chore(frontend): bundle svg files into static

Makefile

@@ -155,7 +155,7 @@ assets/icons: node_modules
 	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/solid utils/rename-fa.json assets/icons/fradrive
 	./utils/renamer.pl node_modules/@fortawesome/fontawesome-free/svgs/regular utils/rename-fa.json assets/icons/fradrive
 
-static: node_modules esbuild.config.mjs assets
+static: node_modules assets esbuild.config.mjs
 	npm run build
 well-known: static;
 
@@ -319,7 +319,7 @@ start-minio:     SINGLETON = true
 
 start-backend:   BASE_PORTS = "DEV_PORT_HTTP=3000" "DEV_PORT_HTTPS=3443"
 start-backend:   SINGLETON = false
-start-backend:   static
+start-backend:   compile-frontend
 
 start-hoogle:    BASE_PORTS = "HOOGLE_PORT=8081"
 start-hoogle:    SINGLETON = true

esbuild.config.mjs

@@ -2,8 +2,8 @@ import * as esbuild from 'esbuild';
 
 import babel from 'esbuild-plugin-babel';
 import { sassPlugin } from 'esbuild-sass-plugin';
-// import svgPlugin from 'esbuild-plugin-svg-bundle';
-import svgPlugin from 'esbuild-plugin-svg';
+import svgPlugin from 'esbuild-plugin-svg-bundle';
+// import svgPlugin from 'esbuild-plugin-svg';
 import { copy } from 'esbuild-plugin-copy';
 // import manifestPlugin from 'esbuild-plugin-manifest';
 import manifestPlugin from 'esbuild-plugin-assets-manifest';
@@ -25,15 +25,19 @@ await esbuild.build({
   },
   outdir: staticDir,
   plugins: [
+    /* inlineImportPlugin({
+      filter: /.svg/,
+    }), */
+    svgPlugin({
+      minify: true,
+      // hash: 'foo', // TODO: introduce caching of static files (maybe even in backend)
+      bundleFile: 'svg-bundle.svg',
+      bundleUrl: 'svg-bundle.svg',
+    }),
     nodeModulesPolyfillPlugin({
       // modules: ['crypto','worker_threads']
     }),
     sassPlugin(),
-    svgPlugin({
-      minify: true,
-      // bundleFile: `${wellKnownDir}/svg-bundle.svg`,
-      // bundleUrl: `${wellKnownDir}/svg-bundle.svg`,
-    }),
     copy({
       resolveFrom: 'cwd',
       assets: {

frontend/src/icons.scss

@@ -102,7 +102,7 @@ $icons: new,
 
 @each $name in $icons {
   .ico-#{$name} {
-    background-image: url('{}/../../assets/icons/fradrive/#{$name}.svg');
+    background-image: url('/mnt/fradrive/assets/icons/fradrive/#{$name}.svg');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;