I would like to dynamically generate a svg file using js/ts. In attempting to do this, I created a project plugin + favicon.svg.ts, which dynamically generates svg. The problem with using the file loader is it will generate the file with a .ts extension...but I want it to generate a file with the .svg extension. Does the file loader support this behavior with some configuration? If not, could I use a text loader & somehow add the generated file into the build from the plugin?
Here is the plugin using the file loader:
{
name: 'esmsvg',
setup(build) {
build.onLoad(
{ filter: /\.svg\.(js|ts)$/ },
async (config)=>{
const { path, suffix } = config
const contents = await import(path + (suffix ?? '')).then(mod=>mod.default())
return { contents, loader: 'file' }
}
)
},
}
Here is favicon.svg.ts:
import { my_svg_component } from './my_svg_component.js'
export default ()=>my_svg_component({
css: `
svg { stroke: black; }
@media (prefers-color-scheme: dark) {
svg { stroke: white; }
}
`.trim()
})