SVG to React JSX Converter
Translate SVG vector markup codes into React JSX components with props mapping
Converts SVG files to typescript React components spreading props.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Paste the SVG vector markup.
- Type target component function name.
- Convert and save the JSX component file.
FAQ
- Are styles preserved?
- Yes, attributes are translated to JSX format variables.
- Are original HTML attribute names like class or stroke-width automatically converted to React syntax like className or strokeWidth?
- Yes — during conversion, class becomes className, and hyphenated SVG attributes like stroke-width or fill-rule are automatically converted to camelCase (strokeWidth, fillRule) as JSX requires. Inline styles written as a string, like style="color:red", are also converted into object syntax ({ color: 'red' }), so the result can be pasted in and used without further edits.
- Are original HTML attribute names like class or stroke-width automatically converted to React syntax like className or strokeWidth?
- Yes — during conversion, class becomes className, and hyphenated SVG attributes like stroke-width or fill-rule are automatically converted to camelCase (strokeWidth, fillRule) as JSX requires. Inline styles written as a string, like style="color:red", are also converted into object syntax ({ color: 'red' }), so the result can be pasted in and used without further edits.