Wenn SVG direkt in den Code kopiert wird, entstehen oft uneinheitliche Props und hart codierte Werte. Dieser Guide zeigt Ihnen einen klaren Workflow für React- und TypeScript-Icons.
1) SVG-Eingabe normalisieren
- Bereinigen Sie unnötige Gruppen, Metadaten und Inline-Styles vor der Konvertierung.
- Behalten Sie die viewBox bei, damit die Skalierung der Komponente vorhersagbar bleibt.
- Benennen Sie IDs und masks um, damit es keine Kollisionen gibt, wenn mehrere Icons gleichzeitig gerendert werden.
2) Eine typsichere Komponente erzeugen
- Verwenden Sie TypeScript-Props, die SVG-Props erweitern, damit IntelliSense vollständig verfügbar bleibt.
- Definieren Sie Standardwerte für width und height und erlauben Sie Überschreibungen aus der aufrufenden Komponente.
- Ersetzen Sie feste fills durch currentColor, wenn Icons die Textfarbe des übergeordneten Elements übernehmen sollen.
3) In ein Design-System integrieren
- Legen Sie Icons in einer klaren Ordnerstruktur ab und exportieren Sie sie über eine zentrale Barrel-Datei.
- Setzen Sie Lint-Regeln oder Tests ein, um unzulässige SVG-Attribute in der CI zu blockieren.
- Dokumentieren Sie Beispiele für semantische Größentokens und aria-Labels.