# Icon

Une petite image dessinée à la main qui accompagne un mot. Elle aide à la reconnaissance ; le mot explique.

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

## Quand l'utiliser

-   À côté d'un mot : dans un bouton, un élément de navigation, une balise de statut.
-   Seul, uniquement lorsque le sens est universel (recherche, fermer) et que le contrôle possède un nom pour les lecteurs d'écran.

## Quand ne pas l'utiliser

-   **Pour orner** un titre ou un paragraphe.
-   **Pour illustrer** une écran vide : utilisez les illustrations (EmptyState).
-   **D'un autre ensemble :** pas d'icône prête à l'emploi à côté des dessinées.

## Exemples

### Trois tailles

Petit (16px), la taille du texte environnant (pas d'attribut) et grand (32px). Toujours en couleur de texte.

Afficher le code

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

Chaque icône, avec sa recherche et son code, se trouve dans le [catalogue d'icônes](/fr/resources/icones/).

## Faire et ne pas faire

Do

Calendar

Icône et mot ensemble, en même couleur.

Don’t

### General settings

Une icône orange ornant un titre : elle n'aide pas à la reconnaissance et gaspille l'orange.

## Accessibilité

-   L'icône est toujours `aria-hidden="true"` : le mot à côté, ou le `aria-label` du bouton, donne le nom.
-   Dans React, le nom de l'icône est vérifié par TypeScript.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-icon"`

obligatoire

Crayonné à la main, dans la couleur du texte.

`data-size`

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

La taille du texte (pas d'attribut), 16px ou 32px.

`aria-hidden="true"`

toujours

L'icône suit ; le mot donne le nom.

`use href`

`sprite.svg#feitio-<nome>`

Quelle icône.