bun-plugin-svgr 0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# `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:
+
+```bash
+bun add -d bun-plugin-svgr
+```
+
+## Setup
+
+### Development
+
+Add to `bunfig.toml`:
+
+```toml
+[serve.static]
+plugins = ["bun-plugin-svgr"]
+```
+
+### Production
+
+For production builds, specify `svgr()` among the `plugins` of the `Bun.build()` options:
+
+```ts
+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:
+
+```ts
+declare module "*.svg" {
+	const Component: (props: SVGProps<SVGSVGElement>) => Element;
+	export default Component;
+}
+```
+
+If Preact, add this instead:
+
+```ts
+declare module "*.svg" {
+	const Component: (props: SVGAttributes<SVGSVGElement>) => Element;
+	export default Component;
+}
+```
+
+## Usage
+
+Simply import the desired SVG and use it as a component:
+
+```tsx
+import Icon from "icon.svg";
+
+const Comp = () => <Icon className="w-6 h-6" />;
+```

package/index.ts

@@ -0,0 +1,24 @@
+import { type Config, transform } from "@svgr/core";
+import type { BunPlugin } from "bun";
+
+function svgr(config: Config = {}): BunPlugin {
+	return {
+		name: "bun-plugin-svgr",
+		setup(build) {
+			build.onLoad({ filter: /\.svg$/ }, async ({ path }) => {
+				const svg = await Bun.file(path).text();
+				const contents = await transform(svg, {
+					plugins: ["@svgr/plugin-jsx"],
+					// * default to modern approach
+					// * `automatic` does not global React imports, which works in React 17+ anyway
+					jsxRuntime: "automatic",
+					...config,
+				});
+				return { contents, loader: "jsx" };
+			});
+		},
+	};
+}
+
+export { svgr };
+export default svgr() satisfies BunPlugin;

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "bun-plugin-svgr",
+	"version": "0.1.0",
+	"description": "Import SVG files as React/Preact components in Bun",
+	"type": "module",
+	"main": "index.ts",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Hyperseeker/bun-plugin-svgr.git"
+	},
+	"keywords": [
+		"bun",
+		"bun-plugin",
+		"svgr",
+		"svg",
+		"react",
+		"preact",
+		"jsx"
+	],
+	"files": [
+		"index.ts"
+	],
+	"dependencies": {
+		"@svgr/core": "^8.0.0",
+		"@svgr/plugin-jsx": "^8.0.0"
+	},
+	"devDependencies": {
+		"@types/bun": "^1.3.4"
+	}
+}