Pegar SVG directamente en el código suele crear props inconsistentes y valores fijos. Esta guía te ofrece un flujo de trabajo limpio de iconos en React + TypeScript.
1) Normaliza la entrada SVG
- Limpia grupos, metadatos y estilos en línea innecesarios antes de la conversión.
- Conserva el viewBox para que el escalado de los componentes sea predecible.
- Renombra IDs y máscaras para evitar colisiones cuando se renderizan varios iconos en una página.
2) Genera un componente seguro por tipos
- Usa props de TypeScript que extiendan las props de SVG para soporte completo de IntelliSense.
- Define ancho/alto por defecto y permite sobrescribirlos desde el uso del componente padre.
- Sustituye los rellenos fijos por currentColor cuando los iconos deban heredar el color del texto.
3) Integra en un sistema de diseño
- Guarda los iconos en una carpeta predecible y expórtalos desde un único archivo barrel.
- Aplica reglas de lint o tests para bloquear atributos SVG no válidos en CI.
- Documenta ejemplos de uso para tokens de tamaño semánticos y aria labels.