Registry / web-framework / esbuild-plugin-svgr

esbuild-plugin-svgr

library3.1.1jsnpmunverified

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.

web-framework

npm install esbuild-plugin-svgr

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-SVG

esbuild-plugin-svgr

web-frameworkjavascriptv3.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

svgrPlugin

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

✗ import svgrPlugin from 'esbuild-plugin-svgr'

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

SvgrPluginOptions

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

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

Type import only; not a runtime value.

require

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

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

CommonJS destructure required; module has no default export.

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 });

Debug

Known issues

gotchaSVG 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']

affects: >=3.0.0

gotchaPlugin 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.

affects: >=3.0.0

deprecatedVersion 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"'

affects: 3.0.0

Errors

Common errors & fixes

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

Missing dependency or incorrect installation.

fix

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

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

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.

TypeError: svgrPlugin is not a function

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

fix

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

Upgrade

Version history

3.1.1latest on npm

Audit

Dependencies

esbuildrequiredPeer dependency; plugin requires esbuild ^0.25.2

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/kazijawad/esbuild-plugin-svgr ↗

packagehttps://www.npmjs.com/package/esbuild-plugin-svgr ↗