# Icon

Ein kleines handgezeichnetes Bild, das zu einem Wort passt. Es hilft beim Erkennen; das Wort erklärt es.

## Playground

```html
<span class="feitio-inline" data-gap="1" style="font-size: var(--feitio-font-size-h3)"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg><span>calendar</span></span>
```

## Wann verwenden

-   Neben einem Wort: in einer Schaltfläche, einem Navigationspunkt oder einem Status-Tag.
-   Selbstständig nur dann, wenn die Bedeutung universell ist (Suche, Schließen) und die Bedienungselemente für Screenreader einen Namen haben.

## Wann nicht verwenden

-   **Zur Dekoration** eines Überschriftstextes oder eines Absatzes.
-   **Zum Veranschaulichen** einer leeren Oberfläche: verwenden Sie die Illustrationen (EmptyState).
-   **Von einem anderen Satz:** kein fertiges Symbol neben den gezeichneten.

## Beispiele

### Drei Größen

Klein (16px), die Größe des umgebenden Textes (keine Eigenschaft) und groß (32px). Immer in der Textfarbe.

Code anzeigen

```html
<svg class="feitio-icon" data-size="small" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
<svg class="feitio-icon" data-size="large" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-calendar"/></svg>
```

Jedes Symbol, mit Suche und seinem Code, befindet sich im [Symbolkatalog](/de/resources/icones/).

## Do and don't

Do

Calendar

Symbol und Wort zusammen, in derselben Farbe.

Don’t

### General settings

Ein oranges Symbol, das eine Überschrift ziert: es hilft nicht beim Erkennen und verschwendet das Orange.

## Barrierefreiheit

-   Das Symbol ist immer `aria-hidden="true"`: das Wort neben ihm oder die `aria-label`\-Eigenschaft der Schaltfläche geben den Namen.
-   In React wird der Icon-Name von TypeScript überprüft.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-icon"`

erforderlich

Händisch gezeichnete Striche, in der Textfarbe.

`data-size`

none, `"small"`, `"large"`

Die Textgröße (keine Eigenschaft), 16px oder 32px.

`aria-hidden="true"`

immer

Das Icon geht daneben; das Wort gibt den Namen.

`use href`

`sprite.svg#feitio-<nome>`

Welches Icon.