SVG to JSX & React Component Converter

Transform raw SVG vector markup into clean React JSX/TSX or Vue 3 component code. Automatically camelCases attributes and injects props.

Target:

Component Name:

Use currentColor Remove width/height

Input Raw SVG Code:

Generated Component:

</> Embed this tool on your website / blog No code required · Copy and paste

<iframe src="https://lucentool.com/svg-to-jsx" width="100%" height="650" style="border:1px solid #e5e0d8;border-radius:12px;max-width:850px;width:100%;" frameborder="0"></iframe>
<div style="font-size:12px;color:#78716c;margin-top:6px;font-family:sans-serif;">Powered by <a href="https://lucentool.com/svg-to-jsx" target="_blank" style="color:#c85a32;text-decoration:none;">Lucentool - SVG to JSX & React Component Converter</a></div>

HTML Embed Code (iframe):

<iframe src="https://lucentool.com/svg-to-jsx" width="100%" height="650" style="border:1px solid #e5e0d8;border-radius:12px;max-width:850px;width:100%;" frameborder="0"></iframe>
<div style="font-size:12px;color:#78716c;margin-top:6px;font-family:sans-serif;">Powered by <a href="https://lucentool.com/svg-to-jsx" target="_blank" style="color:#c85a32;text-decoration:none;">Lucentool - SVG to JSX & React Component Converter</a></div>

Why Does React Throw Errors with Raw SVG?

In React, JSX is syntactic sugar for JavaScript objects. Browsers throw DOM warnings when attributes use kebab-case instead of camelCase conventions (e.g. stroke-width must be strokeWidth).

Crucial JSX Conversions

stroke-width ➡️ strokeWidth
stroke-linecap ➡️ strokeLinecap
fill-rule ➡️ fillRule
class ➡️ className
currentColor 颜色继承：Using currentColor lets the icon inherit CSS font color classes seamlessly.

SVG to JSX & React Component Converter

Why Does React Throw Errors with Raw SVG?

Crucial JSX Conversions

Related & Recommended Tools