# Icon

Icons sind semantische Symbole, die Inhalte und Funktionen visualisieren.

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

<IconHome />
```

---

# Best Practices

- Wähle ein Icon, das zum Element und Kontext passt. Verändere oder vertausche
  die Bedeutungen der Bibliotheks-Icons nicht.
- Lass Icons eine unterstützende Rolle einnehmen. Ein Decorative Icon braucht
  immer den Kontextbezug, sonst wird es nicht verstanden.
- Setze Icons sparsam ein. Zu viele Icons überfordern kognitiv.
- Verwende nach Möglichkeit ein Icon aus der
  [Icon-Bibliothek](#icon-bibliothek). Nur wenn keins passt, nutze ein
  [Tabler Icon](https://tabler.io/icons) oder ein eigenes SVG.

---

# Colors

Ohne weitere Angabe übernimmt ein Icon die Textfarbe seiner Umgebung. Über die
`color`-Property lässt sich ein Icon gezielt einfärben. Dabei stehen Brand- und
Status-Colors zur Verfügung; `neutral` setzt die Standard-Icon-Farbe.

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

<>
  <IconHome color="neutral" />
  <IconHome color="blue" />
  <IconHome color="violet" />
  <IconHome color="teal" />
  <IconHome color="lilac" />
  <IconHome color="info" />
  <IconHome color="success" />
  <IconHome color="warning" />
  <IconHome color="danger" />
  <IconHome color="unavailable" />
</>
```

Für beliebige Colors unterstützt die `color`-Property außerdem die Angabe eines
HEX-Werts.

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

<IconHome color="#0fdf00" />
```

---

# Sizes

- **s** für kleine Hinweise oder Components mit wenig Platz.
- **m** als Standardgröße.
- **l** vor allem für dekorative Zwecke.

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

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

---

# 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>`-Component 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>`-Component 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>
```

---

# 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](https://flow.mittwald.de/04-components/actions/button)
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.

---

# Kombiniere mit ...

## Combine

Benutze die [Combine](https://flow.mittwald.de/04-components/structure/combine)-Component, um ein Icon
neben einem Text zu platzieren.

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

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

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `IconWithCustomColor` | - | The color of the icon. Besides the Flow colors, any custom CSS color is supported. Inherits the surrounding text color when unset. |
| `size` | `"s" \| "m" \| "l"` | `"m"` | The size of the icon. |
| `status` _(deprecated)_ | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status. @deprecated Use `color` instead. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |