build_config.mjs

import * as path from 'path'
import { readFile } from 'node:fs/promises'
import { transform } from '@svgr/core'

// START svgr config, only needed if you want to use svgr to
// convert  svg files to react components.
const svgrPlugin = () => ({
  name: 'svgr',
  setup(build) {
    build.onResolve({ filter: /\.svg$/ }, async (args) => {
      // console.log("resolve", args)
      // relative import path to absolute file path
      return {
        path: path.resolve(args.path),
      }
    })

    build.onLoad({ filter: /\.svg$/ }, async (args) => {
      const svg = await readFile(args.path, {encoding: 'utf8'})
      const contents = await transform(
        svg,
        {
          plugins: [
            '@svgr/plugin-svgo',
            '@svgr/plugin-jsx',
            '@svgr/plugin-prettier'
          ],
          replaceAttrValues: {
            // Replace the color used in the svg files here, so the components
            // can follow current text color.
            '#000': 'currentColor',
          },
          svgoConfig: {
            plugins: [
              {
                name: 'preset-default',
                params: {
                  overrides: {
                    // Don't remove viewBox attr
                    removeViewBox: false,
                  }
                }
              }
            ]
          }
        },
        {filePath: args.path}
      )

      // console.log("load", args, svg, contents)

      return {
        contents,
        loader: 'jsx',
      }
    })
  },
})
// END svgr

export default {
  bundle: true,
  sourcemap: true,
  // Entry file generated by shadow-cljs
  entryPoints: ["target/gen/libs.js"],
  outdir: "public/js",
  target: [
    "es2020",
    "chrome119",
    "firefox120",
    "safari17",
    "edge119",
  ],
  metafile: true,
  logLevel: 'info',
  plugins: [
    svgrPlugin()
  ]
}