Wenn SVG direkt in Code eingefügt wird, entstehen oft inkonsistente Props und hartkodierte Werte. Diese Anleitung zeigt einen sauberen React- und TypeScript-Icon-Workflow.
1) SVG-Eingabe normalisieren
- Entfernen Sie vor der Konvertierung unnötige Gruppen, Metadaten und Inline-Stile.
- Behalten Sie die viewBox bei, damit die Skalierung von Komponenten vorhersehbar bleibt.
- Benennen Sie IDs und Masken um, um Kollisionen zu vermeiden, wenn mehrere Icons auf einer Seite gerendert werden.
2) Eine typsichere Komponente erzeugen
- Nutzen Sie TypeScript-Props, die SVG-Props erweitern, für volle IntelliSense-Unterstützung.
- Setzen Sie Standardwerte für Breite/Höhe und erlauben Sie Überschreibungen aus der Nutzung im Parent.
- Ersetzen Sie feste Füllungen durch currentColor, wenn Icons die Textfarbe erben sollen.
3) In ein Design-System integrieren
- Speichern Sie Icons in einem vorhersehbaren Ordner und exportieren Sie sie über eine einzige Barrel-Datei.
- Wenden Sie Lint-Regeln oder Tests an, um ungültige SVG-Attribute in CI zu blockieren.
- Dokumentieren Sie Beispiele für semantische Größen-Tokens und aria-Labels.