esbuild-svgr-plugin

0.2.0 verified Mon Apr 27 auth: no javascript

An esbuild plugin that transforms SVG imports into React components using SVGR, with built-in file-type filtering to avoid breaking non-React imports (e.g., CSS url() references). Version 0.2.0 requires esbuild ^0.14.0 and TypeScript types are included. Unlike alternatives, it defaults to processing only .js/.ts/.tjx/.tsx files to prevent loader conflicts, and allows custom filter/issuer regexes. Suitable for React projects bundled via esbuild. Release cadence is low; install via npm or yarn.

Common errors

error Error: Build failed with 1 error: error: No loader is configured for ".svg" files: src/icons/app-icon.svg ↓

cause The SVG file is not being matched by the plugin's filter or issuer regex.

fix

Ensure the filter regex includes .svg (default does) and the importing file matches issuer (default: .js/.ts/.tjx/.tsx). Check your esbuild plugins order.

error TypeError: Cannot read properties of undefined (reading 'default') ↓

cause Using default import from 'esbuild-svgr-plugin' instead of named import.

fix

Use import { svgrPlugin } from 'esbuild-svgr-plugin'.

Warnings

breaking Requires esbuild ^0.14.0; incompatible with older versions. ↓

fix Update esbuild to ^0.14.0 or later.

gotcha Only transforms imports inside files matching the issuer regex (default: /.(js|ts|tjx|tsx)$/). SVGs in CSS files (e.g., url()) are NOT processed and fallthrough to esbuild's default loader. ↓

fix If you need SVG transformation inside CSS, adjust filter and issuer accordingly, but be aware of potential loader errors.

deprecated SVGR itself may deprecate or change its API; this plugin wraps SVGR and may need updates. ↓

fix Monitor SVGR releases and update this plugin if necessary.

Install

npm install esbuild-svgr-plugin

yarn add esbuild-svgr-plugin

pnpm add esbuild-svgr-plugin

Imports

svgrPlugin

wrong

import svgrPlugin from 'esbuild-svgr-plugin'

correct

import { svgrPlugin } from 'esbuild-svgr-plugin'

Named export, not default. TypeScript types are included.

svgrPlugin

wrong

const svgrPlugin = require('esbuild-svgr-plugin')

correct

const { svgrPlugin } = require('esbuild-svgr-plugin')

CommonJS require must destructure the named export.

svgrPlugin
```
import type { svgrPlugin } from 'esbuild-svgr-plugin'
```
For type-only imports in TypeScript if not bundling.

Quickstart

Bundles a React application, transforming SVG imports into React components via SVGR plugin.

import esbuild from 'esbuild';
import { svgrPlugin } from 'esbuild-svgr-plugin';

await esbuild.build({
  entryPoints: ['src/app.tsx'],
  bundle: true,
  outdir: 'dist/',
  plugins: [svgrPlugin()],
});