Convertir un SVG en componente React (JSX)
Convierte un SVG en un componente React/JSX listo para usar (atributos camelCase, nombre personalizado).
The SVG receives {...props}: you can pass className, width, style, etc. Attributes are converted to camelCase for React.
🔒 100 % en el cliente — no se envía ningún dato
Convierte cualquier SVG en un componente React reutilizable: los atributos pasan a camelCase (stroke-width → strokeWidth), el nombre del componente es personalizable y se añade {...props}. Todo se genera localmente.
What is it for?
- ▸ Crear un componente de icono React desde un SVG
- ▸ Integrar un pictograma en una biblioteca de componentes
- ▸ Hacer un SVG estilizable mediante props (className, color)
- ▸ Convertir un lote de iconos exportados
FAQ
¿Por qué añadir {...props}?
Para poder pasar className, width, height, style o manejadores de eventos al SVG desde fuera del componente.
¿Se preservan etiquetas como linearGradient?
Sí, se conserva el uso de mayúsculas de los elementos SVG (linearGradient, clipPath…) como exige React.
¿Puedo cambiar el color después?
Sí, si el SVG usa currentColor, el color sigue la propiedad CSS color del componente padre.
¿Es compatible con TypeScript?
La salida es JSX simple; para TypeScript, añade un tipo de props como (props: React.SVGProps<SVGSVGElement>).