SVG to JSX
Convert SVG markup into a React-ready JSX component.
SVG to JSX converts raw SVG markup into JSX you can drop straight into a React component. It renames attributes to their JSX equivalents (class becomes className, stroke-width becomes strokeWidth), converts inline style strings into style objects, and can wrap the whole thing in a component that spreads props onto the svg — so you can pass width, color, and event handlers.
- ✓camelCases hyphenated and namespaced attributes
- ✓class → className, inline style → style object
- ✓Optional React component wrapper that forwards props
- ✓100% private — nothing is uploaded
Why SVG Needs Converting for React
SVG uses HTML-style attribute names like class, stroke-width, and inline style="fill:red", none of which are valid in JSX. React expects className, strokeWidth, and a style object. Pasting raw SVG into a component throws errors; this tool applies every rename so it just works. See also HTML to JSX for full markup.
Attribute Renames Reference
| SVG attribute | JSX prop |
|---|---|
| class | className |
| stroke-width | strokeWidth |
| stroke-linecap | strokeLinecap |
| fill-opacity | fillOpacity |
| clip-path | clipPath |
| xlink:href | xlinkHref |
| style="fill:red;font-size:12px" | style={{ fill: 'red', fontSize: '12px' }} |
The pattern is consistent: any hyphenated or namespaced SVG attribute becomes camelCase in JSX, matching how React maps DOM properties generally — the same rule that turns HTML's onclick into onClick.
How to Use It
- 1Paste raw SVG markup — from a design tool export, an icon library, or hand-written markup.
- 2Optionally enable "Wrap as component" and give it a name to get a full exported function component.
- 3Click Convert — every attribute is renamed, inline styles become style objects, and elements are properly self-closed.
- 4Paste the result directly into a .jsx or .tsx file. If wrapped as a component, it spreads {...props} onto the root <svg>, so callers can override width, className, or add event handlers.
Common Uses
- ▸Inline icons — Turn an SVG icon into a component so it inherits color via currentColor and takes size props.
- ▸Design handoff — Convert exported SVGs from a design tool into JSX without hand-editing every attribute.
- ▸Icon libraries — Generate consistent component wrappers for a set of SVG icons.
- ▸Illustrations — Embed an SVG illustration directly in a component instead of loading a file.
- ▸Replacing an <img> tag — Inline an SVG instead of referencing it as a file, so CSS can style individual paths and colors dynamically.
Inline SVG vs an Image File
Inlining an SVG as a component (rather than loading it as an <img src="icon.svg">) costs one extra build step but unlocks real CSS control: individual paths can respond to hover states, the whole icon can inherit currentColor from its parent's text color, and props like size or stroke width become first-class component API instead of file variants. For a handful of icons that need to match your theme dynamically, the inline-component approach usually wins; for large, static illustrations, a plain image file is often simpler and lighter on your JS bundle.