Convertidor de SVG a React JSX / TSX

Cómo hacer que el icono se comporte como texto

Un componente de icono es más fácil de reutilizar cuando toma el color y el tamaño del lugar donde se coloca. Sustituye los colores fill o stroke fijados manualmente por currentColor para que el icono siga el color del texto que lo rodea, y elimina width y height sin quitar viewBox, de modo que CSS o una className establezca el tamaño. Ejecutar primero el archivo mediante el limpiador de SVG elimina los metadatos del editor que, de otro modo, acabarían en tu bundle.

IDs, estilos y accesibilidad

Los degradados, las máscaras y las rutas de recorte se referencian mediante id. Si renderizas el mismo componente dos veces, la página tendrá IDs duplicados, por lo que la segunda copia podría apuntar al degradado de la primera. Genera IDs únicos con useId de React cuando un icono los utilice.

Un elemento <style> dentro del SVG rompe JSX porque sus llaves se interpretan como expresiones; mueve esas reglas a atributos o a una hoja de estilos. Para un icono decorativo, añade aria-hidden="true"; si transmite significado, añade role="img" y un <title>.

Cómo se usa

1. Pega el marcado SVG sin procesar.
2. Configura el nombre del componente, las interfaces de TypeScript y el reenvío de props.
3. Copia el código del componente de React listo para usar.

Privacidad y límites

La transformación del marcado se ejecuta íntegramente en JavaScript del lado del cliente.