// the find
gregberge/svgr
Transform SVGs into React components 🦁
SVGR converts SVG files into React components, running the SVG through SVGO for optimization then outputting JSX via a Babel transform pipeline. It ships as a CLI, webpack/rollup loaders, and a Node API — included in create-react-app by default, which is how most people encounter it. If you're building a design-system or icon library in React, this is the de-facto tool for that job.
The architecture is genuinely well-designed: each transformation step (SVGO optimization, HAST parsing, Babel AST conversion, JSX output) is a discrete plugin you can swap or extend. The `--replace-attr-values` flag for swapping hardcoded fill colors to `currentColor` is the feature that makes icon systems actually work. Custom templates via JS functions give you full control over the output component shape without forking the tool. The online playground at react-svgr.com makes iteration fast — paste SVG, tune options, copy component.
The monorepo is built on Lerna with pnpm workspaces but the website still uses a separate npm lock file — a sign the project is maintained by one person with limited bandwidth and the tooling hasn't fully converged. Vite support is conspicuously absent from the official plugins (it's webpack and rollup only); the workaround is a community plugin that lags behind. The SVGO integration means any SVGO breaking change can silently alter your output — this has bitten people across SVGO v2 and v3 major versions. No TypeScript type generation for the props each component accepts beyond the generic `SVGProps<SVGSVGElement>`, so if you inject custom props via templates, you're on your own for types.