Bundle icons into a single file.

cista/app.py

@@ -221,7 +221,7 @@ async def wwwroot(req, path=""):
 @app.route("/favicon.ico", methods=["GET", "HEAD"])
 async def favicon(req):
     # Browsers keep asking for it when viewing files (not HTML with icon link)
-    return redirect("/assets/logo-97d1d7eb.svg", status=308)
+    return redirect("/assets/logo-ctv8tVwU.svg", status=308)
 
 
 def get_files(wanted: set) -> list[tuple[PurePosixPath, Path]]:

frontend/src/components/BreadCrumb.vue

@@ -31,11 +31,12 @@
 </template>
 
 <script setup lang="ts">
-import home from '@/assets/svg/home.svg'
+import { Home } from '@/assets/svg'
 import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { exists } from '@/utils/fileutil'
 
+const home = Home
 const router = useRouter()
 
 const links = [] as Array<HTMLElement>

frontend/src/components/EmptyFolder.vue

@@ -11,9 +11,10 @@
 
 <script setup lang="ts">
 import { useMainStore } from '@/stores/main'
-import cog from '@/assets/svg/cog.svg'
+import { Cog } from '@/assets/svg'
 import { exists } from '@/utils/fileutil'
 
+const cog = Cog
 const store = useMainStore()
 const props = defineProps<{
   path: string[],

frontend/src/components/MediaPreview.vue

@@ -16,7 +16,7 @@
 <script setup lang=ts>
 import { computed, ref } from 'vue'
 import type { Doc } from '@/repositories/Document'
-import PlayIcon from '@/assets/svg/play.svg'
+import { Play as PlayIcon } from '@/assets/svg'
 
 const aud = ref<HTMLAudioElement | null>(null)
 const vid = ref<HTMLVideoElement | null>(null)

frontend/src/components/SvgButton.vue

@@ -1,18 +1,16 @@
 <template>
   <button class="action-button">
-    <component :is="icon" />
+    <component :is="icons[name]" />
     <slot></slot>
   </button>
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
+import { icons, type IconName } from '@/assets/svg'
 
-const props = defineProps<{
+defineProps<{
-  name: string
+  name: IconName
 }>()
-
-const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`))
 </script>
 
 <style>

frontend/vite.config.ts

@@ -30,4 +30,16 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Bundle all SVG icons into a single chunk
+          icons: [
+            '/src/assets/svg/index.ts',
+          ],
+        },
+      },
+    },
+  },
 })