Geschichte — Dokumentation
Das exakte Produkt-Icon in die Doku bekommen, scharf
„Meine Doku sagte den Leuten immer wieder ‚klick auf das Export-Icon‘, und das Icon, das ich neben diesen Satz geklebt hatte, war ein unscharfer 18-Pixel-Ausschnitt aus einem Screenshot. Auf einem Retina-Display sah das aus wie ein Fehler. Ich wollte das echte Glyph — genau das aus dem Produkt — inline in der Seite.“
Der Ausgangspunkt
Anleitungen sind nur so klar wie das Icon daneben
Was nicht funktionierte
„Icons aus Screenshots zu schneiden ist ein verlorenes Spiel. Sie sind Raster, verschwimmen also in dem Moment, in dem jemand zoomt oder auf einem hochauflösenden Bildschirm liest. Sie schleppen einen Hintergrundton von der Stelle mit, an der ich sie ausgeschnitten habe. Und sie veralten: Das Produkt liefert ein neues Icon aus, meine Doku zeigt noch das vom letzten Quartal. Ich hätte beim Design Exporte anfordern können, aber das ist eine Warteschlange, und ich habe heute geschrieben.“
Der Rechtsklick half auch nicht: Die Glyphen waren Inline-Markup ohne Bild-URL dahinter. Nichts zu speichern.
Der Wechsel
Tomás öffnete das Produkt, klickte SVG Downloader an und blätterte durch die isolierten Vorschauen bis zum exakten Symbolleisten-Glyph, das er brauchte. Jedes Icon erscheint für sich, fern der überladenen Oberfläche, sodass keine Unklarheit darüber besteht, welches man greift. Ein Dateiname — export.svg —, ein Klick, fertig.
„Inline in MDX ist das Icon bei jedem Zoom scharf, es erbt über currentColor die Textfarbe der Doku und sitzt damit in einem Satz wie ein Wort, und es ist das tatsächliche Produkt-Glyph — nicht meine Annäherung daran. Wenn sich das Export-Icon des Produkts ändert, hole ich es in zehn Sekunden neu. Die Datei kam mit repariertem xmlns herunter und funktionierte im Build einfach.“
„Die Doku sieht endlich aus wie das Produkt statt wie eine Fotokopie davon. Und ich warte nicht mehr auf eine Export-Warteschlange, um einen Satz zu schreiben.“
— Tomás Herrera, technischer RedakteurDas Ergebnis
- ScharfInline-SVG bleibt bei jedem Zoom und auf jedem Display knackig
- 10 Sek.um ein Icon neu zu holen, wenn das Produkt es aktualisiert
- currentColorGlyphen erben die Textfarbe der Doku, inline in einem Satz
- Was die Arbeit gemacht hat
- Die Inline-SVG-Erkennung plus die isolierte Vorschau, um das exakte Glyph zu wählen, gespeichert unter einem eigenen Namen. Siehe die universelle Methode.
- Warum das Icon schwarz aussah
- Viele UI-Glyphen nutzen
currentColorund werden ohne eingebrannte Farbe gespeichert — genau das, was man inline im Text will. In der Doku nehmen sie automatisch die Farbe des Absatzes an. - Eine Anmerkung zu Rechten
- Ein Produkt zu dokumentieren, über das du schreiben darfst, ist unproblematisch; prüfe die Lizenzen, bevor du die Icons einer anderen Firma außerhalb dieses Kontexts weiterverwendest.
Zusammengesetzte Geschichte — ein illustrativer, aber typischer Ablauf. Person und Produkt sind fiktiv; das hier beschriebene Verhalten der Erweiterung ist echt. Mehr Geschichten →
Eine Doku, die zum Produkt passt
Hol dir das exakte Glyph als Inline-SVG — scharf bei jedem Zoom, farbbewusst, immer aktuell.