SVG Minifier, Path Optimizer & React JSX/TSX Component Converter

Shrink SVG Paths and Convert SVG to React JSX

Open any exported SVG and you will find the same crime scene: coordinates with six decimal places of precision nobody can see, redundant commands, empty groups, and metadata the design tool snuck in. A simple icon that should weigh 800 bytes arrives at 8 KB. For a site loading forty icons, that bloat is a real performance tax — and pasting that mess into a React component adds insult, because SVG attributes like stroke-width and class are not even valid JSX. This tool fixes both problems: it minifies the path data and rewrites the markup as clean, ready-to-paste JSX.

The optimization is satisfyingly mechanical. Decimal precision drops to what the eye can actually resolve (usually 1–2 places for icons), consecutive commands collapse, relative coordinates replace absolute ones where shorter, and transforms get baked directly into the path data. A typical designer export shrinks 50–80% with zero visible change — put the before and after side by side at 200% zoom and try to spot the difference. Then the JSX conversion handles the tedious renames: stroke-width becomes strokeWidth, clip-path becomes clipPath, class becomes className, and comments are stripped so they cannot break your build.

There is a right way to use the output. For one-off icons, paste the JSX straight into a small component that accepts className or size props so the icon inherits your design system. For icon sets, run every file through the same settings — consistency matters more than squeezing the last byte, because a mixed set of precisions looks subtly uneven at small sizes. Keep one unoptimized master copy of each SVG in your assets folder; optimized output is a build artifact, and you never want to re-edit the minified version by hand.