{"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,"search_vec":"'0.14.0':40 '0.2.0':37 'allow':60 'altern':47 'avoid':26 'break':27 'built':19 'built-in':18 'bundl':68 'cadenc':72 'compon':14 'conflict':58 'css':33 'custom':61 'default':49 'e.g':32 'esbuild':2,6,39,70,81 'esbuild-svgr-plugin':1 'file':22,54 'file-typ':21 'filter':24 'filter/issuer':62 'import':11,31 'includ':45 'instal':75 'javascript':80 'js/.ts/.tjx/.tsx':53 'loader':57 'low':74 'non':29 'non-react':28 'npm':77 'plugin':4,7,82 'prevent':56 'process':51 'project':67 'react':13,30,66,85 'refer':35 'regex':63 'releas':71 'requir':38 'suitabl':64 'svg':10,83 'svgr':3,16,84 'transform':9 'type':23,43 'typescript':42,86 'unlik':46 'url':34 'use':15 'version':36 'via':69,76 'yarn':79","created_at":"2026-04-27T16:59:09.173514+00:00","updated_at":"2026-04-27T16:59:09.173514+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/pedroalves0/esbuild-svgr-plugin","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/esbuild-svgr-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}