🔒 Runs in your browser — nothing is uploaded✓ Free, no signup
SVG to JSX — React Component Converter
Paste an SVG to turn it into a React component. Attributes are converted to camelCase, and you can make the icon resizable and colourable with props and currentColor.
0 characters
React component
When should you use the SVG to JSX?
- Turning icons exported from Figma or Illustrator into React components
- Making SVG icons inherit text colour with currentColor
- Building a small icon set without extra tooling
How to use the SVG to JSX
- 1
Paste SVG
Paste the full <svg> markup — the XML declaration is removed automatically.
- 2
Name the component
Use a PascalCase name such as ArrowIcon.
- 3
Make it flexible
Remove width/height and spread props so you can size it with CSS, and use currentColor to colour it with text colour.
- 4
Copy
Copy the component or download it as a .jsx file.
Examples
Icon with props
SVG
<svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2"> <circle cx="12" cy="12" r="10"/> </svg>
JSX
export default function Icon(props) {
return (
<svg viewBox="0 0 24 24" strokeWidth="2" {...props}>
<circle cx="12" cy="12" r="10" />
</svg>
);
}Common errors and how to fix them
Invalid SVG- The markup must be well-formed XML — every tag closed and attribute values quoted. Export the SVG again from your design tool.
The icon doesn't change colour- Tick 'Use currentColor', then set the CSS color of the parent element.
More from Code Formatters & Minifiers
Free tools that run in your browser — no signup, nothing uploaded.
SQL Formatter & Beautifier
Format SQL queries for MySQL, PostgreSQL, SQL Server, SQLite and more.
CSS Minifier & Compressor
Optimize CSS by removing whitespace and comments to accelerate page load time.
JS Minifier & Compressor
Compress JavaScript to improve website speed and performance.
XML Formatter & Validator
Format, validate and minify XML, with errors shown by line and column.
HTML Formatter & Beautifier
Beautify or minify HTML with clean, consistent indentation.
Markdown Editor & Preview
Write Markdown with a live preview and copy the HTML.
HTML to JSX Converter
Convert HTML to valid React JSX — className, style objects and more.
HTML to Markdown Converter
Convert HTML to clean Markdown, including tables and code blocks.
GraphQL Formatter
Format GraphQL queries, mutations and schemas with Prettier.
SVG to JSX FAQ
Hyphenated SVG attributes become camelCase — stroke-width → strokeWidth, fill-rule → fillRule — class becomes className, and xlink:href becomes xlinkHref. data-* and aria-* attributes are kept as they are.
It replaces fill and stroke colours with currentColor, so the icon takes the CSS text colour of its parent — handy for icons in buttons and links.
Without fixed sizes, the icon scales with CSS or props like width={32}, while viewBox keeps its proportions.
It passes any props you give the component — className, width, onClick, aria-label — straight to the <svg> element.
No — it converts the markup as is. Optimise first with a tool like SVGO if you want smaller files.
No. Everything runs in your browser, so your SVG never leaves your device.