Icon

Playground

Für das Flow Design System kommen Tabler Icons zum Einsatz. Eine Auswahl passender Icons wurde getroffen und mit festen Bedeutungen versehen. Alle relevanten Icons werden unten in der Icon-Bibliothek aufgelistet.

Um ein Icon einzufügen, wird eine Kombination aus „Icon“ und dem jeweiligen „Icon-Namen“ in einem Tag verwendet. Zum Beispiel sieht der Tag für das Icon „Home“ so aus: <IconHome />. Eine Übersicht aller verfügbaren Icons und ihrer Namen ist in der Icon-Bibliothek zu finden.

import { IconHome } from "@mittwald/flow-react-components";

<IconHome />

Tabler Icon

Wenn kein passendes Icon in der Icon-Bibliothek vorhanden ist, kann alternativ ein Icon von Tabler ausgewählt werden. Diese muss für die korrekte Darstellung in der <Icon>-Komponente eingebunden werden.

import { Icon } from "@mittwald/flow-react-components";
import { IconStar } from "@tabler/icons-react";

<Icon>
  <IconStar />
</Icon>

SVG

Zusätzlich können eigene SVGs als Icons eingesetzt werden. Dabei ist darauf zu achten, dass sie im Stil der übrigen Icons konsistent bleiben. Das SVG muss ebenfalls in der <Icon>-Komponente eingebunden werden, damit es korrekt dargestellt wird.

import { Icon } from "@mittwald/flow-react-components";

<Icon>
  <svg
    fill="currentColor"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="50" cy="50" r="50" />
  </svg>
</Icon>

Sizes

Icons sind in den Größen s, m und l verfügbar.

Kombiniere mit ...

Align

Benutze die Align-Component, um ein Icon neben einem Text zu platzieren.

Icon-Bibliothek

Im Flow Design System haben ausgewählte Icons eine festgelegte Bedeutung. Sie lassen sich drei Typen zuordnen: Functional, Decorative und Status.

Functional

Functional Icons besitzen eine eindeutige, allgemein verständliche Symbolik, die der User bereits kennt. Sie unterstützen User bei Navigation und Interaktion und werden häufig in Actions wie Icon-Buttons eingesetzt.

Decorative

Decorative Icons tragen zur Ästhetik und zur emotionalen Wirkung der Benutzeroberfläche bei. Im Gegensatz zu den Functional Icons ist ihre Bedeutung jedoch oft nicht intuitiv erfassbar.

Status

Bestimmte Icons dienen der Anzeige des Status eines Elements.