{"id":21297,"library":"esbuild-svgr-plugin","title":"esbuild-svgr-plugin","description":"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.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/pedroalves0/esbuild-svgr-plugin","tags":["javascript","esbuild","plugin","svg","svgr","react","typescript"],"install":[{"cmd":"npm install esbuild-svgr-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-svgr-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-svgr-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required at version ^0.14.0","package":"esbuild","optional":false}],"imports":[{"note":"Named export, not default. TypeScript types are included.","wrong":"import svgrPlugin from 'esbuild-svgr-plugin'","symbol":"svgrPlugin","correct":"import { svgrPlugin } from 'esbuild-svgr-plugin'"},{"note":"CommonJS require must destructure the named export.","wrong":"const svgrPlugin = require('esbuild-svgr-plugin')","symbol":"svgrPlugin","correct":"const { svgrPlugin } = require('esbuild-svgr-plugin')"},{"note":"For type-only imports in TypeScript if not bundling.","symbol":"svgrPlugin","correct":"import type { svgrPlugin } from 'esbuild-svgr-plugin'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport { svgrPlugin } from 'esbuild-svgr-plugin';\n\nawait esbuild.build({\n  entryPoints: ['src/app.tsx'],\n  bundle: true,\n  outdir: 'dist/',\n  plugins: [svgrPlugin()],\n});","lang":"typescript","description":"Bundles a React application, transforming SVG imports into React components via SVGR plugin."},"warnings":[{"fix":"Update esbuild to ^0.14.0 or later.","message":"Requires esbuild ^0.14.0; incompatible with older versions.","severity":"breaking","affected_versions":"<0.2.0"},{"fix":"If you need SVG transformation inside CSS, adjust filter and issuer accordingly, but be aware of potential loader errors.","message":"Only 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.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Monitor SVGR releases and update this plugin if necessary.","message":"SVGR itself may deprecate or change its API; this plugin wraps SVGR and may need updates.","severity":"deprecated","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"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.","cause":"The SVG file is not being matched by the plugin's filter or issuer regex.","error":"Error: Build failed with 1 error: error: No loader is configured for \".svg\" files: src/icons/app-icon.svg"},{"fix":"Use `import { svgrPlugin } from 'esbuild-svgr-plugin'`.","cause":"Using default import from 'esbuild-svgr-plugin' instead of named import.","error":"TypeError: Cannot read properties of undefined (reading 'default')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}