Bobby Grace, vom Dropbox Paper-Team
Auf technischer Seite verwenden wir Inline-SVGs. Diese haben viele Vorteile. Ein Vorteil ist, dass SVG ein gut strukturiertes Format ist, das wir mit Code manipulieren können. Paper verwendet auch React und hat eine Komponente zum Einfügen von Icons.
Sie
- Verwenden eine einzige Sketch-Datei, die im Repository eingecheckt ist, als Ort, um alle Icons zu entwerfen und zu speichern.
- Verwenden gulp-sketch, um sie alle einzeln zu extrahieren.
- Das Build-Skript optimiert sie anschließend alle und erstellt eine Datenquelle mit allen Icons und ihren Eigenschaften.
- Diese Daten befeuern die React-Komponente
<SvgIcon />. (Siehe auch unseren Artikel).
Sie nennen es Papercons.
Wenn nun jemand nach einem Icon fragt, können wir einfach einen Link zu allen neuesten Produktions-Icons teilen. Kein lästiges Suchen, Kontextwechsel und lange Gesprächsfäden mehr.