Importing images/SVG files

[edemaine]

Context: In the past I've written mapping files that manually load SVG or PNG assets via fs.readFileSync and __dirname. This is useful e.g. when assets are drawn in another tool like Inkscape, but the filenames are computed programmatically and they need to be wrapped/modified. (Otherwise we have the "return a filename" shortcut.)

Proposal: Use Babel plugins to make loading these as easy as import or require.

babel-plugin-transform-import-to-read-file-sync would be sufficient for SVG files. (The resulting strings could be used directly in other SVG.) For PNG/JPEG, we'd want to instead convert imports to <image href="..."/> strings, probably not inlined to allow the inlining options to do their thing. So babel-plugin-transform-media-imports is closer to what we want, but need to modify the output.

---

New approach is to use pirates (which is what babel/register uses anyway, and is better for runtime-generated filenames passed to require) to just handle these extensions directly.

• PNG/JPEG/GIF turns into <image> tag: Preact DOM object, with .svg attribute to get raw string
• SVG turns into SVG content via preact-html-converter Babel JSX transform, with .svg attribute to get raw string