7.1 – Icons

Die Glyphen

Zeilen tragen ein Symbol vor dem Titel, wie in einem Datei-Explorer:

Symbol	Wofür
Ordner	ein Ordner
offener Ordner	ein Ordner, der offen ist — oder, wo nichts klappt, in dem die aktuelle Seite liegt
Seite	eine Seite, auch „Übersicht“
Haus	der Eintrag „Start“ aus showHome

Wo sie erscheinen, hängt von der Variante ab:

Variante	Glyphen
tree, accordion, flyout	auf jeder Ebene
dropdown, mega, columns	in den Menüs und Spalten, nicht in der obersten Zeile
bar, tabs, select, pager	keine

Eigene Icons

Ein eigenes Icon ersetzt die Glyphe seiner Zeile — und erscheint auch in Varianten, die sonst keine Glyphen zeigen, in bar, tabs und im pager. Nur im select nicht: Eine Option eines Auswahlmenüs kann kein Bild enthalten.

Im Frontmatter der Seite:

---
title: Anleitungen
navIcon: lucide:book-open
---

In einer index.md gilt es für den Ordner.

In der Konfiguration, nach Pfad — für Ordner ohne index.md, oder wenn alle Icons an einer Stelle stehen sollen:

options:
  nodeIcons:
    docs: lucide:book-open
    docs/api: "🧩"
    blog: none

Steht an beiden Stellen etwas, gewinnt das Frontmatter.

Was ein Icon sein kann

Wert	Ergebnis
lucide:book-open	das Lucide-Icon als eingebettetes SVG
📘	das Emoji
§	ein kurzer Text
none	gar kein Symbol, auch keine Glyphe

Lucide ist eine freie Icon-Sammlung mit weit über tausend Symbolen; die Namen stehen auf lucide.dev/icons. Die ganze Sammlung steckt im Plugin — in der Site ist nichts zu installieren. Ein unbekannter Name gibt beim Bau eine Meldung aus und zeigt nichts.

Icons sind etwas größer als die Schrift (1.1em), in der gedämpften Farbe der Navigation, und auf der aktuellen Seite und ihrem Pfad in der Akzentfarbe.

icons — was gezeigt wird

options:
  icons: both   # both (Vorgabe) | type | custom | none

Wert	Glyphen	eigene Icons
both	wo kein eigenes Icon steht	ja
type	ja	nein
custom	nein	ja
none	nein	nein

true und false werden als both und none verstanden.

iconNames — die Symbole des Plugins

Auch die Glyphen, der Pfeil, der Burger-Button und die Pager-Pfeile sind Lucide-Icons. Jedes lässt sich tauschen, mit dem Namen ohne lucide::

options:
  iconNames:
    folder: folder-closed
    chevron: chevron-right
    next: arrow-right
    previous: arrow-left

Schlüssel	Vorgabe	Wo
folder	folder	Ordner
folderOpen	folder-open	offener Ordner
file	file	Seite
home	house	„Start“
chevron	chevron-down	Pfeil an aufklappbaren Ordnern
menu	menu	Burger-Button
close	x	Schließen im mobilen Menü
previous, next	chevron-left, chevron-right	Pager

Ein Pfeil nach rechts dreht anders

Ein offener Ordner dreht seinen Pfeil um 180 Grad — richtig für chevron-down. Wer chevron-right nimmt, will 90 Grad: .quartz-nav { --quartz-nav-chevron-open-rotate: 90deg; } (7.2).