fix(demo): inline svgs and align color

davidenke · Dec 14, 2024 · c6d6339 · c6d6339
1 parent 1d8ff62
commit c6d6339
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/demo/demo.css b/src/demo/demo.css
@@ -72,8 +72,9 @@ header {
     align-items: center;
     justify-content: center;
 
-    img {
+    svg {
       height: 2em;
+      fill: currentcolor;
     }
   }
 }
@@ -99,7 +100,7 @@ h1 {
   font-size: 1.5em;
 }
 
-a:visited {
+a {
   color: currentcolor;
 }
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,25 @@
-import { defineConfig } from 'vite';
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+import { defineConfig, type Plugin } from 'vite';
 import checker from 'vite-plugin-checker';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
+export function htmlInlineSvg(): Plugin {
+  return {
+    name: 'html-inline-svg',
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html, { filename }) {
+        return html.replaceAll(/<img src="(.+\.svg)"(.*?)\/?>/g, (_, src) => {
+          const path = resolve(dirname(filename), src);
+          return readFileSync(path, 'utf-8');
+        });
+      },
+    },
+  };
+}
+
 // Vite configuration
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
@@ -12,6 +30,8 @@ export default defineConfig(async () => ({
     checker({ typescript: true, overlay: false }),
     // polyfill `node:events` as used by `xmind-model`
     nodePolyfills(),
+    // inline svg files referenced in html files
+    htmlInlineSvg(),
   ],
   // https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/25#issuecomment-1962228168
   resolve: { alias: { 'node:fs/promises': 'node-stdlib-browser/mock/empty' } },