Ein Satz aus Strichzeichen, eingefärbt über die Textfarbe. Feste Sach-Rollen sagen, was eine Sache ist – vom Auto für die Fahrt bis zum Fragezeichen für Alberts Vorschlag. Kein Emoji, nirgends.
Zeichen sind bei uns Strichzeichen: 2 px Strich, runde Enden, keine Füllung. Ein Zeichen steht neben Text und macht ihn schneller erfassbar. Den Text ersetzt es nicht.
Im Code heißt das Zeichen nach seiner Rolle, nicht nach seiner Datei: <Icon name="fahrt" /> statt <Icon name="car-front" />. So bleibt die Bedeutung an einer Stelle, im Bauteil Icon.
Im Kartenkopf steht das Zeichen der Sache links in einem hellen Kreis: 26 px auf dem Mac, 24 px auf dem iPhone (Bauteil SachSymbol). Rechts stehen die Punkte der Menschen. Sonst nichts im Kopf.
Eingefärbt wird über currentColor. Das Zeichen trägt die Textfarbe seines Elternteils. So schaltet es mit dem Modus um und kommt in Screenshots und Exporten mit.
Inline gerendert, nie als Bild-URL. Die Pfade liegen in components/bausteine/zeichen.js, Quelle bleiben die SVG-Dateien in assets/icons/.
Dekorativ ohne titel: Das Zeichen bekommt aria-hidden, weil der Text daneben steht. Steht ein Zeichen allein, etwa in einem runden Knopf, braucht es einen titel oder ein Label am Knopf.
Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.
<Icon name="fahrt" groesse={16} titel="Fahrt" />
name nimmt eine Sach-Rolle (fahrt, schule, sport, essen, arzt, musik, freude, familie, ritual, schwimmen, vorschlag) oder direkt einen Lucide-Dateinamen (bell, search, plus).
Das Zeichen wird inline gerendert und über stroke: currentColor eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.
Quelle sind die Dateien in assets/icons/; components/bausteine/zeichen.js hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach assets/icons/ legen und zeichen.js neu erzeugen — nie ein SVG von Hand zeichnen.
Ohne titel ist das Zeichen dekorativ (aria-hidden) — richtig, weil neben jedem Zeichen Text steht.
Typen (.d.ts)
/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
/** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
name: string;
/** Kantenlänge in px. Standard 16. */
groesse?: number;
/** Strichstärke. Standard 2 — wie im Satz. */
strich?: number;
/** Strichfarbe. Standard currentColor. */
farbe?: string;
/** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
titel?: string;
style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;
Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.
<SachSymbol art="fahrt" titel="Fahrt" />
Was für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (Punktgruppe); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf.
Typen (.d.ts)
/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
/** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
art?: string;
/** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
groesse?: number;
/** Auf farbigen Karten - haelt den Kreis hell. */
aufFarbe?: boolean;
titel?: string;
style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;
Es gibt keine Emoji. Nicht in der App, nicht auf der Website, nicht in Social Media, nicht in Mails. Auch keine Unicode-Zeichen als Ersatz für ein Zeichen, etwa Sterne, Häkchen oder Pfeile aus der Schrift.
