Importing and rendering inline SVGs

[tsteinke-iabbb]

Is there a way for consumers to update Remix's config to support importing SVG assets and rendering them inline? Rendering inline SVGs is advantageous for a couple of reasons:

1. Allows for more granular styling than <img src="icon.svg" />
2. Limits HTTP requests since the SVGs are embedded into the document.

Intended use case:

import SvgClose from './assets/close.svg'; // asset file containing SVG markup

return (
  <button>
    <SvgClose aria-hidden style={{ fill: 'red' }}/> {/* params get passed to <svg> html element */}
    <span className="visually-hidden">close</span>
  </button>

By default, it seems that import SvgClose from './assets/close.svg'; returns an asset URL.

[sergiodxa]

The compiler is not configurable, you can transform the SVG to JSX manually and import it as a component