Options:
SVG Input
React JSX Output
What Gets Converted
class= → className=
for= → htmlFor=
stroke-width= → strokeWidth=
fill-rule= → fillRule=
clip-path= → clipPath=
stop-color= → stopColor=
xmlns:xlink= → removed
<?xml ...?> → removed
style="k:v" → style={{k:'v'}}
⚙️ How the SVG → JSX Converter Works
React's JSX looks like HTML but compiles into JavaScript function calls. Because of this, standard SVG attributes (like stroke-width) break JSX. This tool performs Regex transformations to fix them.
class="icon" → className="icon"
stroke-width="2" → strokeWidth="2"
style="color: red" → style={{ color: 'red' }}
fill="red" → fill="currentColor"
1
Sanitization: XML declarations (
<?xml...>), DOCTYPE definitions, and HTML comments (<!--...-->) are stripped using Regex patterns.2
Attribute Mapping: Over 40 specific SVG attributes (e.g.,
stroke-linecap, fill-rule) are identified and transformed into their camelCase React equivalents.3
Style Objects: Inline CSS strings are split by semicolons, keys are camelCased, and the entire block is wrapped in JSX object brackets
{{ }}.
Prop Spreading: The tool automatically identifies the root
<svg> tag and injects {...props} so the resulting React component can accept external classNames and styles.
This runs purely via JavaScript string manipulation in your browser.