Icons
Vier Icon-Sätze, und die eine Frage, die entscheidet, welcher davon ein Zeichen malt.
duxt bedient sich aus vier Iconify-Sammlungen. Die Frage lautet nie „welche sieht hier am besten aus" — sondern was das Gezeichnete ist, weil das der einzige Test ist, der zweimal dieselbe Antwort gibt.
| Satz | Zeichnet | Farbe | Genannt in |
|---|---|---|---|
| lucide | die Oberfläche, die duxt selbst zeichnet | einfarbig, erbt currentColor | überall; der Standard |
| vscode-icons | eine Datei, die Sprache eines Fences, ein Werkzeug des Stacks | eigene | file-icons.ts, und die Manager-Tabs |
| Simple Icons | eine Plattform, einen Dienst, ein Unternehmen als es selbst | einfarbig | die Komponente, die ihn nennt |
| flag-icons | die Region eines Locales | eigene | DuxtLocale, abgeleitet |
Die Regel
Was gezeichnet wird, entscheidet — und es gibt zwei Arten von Zeichen:
- Der Stack — eine Datei, die Sprache eines Fences, ein Werkzeug, das du ausführst — ist vscode-icons. Es trägt die echten Farben in der Datei, und genau das brauchen ein File-Tree und ein Code-Header.
- Ein Dritter als er selbst — eine Plattform, ein Dienst, ein Unternehmen, auf das die Site verlinkt oder dem sie etwas übergibt — ist Simple Icons.
Alles, was gar kein Zeichen ist — ein Kopieren-Knopf, ein Chevron, eine Lupe, ein Pfeil für einen externen Link — ist lucide und braucht keine Entscheidung.
Nach Bereich formuliert statt nach Verfügbarkeit, schreibt die Regel sich selbst
fort. Laravel, GitHub, Discord und OpenAI sind Simple Icons, weil sie Parteien
sind, die diese Site benennt, und keine Teile des Stacks, aus dem sie gebaut
ist. Die Package Manager sind vscode-icons, weil ein Tab, der pnpm add
ausführt, ein Werkzeug des Stacks benennt.
Der Bereich entscheidet, nicht die Sammlung. vscode-icons hat
file-type-claude — und das ist, schon dem eigenen Namensraum nach, das Icon
für eine Claude-Datei. Der Knopf, der diese Seite an die
Claude-Plattform schickt, ist simple-icons:claude, weil er die Plattform
benennt. Dieselbe Lesart hält simple-icons:openai daneben, statt ein Paar von
Knöpfen auf zwei Sammlungen aufzuteilen.
Warum nicht ein Satz für alles
Weil einfarbig und selbstfarbig verschiedene Aufgaben sind, keine verschiedenen Geschmäcker.
Ein Oberflächen-Icon muss die Textfarbe annehmen, sonst kämpft es mit jedem
Zustand um sich herum: Hover, aktiv, gedämpft, deaktiviert. lucide erbt
currentColor, also wird ein Bedienelement einmal gestylt und das Icon folgt.
Ein Dateityp-Icon muss seine Farben behalten, sonst wird ein File-Tree zu einer
Spalte gleich aussehender grauer Formen. Genau dafür gibt es vscode-icons, und
deshalb bildet app/utils/file-icons.ts jede Endung und jede Sprach-ID darauf
ab.
Farbe ist nicht unsere Erfindung
Die Package-Manager-Tabs waren früher Simple Icons, von Hand getönt — acht Hex-Werte, zwei je Manager, weil einer nicht beide Themes bedienen kann: buns Creme verschwindet auf Weiß, npms Rot wird auf Schwarz matschig. Jeder dieser Werte war eine Zahl, die jemand von einer Markenseite abgelesen hatte und beim nächsten Marken-Relaunch erneut ablesen müsste.
vscode-icons hat die Tabelle abgeschafft, indem es die Farben in der Datei
trägt. Wo ein Zeichen doch Hilfe braucht, sagt die Sammlung das meist selbst:
pnpm besteht aus orangen Quadraten und weißen, die Hälfte des Rasters
verschwindet also auf weißem Grund — und vscode-icons liefert dafür
file-type-light-pnpm mit #4e4e4e an Stelle des Weiß. Für keinen anderen
Manager hier gibt es eine solche Variante.
Ein Zeichen, das beide Schreibweisen braucht, wird zweimal gezeichnet und über
die Theme-Klasse getauscht (dark:hidden / hidden dark:block) — dieselbe
Technik, mit der das Vorschau-Poster der Landing-Page seine zwei Screenshots
ausliefert. Ein CSS-Filter über ein farbiges Zeichen erzeugt eine Farbe, die
niemand gewählt hat.
Lizenzen, und was eine Lizenz nicht geben kann
Alle vier Sammlungen sind permissiv und mit duxts MIT verträglich: vscode-icons
und flag-icons stehen unter MIT, lucide unter ISC, Simple Icons unter CC0-1.0.
Jede wird mit ihrer Lizenz auf der Danksagungsseite genannt, denn
icon.clientBundle inlined die SVGs in das, was ausgeliefert wird — das Paket
transportiert die Werke, also transportiert es die Hinweise.
Eine Lizenz auf der Datei ist keine Lizenz auf die Marke. Simple Icons sagt das in seiner eigenen LICENSE: CC0 gibt das SVG frei und kann kein Markenrecht freigeben, das es nie besaß. Dasselbe gilt für die Dateitypen von vscode-icons — MIT deckt die Zeichnung, nicht die Python-, Rust- oder Vue-Marke darin.
Was duxt tut, ist benennende Verwendung: das bun-Logo sitzt auf dem Tab, der
bun add ausführt, das Python-Icon beschriftet einen Python-Fence, die Zeichen
von Claude und OpenAI sitzen auf den Knöpfen, die die Seite an diese Dienste
schicken. Eine Sache zu benennen, um sie zu identifizieren, ist die Verwendung,
die das Markenrecht ohne Erlaubnis zulässt. Eines dieser Zeichen als duxts
eigenes Logo, Favicon oder als Zustimmung zu führen, wäre es nicht — und duxt
tut es nicht.