Developer Tool · 100% local

Turn raw SVG into a copy-ready React component.

Paste SVG markup, choose a component style, and generate JSX or TypeScript. Nothing is uploaded; conversion happens in this tab.

Input SVG

Component name

SVG markup

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L14.8 8.8L22 9.3L16.5 14L18.2 21L12 17.2L5.8 21L7.5 14L2 9.3L9.2 8.8L12 2Z" fill="#38bdf8" stroke="#0f172a" stroke-width="1.5" stroke-linejoin="round"/>
</svg>

TypeScript props Convert fills/strokes to currentColor Move size to props Wrap with React.memo

React component

Tip: always review third-party SVGs before using them in production. This helper cleans markup, but it is not a security scanner.