Atomic Dev Tools

SVG → JSX / TSXConvert raw SVG markup into a clean React component with properly transformed attributes
Component
Spread propsRemove commentsExamples:
SVG Input
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
  <polyline points="20 6 9 11 4 16"></polyline>
</svg>
TSX Output
Output will appear here…
Attribute Transformations Applied12 rules
class→className
for→htmlFor
stroke-width→strokeWidth
fill-opacity→fillOpacity
clip-path→clipPath
stop-color→stopColor
font-size→fontSize
text-anchor→textAnchor
style="..."→style={{ ... }}
xmlns / xmlns:xlink→(removed)
xlink:href→href
onclick→onClick
DWG · T-SVG-TO-JSX100% client-side·⌘C copy · ESC → grid