Tried importing svgs in an esbuild plugin

esbuild-server.mjs

@@ -13,11 +13,79 @@ const colors = {
   yellow: '\x1b[33m',
 }
 
-const regex = new RegExp('mapsheets\..+\.svg');
+let version;
+
+const importSvg = {
+  name: 'importSvg',
+  setup(build) {
+    const regex = new RegExp(/\.svg$/);
+
+    build.onResolve({ filter: /\*\.svg$/ }, args => {
+      console.log('onresolve', args);
+
+      return {
+        path: path.join('public', 'assets', args.path),
+        namespace: 'svg-stub'
+      }
+    });
+
+    build.onLoad({ filter: /\.svg$/, namespace: 'svg-stub' }, async (args) => {
+      console.log('onload', args);
+
+      const svgs = fs.readdirSync(path.resolve(path.dirname(args.path))).filter(fn => regex.test(fn));;
+
+      console.log(svgs);
+
+      console.log('resolved path', path.join(path.dirname(args.path), 'mapsheets.svg'));
+      console.log('cwd', process.cwd());
+
+      // const contents = `import mapsheets from ./${path.join(path.dirname(args.path), 'mapsheets.svg')};
+      //   console.log('mapsheets', mapsheets);
+      //   export default mapsheets;`;
+
+      // const contents = `
+      //   import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+      //   export default svg;
+      // `;
+
+      // const contents = `
+      //   import svg from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+      //   export default svg;
+      // `;
+
+      // const contents = `
+      //   export { default as scenario_sideShow } from '/usr/src/app/public/assets/images/scenario-side_show.svg';
+      //   export { default as mapsheets } from '/usr/src/app/public/assets/images/mapsheets.svg';
+      // `;
+
+      const contents = `
+        // export { default as countorLines } from './contour-lines.svg';
+        export { default as mapsheets } from './mapsheets.svg';
+      `;
+
+      console.log('resolveDir', path.dirname(args.path));
+      console.log('contents', contents);
+
+      return {
+        contents: contents,
+        resolveDir: path.dirname(args.path) //'./public/assets/images'
+      }
+    });
+
+    // build.onLoad({ filter: /.*/, namespace: 'svg-stub' }, async (args) => ({
+    //   contents: `import svg from ${JSON.stringify(args.path)}
+    //     export default (imports) =>
+    //       WebAssembly.instantiate(wasm, imports).then(
+    //         result => result.instance.exports)`,
+    // }));
+  }
+};
 
 const svgUseCacheBust = {
   name: 'svgUseCacheBust',
   setup(build) {
+    const regex = new RegExp('mapsheets\..+\.svg');
+
     build.onStart(() => {
       console.log("BUILD START");
 
@@ -38,7 +106,10 @@ const ctx = await esbuild.context({
   entryPoints: ['src/*.js'],
   bundle: true,
   outdir: 'build',
-  plugins: [svgUseCacheBust],
+  plugins: [svgUseCacheBust, importSvg],
+  loader: {
+    '.svg': 'file'
+  },
 });
 
 await ctx.watch();
@@ -92,6 +163,8 @@ http.createServer((req, res) => {
     path.join(dir, url.pathname === '/' ? 'index.html' : url.pathname)
   );
 
+  console.log('filepath', filePath);
+
   for (const k in res.headers) {
     res.setHeader(k, res.headers[k]);
   }