{"id":25458,"library":"esbuild-svg","title":"esbuild-svg","description":"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.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/inqnuam/esbuild-svg","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-svg","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for JSX components","package":"react","optional":true},{"reason":"Underlying transformation logic","package":"@svgr/core","optional":false},{"reason":"Default SVGO config plugin","package":"@svgr/plugin-svgo","optional":true},{"reason":"Default JSX config plugin","package":"@svgr/plugin-jsx","optional":true}],"imports":[{"note":"Package ships both ESM and CJS. Default import works in both, but require() may have issues if the package is used in ESM context.","wrong":"const svgPlugin = require('esbuild-svg')","symbol":"svgPlugin","correct":"import svgPlugin from 'esbuild-svg'"},{"note":"Named export 'ReactComponent' is used when SVGR config has exportType: 'named' (default). Wrong default import will result in undefined.","wrong":"import ReactComponent from '../pic/dummy.svg'","symbol":"ReactComponent","correct":"import { ReactComponent } from '../pic/dummy.svg'"},{"note":"Appending '?' to the import path returns the SVG's public URL string instead of a component. Omitting '?' returns the component.","wrong":"import path from '../pic/dummy.svg'","symbol":"publicPath","correct":"import path from '../pic/dummy.svg?'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport svgPlugin from 'esbuild-svg';\n\nawait esbuild.build({\n  entryPoints: ['src/index.jsx'],\n  outdir: 'dist',\n  bundle: true,\n  plugins: [svgPlugin()],\n});","lang":"javascript","description":"Configures esbuild with the SVG plugin to transform SVG imports into React components using default SVGR settings."},"warnings":[{"fix":"Install react: npm install react","message":"The plugin requires React as a peer dependency for JSX output. If not installed, you may get runtime errors when components are used.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set svgPlugin({ exportType: 'default' }) to restore old behavior, or update imports to use { ReactComponent } named import.","message":"Version 1.0.0 changed the default SVGR export from default to named. Existing code importing SVGs without exportType config will break.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure esbuild build options include publicPath: '/assets/' (or similar).","message":"The '?' suffix for publicPath only works with esbuild's publicPath configuration. Without it, the URL may be incorrect or lead to 404 errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev esbuild-svg","cause":"Package not installed or missing from dependencies.","error":"Cannot find module 'esbuild-svg'"},{"fix":"Use import svgPlugin from 'esbuild-svg' or const { default: svgPlugin } = require('esbuild-svg')","cause":"Incorrect import style (e.g., commonjs require on ESM-only build).","error":"TypeError: svgPlugin is not a function"},{"fix":"Install react: npm install react","cause":"Missing React peer dependency.","error":"Uncaught ReferenceError: React is not defined"},{"fix":"Ensure esbuild's loader is set for .jsx/.tsx files, or use esbuild's JSX automatic runtime.","cause":"esbuild not configured to handle JSX output from SVG transformation.","error":"Module parse failed: Unexpected token (1:0)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}