On my site I've got a custom color theme selector, and I've got a Preact element where I'd like to inline an SVG so I can apply styles to it, and make it responsive to CSS custom properties. This is currently achieved using a custom Figure component:

// Figure.tsx

import { FunctionComponent } from "preact";

export const Figure: FunctionComponent<{ svg: string }> = ({ svg }) => {
  // This "color-responsive-svg" class adds a number of selectors for the paths, etc within the svg to
  // make them response to various css custom properties, and then the actual SVG file gets inlined
  // here as a child element.
  return (
    <figure class="color-responsive-svg" dangerouslySetInnerHTML={{ __html: svg }} />
  );
};

Below, using the component like so doesn't work. You'll get something akin to JSBUILD: failed to transform "ts/index.tsx" (text/tsx): "my-icon.svg:1:0": Unexpected "<"

// NavModal.tsx

import { Figure } from "./Figure";
import myIcon from "./my-icon.svg";

export const NavModal: FunctionComponent = () => {
  return (
    <Figure svg={myIcon} />
  );
};

If you switch the file extension to .txt, you can import the file and render it as expected. This looks like it's because ".svg" is currently not supported in the extensions array: https://github.com/gohugoio/hugo/blob/master/resources/resource_transformers/js/options.go#L134

It looks like loading SVG as text is the documented approach for using this in ESBuild, and that seems like a nice default to me.