Does the converter run scripts or event handlers from my SVG?

No. Every input is sanitized first: script and foreignObject elements, on* event attributes, javascript: URLs, and external references are removed and listed. The preview shows only the sanitized markup as an image.

What is the difference between JSX and TSX output?

Both produce the same markup. TSX output with spread props imports the SVGProps type and types the props parameter as SVGProps , and the file downloads with a .tsx extension.

Which colors does the currentColor option replace?

Solid fill and stroke values in attributes or inline styles are replaced with currentColor. none, transparent, gradient or pattern references such as url(#id), and CSS variables are left unchanged.

Is the output optimized like SVGO?

No. The cleanup option removes comments and whitespace-only text between elements. Path data, precision, and element structure are not rewritten, so run a dedicated optimizer first if you need smaller paths.

SVG to JSX

Convert SVG markup into clean React JSX or TSX components

Código SVG

Suelta aquí un archivo .svg

Archivos SVG de hasta 5 MB.

También puedes pegar desde el portapapeles.

Opciones de conversión

Nombre del componente

PascalCase, por ejemplo ArrowRightIcon.

Formato de salida

Envolver en un componente de React

Propagar props en <svg>

Quitar width y height

Usar currentColor en fill y stroke

Más opciones

Limpiar espacios en blanco

Quita comentarios y texto que solo contiene espacios entre elementos. Es una limpieza segura, no un optimizador SVG completo.

Quitar comentarios

Conservar title y atributos ARIA

Desactívalo para iconos decorativos: se quitan title, desc, role y los atributos ARIA, y se añade aria-hidden.

Título accesible (opcional)

Reemplaza el title raíz y añade role="img".

Componente de React

Aquí aparece el componente generado.

Vista previa saneada

Pega el código SVG o sube un archivo para ver la vista previa.

SVG a imagenConvierte SVG en imágenes PNG, JPEG, WebP o AVIF nítidas a cualquier tamaño Generador de blobsGenera formas SVG orgánicas a partir de una semilla reproducible Generador de ondas SVGCrea separadores de ondas SVG simples o en capas con salida adaptable

Qué hace SVG to JSX

SVG to JSX convierte código SVG en un componente de React o en un elemento JSX simple. Los atributos se asignan a sus nombres de React (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), los estilos en línea se convierten en objetos style y el viewBox siempre se conserva para que el icono escale correctamente.

Cómo usarlo

1.Pega el código SVG, suelta o elige un archivo .svg, o carga el ejemplo.
2.Revisa la vista previa saneada y la lista de elementos inseguros eliminados.
3.Define el nombre del componente y elige salida JSX o TSX.
4.Activa el envoltorio, la propagación de props, la eliminación de width/height y currentColor según necesites.
5.Copia el código o descárgalo como archivo .jsx o .tsx.

Opciones

La propagación de props reenvía className, tamaño y eventos del componente al <svg> raíz; TSX añade el tipo SVGProps<SVGSVGElement>. Quitar width y height permite que CSS controle el tamaño mediante el viewBox. currentColor reemplaza los colores sólidos de fill y stroke para que el icono herede el color del texto; none, transparent, degradados (url(...)) y variables CSS no se modifican. Limpiar espacios elimina comentarios y texto con solo espacios entre elementos; es una limpieza segura, no un optimizador SVG completo. Desactiva los atributos de accesibilidad en iconos decorativos para quitar title, desc, role y ARIA y añadir aria-hidden, o escribe un título para etiquetar iconos con significado con role="img".

Seguridad y límites

Toda entrada se sanea antes de la vista previa y la conversión: se eliminan e informan <script>, <foreignObject>, manejadores como onclick, URL javascript:, referencias a imágenes o recursos externos y elementos no compatibles. Se rechazan las declaraciones DOCTYPE y las entidades XML. La vista previa muestra solo el código saneado como imagen, así que nada del SVG puede ejecutarse. El texto SVG está limitado a 5 MB. Como se descartan elementos no compatibles, compara la vista previa con el original al convertir ilustraciones complejas.

SVG to JSX

Herramientas relacionadas