# Intégration dans React

> Installez et utilisez Univer Icons dans vos projets React.

- Human documentation: [https://docs.univer.ai/fr-FR/guides/icons/react](https://docs.univer.ai/fr-FR/guides/icons/react)

- Agent Markdown: [https://docs.univer.ai/fr-FR/guides/icons/react.md](https://docs.univer.ai/fr-FR/guides/icons/react.md)

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

- Source: [icons/react.fr-FR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/react.fr-FR.mdx)

---

Ajoutez Univer Icons à votre interface React, puis adaptez leur taille et leur couleur aux contrôles environnants.

## Installer le paquet

Installez le paquet d’icônes dans votre projet React :

#### npm

```bash
npm install @univerjs/icons
```

#### pnpm

```bash
pnpm add @univerjs/icons
```

#### yarn

```bash
yarn add @univerjs/icons
```

#### bun

```bash
bun add @univerjs/icons
```

## Ajouter une icône à un bouton

Choisissez un composant dans l’[aperçu des icônes](https://docs.univer.ai/fr-FR/guides/icons/all-icons.md) et importez-le par son nom. Ce bouton de copie affiche une icône et un libellé.

```tsx
import { CopyIcon } from '@univerjs/icons'

export function CopyButton({ onCopy }: { onCopy: () => void }) {
  return (
    <button type="button" onClick={onCopy}>
      <CopyIcon aria-hidden="true" />
      <span>Copier</span>
    </button>
  )
}
```

Passez votre fonction de copie via `onCopy`. L’icône est décorative, car le texte décrit déjà l’action.

## Régler la taille et la couleur

Les icônes héritent de la couleur du texte et mesurent `1em`. Utilisez `fontSize` et `color` pour les ajuster :

```tsx
import { AddImageIcon } from '@univerjs/icons'

export function ImageToolIcon() {
  return (
    <AddImageIcon
      aria-hidden="true"
      style={{ fontSize: 20, color: '#27272a' }}
    />
  )
}
```

## Régler une icône à deux couleurs

Définissez la couleur principale avec `color` et l’accent avec `extend.colorChannel1`. Cet exemple associe gris foncé et gris clair :

```tsx
import { PaintBucketDoubleIcon } from '@univerjs/icons'

export function FillToolIcon() {
  return (
    <PaintBucketDoubleIcon
      aria-hidden="true"
      style={{ fontSize: 20, color: '#27272a' }}
      extend={{ colorChannel1: '#d4d4d8' }}
    />
  )
}
```

Les icônes multicolores, notamment les logos, peuvent contenir des couleurs fixes. Ces réglages ne remplacent pas toutes leurs couleurs.

## Conserver des traits fins à l’agrandissement

Si les traits deviennent trop épais, essayez `preserveStrokeWidth`. Les traits compatibles gardent leur épaisseur à l’échelle 16 × 16. Les formes remplies ne changent pas. Vérifiez le résultat avec le réglage des traits dans l’aperçu.

```tsx
import { ShapePieIcon } from '@univerjs/icons'

export function ShapeToolIcon() {
  return (
    <ShapePieIcon
      aria-hidden="true"
      preserveStrokeWidth
      style={{ fontSize: 48 }}
    />
  )
}
```

## Nommer les boutons sans texte

Si vous retirez le texte visible, ajoutez `aria-label="Copier"` au bouton et gardez `aria-hidden="true"` sur l’icône. Les lecteurs d’écran pourront annoncer l’action.

Pour demander à un AI Agent de trouver une icône et de générer le code, connectez [service MCP](https://docs.univer.ai/fr-FR/guides/icons/ai.md).