esbuild-plugin-svgr

esbuild-plugin-svgr is an esbuild plugin that adds support for importing *.svg files as React components. It is built on top of SVGR, the standard SVG-to-React transformer, so an import Logo from './logo.svg' gives you a fully typed React component you can render like any other.

The plugin hooks into esbuild’s load pipeline, reads each SVG, runs it through SVGR’s JSX plugin, and returns JSX or TSX contents. It also supports a ?url suffix to import the raw file URL instead of a component, and forwards SVGR configuration options through.

What You Get

• A svgrPlugin() you add to your esbuild plugins array
• import Icon from './icon.svg' returning a React component
• A ?url import suffix to get the file path/URL instead of a component
• Pass-through of SVGR Config options, including TypeScript (tsx) output

Common Use Cases

• Using inline SVG icons as React components in an esbuild-bundled app
• Migrating an SVGR-based CRA/webpack setup to esbuild
• Generating typed SVG components for a design system

Under The Hood

Architecture - The implementation is a single file, src/index.js. svgrPlugin(options) returns an esbuild plugin whose setup registers an onResolve for \.svg$ (deciding whether to treat matches as external based on the import kind and markExternal) and an onLoad that reads the SVG with fs/promises, ensures @svgr/plugin-jsx is in the SVGR plugin list, calls SVGR’s transform, and returns the generated component as jsx/tsx contents — or the raw path as text when the import carries a ?url suffix.

Tech Stack - Plain JavaScript (CommonJS) with an index.d.ts for TypeScript types. Runtime dependencies are @svgr/core and @svgr/plugin-jsx (v8); esbuild is a peer dependency (v0.25+).

Code Quality - The codebase is intentionally tiny and focused; there is an example/ directory demonstrating usage but no dedicated test suite in the package. Error handling relies on esbuild and SVGR surfacing failures.

API Design - The API is a single factory function accepting SVGR’s Config, so anyone familiar with SVGR is immediately productive. Adding it is a one-line change to the esbuild plugins array, and the ?url convention is a thoughtful ergonomic touch for asset-URL imports.