Paste your SVG code and get valid JSX for React. Converts attributes, removes xmlns, and optionally wraps in a reusable component.

How SVG to JSX Works

SVG is valid XML, but React uses JSX which has different attribute naming conventions. This tool automatically transforms SVG attributes to their JSX equivalents so you can paste SVG directly into your React components without manual edits.

The conversion handles three main categories of changes: reserved word replacements (like class to className), hyphenated attribute conversion to camelCase, and inline style string transformation to style objects.

Everything runs in your browser. No SVG data is sent to any server, making it safe for proprietary icons and design assets.

Common Attribute Conversions

SVG Attribute	JSX Equivalent	Notes
class	className	Reserved word in JavaScript
stroke-width	strokeWidth	Hyphenated to camelCase
fill-rule	fillRule	Hyphenated to camelCase
clip-path	clipPath	Hyphenated to camelCase
xmlns	(removed)	Not needed in JSX
style="fill:red"	style={{ fill: "red" }}	String to object syntax
fill-opacity	fillOpacity	Hyphenated to camelCase
stroke-linecap	strokeLinecap	Hyphenated to camelCase

React Component Wrapper

When the "Wrap in component" option is enabled, the tool generates a reusable React component that spreads props onto the root <svg> element. This lets you override width, height, className, and other attributes from the parent:

export function Icon(props) {
  return (
    <svg {...props} viewBox="0 0 24 24" fill="none">
      <path d="M12 6v6l4 2" />
    </svg>
  );
}

This pattern is used by popular icon libraries like Heroicons and Lucide. Spreading props first means your overrides take priority over the SVG defaults.

FAQ

Is my SVG data safe?

Yes. The conversion runs entirely in your browser using JavaScript. No data is sent to any server. You can verify this by checking the Network tab in your browser's developer tools.

Does it handle all SVG attributes?

The tool covers all standard SVG presentation attributes, XLink attributes, and XML attributes that require camelCase conversion in JSX. This includes over 60 attribute mappings.

What about inline styles?

Inline style attributes are converted from CSS strings (e.g., style="fill:red;stroke:blue") to React style objects (e.g., style={{ fill: "red", stroke: "blue" }}). CSS property names are converted to camelCase as React requires.

Why remove xmlns?

The xmlnsattribute declares the SVG namespace for XML parsers. Since JSX is not XML (it's a JavaScript syntax extension), the namespace declaration is unnecessary and React will warn about it. Removing it keeps your output clean.

Can I use the output in Next.js / Gatsby / Remix?

Yes. The JSX output works in any React-based framework. Just paste it into a component file. If you use the component wrapper, export it from its own file for reuse across your project.

SVG to JSX Converter