# Icon

Icons sind semantische Symbole, die Inhalte und Funktionen visualisieren und zur Verständlichkeit der Benutzeroberfläche beitragen.

## Overview

# Playground

Für das Flow Design System kommen [Tabler Icons](https://tabler.io/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.

```tsx
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](https://tabler.io/icons) ausgewählt werden. Diese muss für
die korrekte Darstellung in der `<Icon>`-Komponente eingebunden werden.

```tsx
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.

```tsx
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.

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

<>
  <IconHome size="s" />
  <IconHome size="m" />
  <IconHome size="l" />
</>
```

---

# Kombiniere mit ...

## Align

Benutze die [Align](/04-components/structure/align/overview)-Component, um ein
Icon neben einem Text zu platzieren.

```tsx
import {
  Align,
  IconDomain,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <IconDomain />
  <Text>mail.agenturserver.de</Text>
</Align>
```

---

# 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](/04-components/actions/button/overview) 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.