SVG to JSX / Tailwind Converter

How it works

Paste raw SVG markup exported from Illustrator, Figma, or Sketch and get back a ready-to-use React component, with SVG attributes converted to camelCase JSX props and an optional TypeScript signature.

1. Paste your SVG markup into the input field.
2. Set a component name and toggle whether to generate TypeScript props.
3. The JSX output updates automatically as you type.
4. Copy the generated component and drop it into your codebase.

Common use cases

• Converting icon exports from a design tool into React components without hand-editing attribute names.
• Turning a one-off SVG illustration into a reusable, prop-driven component.
• Migrating a project's inline <img src="icon.svg"> references to inline SVG components for easier styling.
• Quickly checking what a design export's SVG markup looks like as JSX before committing it to a component library.

FAQ

Does it handle SVGs with embedded styles or IDs?

It converts standard SVG attributes to their camelCase JSX equivalents (e.g. stroke-width → strokeWidth); embedded <style> blocks or ID-based references are preserved as-is rather than rewritten.

Can I use the generated component with any icon color?

If your SVG uses stroke="currentColor" or fill="currentColor" (common in icon sets), the resulting component inherits color from CSS, so you can style it like text.