SVG to React/JSX Component Converter

When to convert SVG → JSX

• From Figma exports: designer exports SVG → you paste it into a React component.
• Custom icon libraries: instead of react-icons, build your own from Heroicons / Tabler.
• Logos + illustrations: brand SVGs → components with size/color props.
• Animation: convert to JSX so state can drive attributes.

SVG vs JSX differences

• kebab-case → camelCase: stroke-width → strokeWidth, fill-rule → fillRule.
• class → className (JSX rule for HTML/SVG elements).
• style: CSS string → object: style="color:red" → style={{color: 'red'}}.
• <style> tags: wrap the CSS in a backtick expression so it isn't parsed: <style>{`...`}</style>.
• viewBox: STAYS camelCase (it isn't view-box).

Props pattern tips

• size prop: width/height take props for easy resizing. Default 24.
• currentColor: use fill="currentColor" so icons inherit the parent's color — change color via className="text-red-500".
• ...props spread: lets consumers pass onClick, aria-label, etc.
• TypeScript: extend React.SVGProps<SVGSVGElement> for full type safety.