Convertidor de SVG a React JSX
Convierta códigos vectoriales SVG en componentes React JSX listos para usar con props mapeadas
Mapea atributos XML de SVG a la nomenclatura compatible con JSX de React.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Pegue el código SVG original.
- Indique el nombre del componente de React.
- Realice la conversión y copie el componente generado.
Preguntas frecuentes
- ¿Es posible cambiar las propiedades después?
- Sí, dado que se exporta usando {...props}, puede asignarle clases, anchos y colores externamente.
- ¿Los nombres de atributos HTML originales, como class o stroke-width, se convierten automáticamente a la sintaxis de React, como className o strokeWidth?
- Sí; durante la conversión, class se convierte en className, y los atributos SVG con guion, como stroke-width o fill-rule, se transforman automáticamente a camelCase (strokeWidth, fillRule) tal como exige JSX. Los estilos en línea escritos como cadena, como style="color:red", también se convierten a sintaxis de objeto ({ color: 'red' }), de modo que el resultado se puede pegar y usar sin más ajustes.
- ¿Los nombres de atributos HTML originales, como class o stroke-width, se convierten automáticamente a la sintaxis de React, como className o strokeWidth?
- Sí; durante la conversión, class se convierte en className, y los atributos SVG con guion, como stroke-width o fill-rule, se transforman automáticamente a camelCase (strokeWidth, fillRule) tal como exige JSX. Los estilos en línea escritos como cadena, como style="color:red", también se convierten a sintaxis de objeto ({ color: 'red' }), de modo que el resultado se puede pegar y usar sin más ajustes.