SVG → JSX
SVG to React component
Pasting raw SVG into JSX breaks immediately: class isn't className, stroke-width isn't valid, style strings aren't objects. This converter does the whole cleanup in one paste — camelCased attributes, style objects, a {...props} spread on the root, TypeScript types if you want them, and one checkbox to make the icon inherit its color from CSS.
Component habits that pay off
- 01
currentColor is the themeable-icon trick
With the toggle on, the icon draws in whatever CSS color its parent has — one component works in nav, buttons, and dark mode without variants.
- 02
The props spread is your API
Size, class, event handlers, aria attributes — callers pass them straight through: <Logo width={20} aria-hidden />. No prop plumbing to write.
- 03
Optimize before converting
Fewer attributes in, cleaner component out. The SVG Optimizer strips editor junk that would otherwise live in your codebase forever.
Questions, answered
Why not just use <img src="icon.svg">?+
An <img> can't be styled from CSS: no currentColor, no hover recoloring, no per-part styling — and it's an extra request. An inline component inherits text color, sizes via props, and ships with your bundle.
How is this different from SVGR?+
SVGR is the build-time standard with a plugin ecosystem; use it when your project already pipelines SVG imports. This converter covers the everyday transform set — attribute camelization, className, style objects, props spreading, currentColor — instantly, with nothing to install. For one-off icons it's simply faster.
What does the currentColor toggle actually change?+
Every fill and stroke that isn't "none" or a gradient reference becomes currentColor, so the icon inherits CSS color from its surroundings — the standard trick behind themeable icon sets. Leave it off for multi-color artwork that should keep its palette.
Anything to watch out for with repeated icons?+
If the SVG contains id attributes (gradients, clip paths) and you render the component multiple times on one page, the duplicate ids can collide. Rename them uniquely, or keep such artwork as a single-instance illustration rather than a repeated icon.
How should I handle accessibility?+
Decorative icons: pass aria-hidden — the {...props} spread makes it one attribute at the call site. Meaningful icons: pass role="img" and an aria-label describing the meaning, not the picture.