Registry / web-framework / esbuild-svgr-plugin

esbuild-svgr-plugin

library0.2.0jsnpmunverified

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.

web-framework

npm install esbuild-svgr-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-SVGR-PLUGI

esbuild-svgr-plugin

web-frameworkjavascriptv0.2.0

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-svgr-plugin'

✗ import svgrPlugin from 'esbuild-svgr-plugin'

Named export, not default. TypeScript types are included.

svgrPlugin

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

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

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()], });

Debug

Known issues

breakingRequires esbuild ^0.14.0; incompatible with older versions.

fix

Update esbuild to ^0.14.0 or later.

affects: <0.2.0

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

affects: >=0.2.0

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

affects: >=0.2.0

Errors

Common errors & fixes

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

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.

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

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

fix

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

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

esbuildrequiredpeer dependency required at version ^0.14.0

Agent activity

2 hits · last 30 days

node

Resources

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

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