bun-plugin-svgr

Import SVG files as React/Preact components in Bun. No-config plugin for when you want SVGs to Just Work™.

Installation

Add the plugin as a dev dependency:

bun add -d bun-plugin-svgr

Setup

Development

Add to bunfig.toml:

[serve.static]
plugins = ["bun-plugin-svgr"]

Production

For production builds, specify svgr() among the plugins of the Bun.build() options:

import { svgr } from "bun-plugin-svgr";

await Bun.build({
	entrypoints: ["./src/index.tsx"],
	outdir: "./dist",
	plugins: [svgr()],
});

TypeScript Support

Add svg.d.ts to any directory of your project.

If the project is running React, add to the file:

declare module "*.svg" {
	const Component: (props: SVGProps<SVGSVGElement>) => Element;
	export default Component;
}

If Preact, add this instead:

declare module "*.svg" {
	const Component: (props: SVGAttributes<SVGSVGElement>) => Element;
	export default Component;
}

Usage

Simply import the desired SVG and use it as a component:

import Icon from "icon.svg";

const Comp = () => <Icon className="w-6 h-6" />;