esbuild-plugin-svgr

3.1.1 verified Mon Apr 27 auth: no javascript

esbuild-plugin-svgr v3.1.1 is a plugin for esbuild that enables importing SVG files as React components using SVGR under the hood. It integrates seamlessly with esbuild's build pipeline, allowing developers to treat SVG imports as React components without additional bundler configuration. The plugin ships TypeScript types and requires esbuild ^0.25.2 as a peer dependency. Active maintenance, low ceremony, and lightweight compared to full webpack or Rollup SVG loaders.

Common errors

error Error: Cannot find module 'esbuild-plugin-svgr' ↓

cause Missing dependency or incorrect installation.

fix

Run 'npm install -D esbuild-plugin-svgr'

error ✘ [ERROR] Could not resolve "react" (mark it as external if it's not a source file) ↓

cause React is not bundled or marked as external, and esbuild tries to resolve it in node_modules but fails due to improper setup.

fix

Add 'external: ["react"]' to your esbuild build options.

error TypeError: svgrPlugin is not a function ↓

cause Using default import instead of named import (v3 breaking change).

fix

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

Warnings

gotcha SVG imports as components require React to be in scope. Ensure React is bundled or provided as external. ↓

fix Add 'react' to external array: external: ['react']

gotcha Plugin does not automatically configure esbuild's loader for .svg files. If you import SVGs both as components and URLs, you must handle loaders manually. ↓

fix Use a custom filter or separate entry points with different loaders.

deprecated Version 2.x used default export; v3 switched to named export 'svgrPlugin'. ↓

fix Change 'import svgrPlugin from "esbuild-plugin-svgr"' to 'import { svgrPlugin } from "esbuild-plugin-svgr"'

Install

npm install esbuild-plugin-svgr

yarn add esbuild-plugin-svgr

pnpm add esbuild-plugin-svgr

Imports

svgrPlugin

wrong

import svgrPlugin from 'esbuild-plugin-svgr'

correct

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

Must use named import. Default export not available in this version.

SvgrPluginOptions

wrong

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

correct

import type { SvgrPluginOptions } from 'esbuild-plugin-svgr'

Type import only; not a runtime value.

require

wrong

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

correct

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

CommonJS destructure required; module has no default export.

Quickstart

Registers svgrPlugin with esbuild to enable importing SVGs as React components.

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

await build({
  entryPoints: ['src/app.tsx'],
  outdir: 'dist',
  bundle: true,
  plugins: [svgrPlugin()],
  loader: { '.svg': 'text' }, // fallback if not matching component
});