SVG to JSX / React Component Converter

Pegá cualquier SVG → sacá un React component limpio con prop-forwarding y attrs camelCase

🔒 100% en el browser🆓 Gratis para siempre⚡ Sin sign-up

Nota: La interfaz de la herramienta de abajo por ahora solo está en inglés. Estamos traduciéndolas una a una. Ver esta herramienta en inglés →

Component nameTypeScript typingReact.memo wrap

SVG source

React component

import * as React from "react";

export const Icon = React.memo((props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="M12 2v20M2 12h20"/>
  </svg>
));

export default Icon;

Cómo funciona

1
Pegá SVG markup
Copy del dev mode de Figma, de un file de icon-library o pegá <svg>…</svg> raw.
2
Pick nombre del component y typing
Elegí el nombre del component y output JavaScript o TypeScript.
3
Copiá el component
Attrs quedan en camelCase, style se vuelve un object y los props se forwardean al <svg> root.

Sobre SVG to JSX / React Component Converter

SVG to JSX converter gratis. Pegá cualquier markup de SVG para sacar un React functional component limpio con attributes en camelCase, prop forwarding y typing de TypeScript. Ideal para convertir icon exports de Figma, Sketch o Illustrator en React components listos para usar. SVG to JSX / React Component Converter en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.

Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.

Preguntas frecuentes

¿Qué se transforma?

Attrs kebab-case → camelCase (stroke-width → strokeWidth), class → className, style strings → objects, y el <svg> root forwardea todos los props para size, color y event handlers.

¿Y la optimización SVGO?

Esta tool convierte a JSX - para achicar SVGs primero, usá la tool SVG Optimizer al lado.

¿Se sube mi SVG?

No. La conversión es pura manipulación de string y corre entera en tu browser.

Leer más

5 min de lectura

The SVG workflow that keeps your React bundle small

How to take a Figma export from 15KB to 400 bytes, convert it into a clean React component, and ship icons without a bloated icon library.

JSON to CSV

Convertí JSON arrays a CSV descargable

Timestamp Converter

Convierte entre Unix time, ISO 8601 y fechas legibles

Markdown to HTML

Convierte Markdown a HTML limpio con preview en vivo

YAML ↔ JSON

Convertí YAML a JSON y viceversa con validación completa

JSON → TypeScript

Generá interfaces o types de TypeScript desde un sample JSON

Base Converter

Convertí entre binary, octal, decimal y hex