esbuild-svg

library1.0.3jsnpmunverified

esbuild-svg 1.0.3 is an esbuild plugin that transforms SVG files into JSX React components using SVGR under the hood. It supports both default and named exports, configurable SVGO optimization, and provides a publicPath feature via a special import suffix. Currently stable, it releases occasionally. Compared to alternatives like @svgr/webpack or vite-plugin-svgr, it is tailored specifically for esbuild and integrates tightly with its publicPath configuration. It ships TypeScript definitions and requires React (peer dependency) for JSX rendering.

devops

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

Package ships both ESM and CJS. Default import works in both, but require() may have issues if the package is used in ESM context.

import svgPlugin from 'esbuild-svg'

Named export 'ReactComponent' is used when SVGR config has exportType: 'named' (default). Wrong default import will result in undefined.

import { ReactComponent } from '../pic/dummy.svg'

Appending '?' to the import path returns the SVG's public URL string instead of a component. Omitting '?' returns the component.

import path from '../pic/dummy.svg?'

Configures esbuild with the SVG plugin to transform SVG imports into React components using default SVGR settings.

import esbuild from 'esbuild'; import svgPlugin from 'esbuild-svg'; await esbuild.build({ entryPoints: ['src/index.jsx'], outdir: 'dist', bundle: true, plugins: [svgPlugin()], });

Debug

Known footguns

gotchaThe plugin requires React as a peer dependency for JSX output. If not installed, you may get runtime errors when components are used.

breakingVersion 1.0.0 changed the default SVGR export from default to named. Existing code importing SVGs without exportType config will break.

gotchaThe '?' suffix for publicPath only works with esbuild's publicPath configuration. Without it, the URL may be incorrect or lead to 404 errors.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

11 hits · last 30 days

ahrefsbot

gptbot

claudebot

bingbot

Resources

githubhttps://github.com/inqnuam/esbuild-svg ↗

packagehttps://www.npmjs.com/package/esbuild-svg ↗