🧬

SVG to React/JSX Component Converter

Convert SVG into React/JSX components. Auto kebab-case → camelCase attributes, TypeScript types, currentColor, size/color props.

All tools Browser-only

SVG (paste or upload)

Component name

TypeScript (.tsx) Add size/color props Strip fixed fill (use currentColor)

React/JSX Component

Convert SVG (raw XML or Figma export) into a React/JSX component. Changes kebab-case attributes to camelCase, escapes <style>, optional TypeScript types.

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.