Eine abdriftende Icon-Bibliothek prüfen — eine Design-Systems-Geschichte

Der Ausgangspunkt

Sechshundert Screens und eine Designdatei, der niemand traute

Wer: Maya, eine Design-Systems-Entwicklerin, geholt, um die Komponentenbibliothek eines fünf Jahre alten Fintech-Dashboards zu vereinheitlichen.
Stack: React, ein internes Icon-Paket, Figma, Storybook. Die Icons waren eine Mischung aus Inline-<svg>, ein paar alten Sprite-Sheets und einigen verirrten <img>-Tags.
Die Aufgabe: Jedes Icon prüfen, das tatsächlich in der App ausgeliefert wird, die Dubletten und Fast-Dubletten finden und sie vor einem Umbau mit der Designbibliothek abgleichen.
Die Wand: Die gerenderte App war die einzige Quelle der Wahrheit — und keines dieser Icons ließ sich per Rechtsklick speichern.

Was nicht funktionierte

„Die Figma-Bibliothek war vor Jahren abgedriftet. Drei ‚Einstellungen‘-Zahnräder, zwei ‚Schließen‘-Kreuze in unterschiedlichen Strichstärken, ein ‚Export‘-Pfeil, der 2022 still neu gezeichnet, aber nie in der Designdatei aktualisiert wurde. Ich konnte nicht gegen Figma prüfen, weil Figma Teil des Problems war. Die Wahrheit stand im DOM.“

Mayas erster Anlauf war der manuelle, den jede Frontend-Person kennt: DevTools öffnen, den <svg>-Knoten finden, das äußere HTML kopieren, in eine Notizdatei einfügen, das xmlns von Hand ergänzen, damit es überhaupt gezeichnet wird, wiederholen. „Etwa vierzig Icons später, an einem Dienstag, habe ich eingesehen, dass das meine ganze Woche fressen würde — und ich mich trotzdem vertippen würde.“

Der Wechsel

Statt Knoten einzeln zu kopieren, ließ Maya SVG Downloader auf jedem wichtigen Screen laufen. Das Popup durchläuft das DOM und meldet eine Zahl — 0 → 24 SVGs gefunden — und übergibt dann jedes davon als echte Datei, Namensraum repariert, sodass sie direkt in Figma und VS Code öffnet.

erkennen

Ein Klick pro Screen: Das Panel fährt ein, und der Zähler bleibt bei der echten Zahl vorhandener Vektoren stehen — inline, Hintergrund und Sprite gleichermaßen.

„Die Zahl war das Erste, was half. Ein Screen, von dem ich dachte, er habe acht Icons, meldete vierzehn — sechs davon waren dekorative Hintergründe aus dem CSS, die in keiner Inventur je auftauchten. Dann gab mir Alle als ZIP laden den ganzen Satz des Screens auf einmal, dublettenfrei und nummeriert.“ Eigenständige Dateien zu diffen ist trivial; eine laufende App zu diffen nicht.

„Es machte aus der Prüfung statt Archäologie ein Diff. Ich hatte das tatsächliche Markup jedes Icons im Produkt nebeneinander, an einem Nachmittag — und konnte endlich belegen, welche wirklich dieselben waren.“

— Maya Okafor, Design-Systems-Entwicklerin

Das Ergebnis

~40Fast-Dubletten gefunden und auf einen kanonischen Satz zusammengeführt
1 Nachmittagstatt der Woche, auf die der manuelle Copy-Paste-Durchgang zusteuerte
0von Hand getippte xmlns-Korrekturen — jede Datei öffnete beim ersten Versuch

Was die Arbeit gemacht hat: Die Inline-SVG-Erkennung für die Komponenten, das Erfassen von CSS-Hintergründen für die dekorativen und Alle als ZIP laden pro Screen.
Warum nicht DevTools: Knoten von Hand zu kopieren verliert das xmlns, verpasst CSS- und Sprite-Quellen völlig und skaliert nicht über ein paar Icons hinaus. Siehe SVG-Icons extrahieren.
Datenschutz: Proprietäres Dashboard, deshalb wichtig: nichts verließ den Rechner. Kein Upload, kein Konto, keine Analyse.

Zusammengesetzte Geschichte — ein illustrativer, aber typischer Ablauf. Person und Firma sind fiktiv; das hier beschriebene Verhalten der Erweiterung ist echt. Mehr Geschichten →

Eine abdriftende Icon-Bibliothek prüfen, Screen für Screen

Sechshundert Screens und eine Designdatei, der niemand traute

Was nicht funktionierte

Der Wechsel

Prüf, was wirklich auf der Seite ist