{"id":21271,"library":"esbuild-plugin-svgr","title":"esbuild-plugin-svgr","description":"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.","status":"active","version":"3.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/kazijawad/esbuild-plugin-svgr","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-plugin-svgr","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-svgr","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-svgr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires esbuild ^0.25.2","package":"esbuild","optional":false}],"imports":[{"note":"Must use named import. Default export not available in this version.","wrong":"import svgrPlugin from 'esbuild-plugin-svgr'","symbol":"svgrPlugin","correct":"import { svgrPlugin } from 'esbuild-plugin-svgr'"},{"note":"Type import only; not a runtime value.","wrong":"import { SvgrPluginOptions } from 'esbuild-plugin-svgr'","symbol":"SvgrPluginOptions","correct":"import type { SvgrPluginOptions } from 'esbuild-plugin-svgr'"},{"note":"CommonJS destructure required; module has no default export.","wrong":"const svgrPlugin = require('esbuild-plugin-svgr')","symbol":"require","correct":"const { svgrPlugin } = require('esbuild-plugin-svgr')"}],"quickstart":{"code":"import { build } from 'esbuild';\nimport { svgrPlugin } from 'esbuild-plugin-svgr';\n\nawait build({\n  entryPoints: ['src/app.tsx'],\n  outdir: 'dist',\n  bundle: true,\n  plugins: [svgrPlugin()],\n  loader: { '.svg': 'text' }, // fallback if not matching component\n});","lang":"typescript","description":"Registers svgrPlugin with esbuild to enable importing SVGs as React components."},"warnings":[{"fix":"Add 'react' to external array: external: ['react']","message":"SVG imports as components require React to be in scope. Ensure React is bundled or provided as external.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use a custom filter or separate entry points with different loaders.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Change 'import svgrPlugin from \"esbuild-plugin-svgr\"' to 'import { svgrPlugin } from \"esbuild-plugin-svgr\"'","message":"Version 2.x used default export; v3 switched to named export 'svgrPlugin'.","severity":"deprecated","affected_versions":"3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D esbuild-plugin-svgr'","cause":"Missing dependency or incorrect installation.","error":"Error: Cannot find module 'esbuild-plugin-svgr'"},{"fix":"Add 'external: [\"react\"]' to your esbuild build options.","cause":"React is not bundled or marked as external, and esbuild tries to resolve it in node_modules but fails due to improper setup.","error":"✘ [ERROR] Could not resolve \"react\" (mark it as external if it's not a source file)"},{"fix":"Use 'import { svgrPlugin } from 'esbuild-plugin-svgr''","cause":"Using default import instead of named import (v3 breaking change).","error":"TypeError: svgrPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}