fresh-plugin-svg-inject

This is a plugin for fresh that injects SVGs referenced in img tags into the rendered html text.

It turns this:

<!-- generated html of your component -->
<img
	src="assets/logo.svg"
	class="h-full"
/>

<!-- ./assets/logo.svg -->
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 3000 3500"
	class="h-full"
>
	<defs>
		<rect
			id="box"
			width="100%"
			height="100%"
		/>
	</defs>

	<use href="#box" />
</svg>

into this:

<!-- html with svg injected into it -->
<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 3000 3500"
	class="h-full"
>
	<defs>
		<rect
			id="box-inject1"
			width="100%"
			height="100%"
		/>
	</defs>

	<use href="#box-inject1" />
</svg>

before your site gets served.

The ids are renamed to avoid collisions. This plugin is in essence a modern, less sophisticated port of iconfu/svg-inject for fresh.

Usage

import tailwind from "$fresh/plugins/tailwind.ts";
import svgInjectPlugin from "https://deno.land/x/fresh_plugin_svg_inject/main.js";
import { defineConfig } from "$fresh/server.ts";

export default defineConfig({
	plugins: [
		tailwind(),
		svgInjectPlugin()
	]
});

You can also pass an options object to svgInjectPlugin() with a single staticFolder option, which should be the same as the staticDir option specified on the fresh config. Default is "./static" and I know this should be read automatically but I have no idea how; contributions are welcome.

Contributing

We appreciate your help! To contribute, please read our contributing instructions.