Nicolas Gallagher
Bei Twitter habe ich den hier beschriebenen Ansatz verwendet, um die SVG-Icon-Bibliothek des Unternehmens in mehreren verschiedenen Formaten zu veröffentlichen: optimierte SVGs, reine JavaScript-Module, React DOM-Komponenten und React Native-Komponenten.
Es gibt keine Einzige Wahre Methode©, um ein SVG-Icon-System zu erstellen. Das Einzige, was SVG-Icon-Systeme gemeinsam haben, ist, dass irgendwie und irgendwann SVG verwendet wird, um dieses Icon anzuzeigen. Ich muss mal Zeit finden, einen Beitrag zu schreiben, der all diese Möglichkeiten beleuchtet.
Was unterschiedliche Systeme tendenziell gemeinsam haben, ist eine Art Build-Prozess, um einen Ordner voller SVG-Dateien in ein programmatisch besser verdauliches Format umzuwandeln. Zum Beispiel erstellt gulp-svg-sprite Ihren Ordner mit SVGs und generiert einen SVG-Sprite (ein Bündel von <symbol>s), um ihn in diesem Typ von SVG-Icon-System zu verwenden. Grunticon verarbeitet Ihren Ordner mit SVGs zu einer CSS-Datei und kann diese zu Inline-SVGs erweitern. Gallaghers Skript erstellt React-Komponenten daraus und wie er sagte, ist das großartig für die Auslieferung an verschiedene Ziele sowie für die Performance-Optimierung, wie z. B. Code Splitting.
Dies spricht für die Vielseitigkeit von SVG. Es ist einfach Markup, daher ist es einfach zu handhaben.