Incollare un SVG direttamente nel codice porta spesso a props incoerenti e valori fissati in modo rigido. Questa guida propone un workflow pulito per gestire le icone con React e TypeScript.
1) Normalizza l'SVG in ingresso
- Pulisci gruppi inutili, metadati e stili inline prima della conversione.
- Mantieni la viewBox cosi il ridimensionamento del componente resta prevedibile.
- Rinomina IDs e masks per evitare collisioni quando più icone vengono renderizzate nella stessa pagina.
2) Genera un componente type-safe
- Usa props TypeScript che estendono le props SVG per avere IntelliSense completo.
- Imposta width e height di default e consenti override dal componente genitore.
- Sostituisci i fill fissi con currentColor quando le icone devono ereditare il colore del testo.
3) Integra il tutto nel design system
- Organizza le icone in una cartella prevedibile ed esportale da un unico barrel file.
- Applica regole di lint o test per bloccare attributi SVG non validi in CI.
- Documenta esempi d'uso per token semantici di dimensione ed etichette aria.