Pegar SVG directamente en el código suele generar props inconsistentes y valores hardcodeados. Esta guía te da un flujo limpio para React + TypeScript.
1) Normaliza el SVG de entrada
- Elimina grupos redundantes, metadatos y estilos inline antes de convertir.
- Conserva el viewBox para que el escalado del componente sea predecible.
- Renombra IDs, máscaras y clips para evitar colisiones cuando se renderizan muchos iconos.
2) Genera un componente type-safe
- Usa props TypeScript que extiendan props SVG para tener IntelliSense completo.
- Define width/height por defecto y permite override desde el uso.
- Sustituye fills fijos por currentColor cuando el icono deba heredar el color del texto.
3) Integra en un design system
- Guarda iconos en una carpeta estable y exporta desde un único barrel.
- Aplica lint o tests para bloquear atributos SVG inválidos en CI.
- Documenta ejemplos con tokens de tamaño y aria-labels.