SVG to JSX Online — React Component Generator

Convert SVG markup into a React function component with className and camelCase attributes. TypeScript export optional.

Loading…
SVG to JSX for React components
Turn SVG snippets into React function components without a heavy compiler. Handles class → className and common SVG attributes.

Developer notes

Embedded <style> blocks and sprite sheets are not supported in v1. xlink:href and xmlns are converted to JSX-friendly names. Review output before dropping into design systems. Pair with validate-svg to catch missing viewBox or title.

Options

Component name
Sets the React function component identifier in the generated JSX (e.g. SvgIcon).
Default export
When on, emits export default function …; when off, a named export.
TypeScript
Adds a typed props signature (SVGSVGElement attributes) for direct use in TSX.

When to use this tool

Drop marketing icons into React design systems. Convert design-handoff SVG into TSX components. Prototype component names before adding to a repo. Learn JSX attribute differences from raw SVG.

Worked examples

Badge with JSX-unfriendly attributes

Sample input

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text> </g> </g> </svg>

Output

export default function PromoBadge(props) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" className="promo-badge" role="img" aria-labelledby="badge-title badge-desc" {...props}> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stopColor="#f97316" /> <stop offset="100%" stopColor="#fb923c" /> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18" /> </clipPath> </defs> <g clipPath="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)" /> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fillOpacity="0.14" /> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z" /> </g> </g> </svg> ) }

xlink href attribute

Sample input

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10"><use xlink:href="#dot"/></svg>

Output

Outputs xlinkHref on <use> with a React component wrapper.

Related SVG tools

Optimize first with optimize SVG, validate accessibility on validate SVG, or open the SVG hub.

SVG to JSX FAQ

Lightweight React conversion

Does it support embedded CSS?

Not in v1. <style> blocks are skipped. Inline style attributes are converted to objects.

TypeScript export?

Enable the TypeScript toggle to add props typing on the component.

Sprites?

Sprite sheets are out of scope. Paste a single root <svg> element.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

Explore other tool categories