Convertidor SVG a JSX / TSX
Transforma gráficos vectoriales en componentes React optimizados y listos para producción con sanitización automática.
Código o Archivo SVG
213 chars
Código JSX Resultante
tsx
import * as React from "react";
import type { SVGProps } from "react";
export function SvgIcon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
);
}
export default SvgIcon; Vista Previa Sanitizada Filtro Anti-XSS Activo
Configuración de Salida
TypeScript (TSX)
Envolver en Componente React
Dimensiones Dinámicas (1em)
Usar currentColor para Colores
Soporte forwardRef
Cómo convertir SVG a componentes React
Sigue estos 3 pasos para integrar vectores en tu stack frontend.
1
Pega o sube tu archivo SVG
Arrastra un archivo vectorial o pega directamente la etiqueta <svg> en el editor.
2
Personaliza las opciones del componente
Elige si deseas TypeScript, herencia de color con currentColor o escalado relativo con 1em.
3
Copia o descarga el código
Obtén el componente listo para importar y usar directamente en tus proyectos de React o Next.js.
100% Seguro y Local
Procesamiento en memoria con sanitización estricta
Los vectores se analizan en tu navegador. Todo script o manejador malicioso es eliminado antes de renderizarse.
Preguntas Frecuentes sobre SVG a JSX
React requiere sintaxis JSX: atributos en camelCase (como strokeWidth en lugar de stroke-width), className en vez de class y estilos como objetos.
Un SVG puede contener código JavaScript malicioso en etiquetas <script> o manejadores como onload. Bestools elimina cualquier vector de ataque antes de mostrarlo o convertirlo.
Permite que el icono herede automáticamente el color del texto (CSS color) definido en el elemento padre de tu aplicación.
Sí, genera componentes funcionales estándar compatibles con cualquier versión moderna de React, Vite, Next.js y Remix.