# Intégration dans Vue

> Installez et utilisez les icônes Univer dans vos projets Vue 3.

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

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

- Requested language: `fr-FR`

- Content language: `fr-FR`

- Documentation version: `1.2.0`

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

---

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

## Installer le paquet

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

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

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

## 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é.

```vue
<script setup lang="ts">
import { CopyIcon } from '@univerjs/icons-vue'

const emit = defineEmits<{ copy: [] }>()
</script>

<template>
  <button type="button" @click="emit('copy')">
    <CopyIcon aria-hidden="true" />
    <span>Copier</span>
  </button>
</template>
```

Gérez l’événement `copy` dans le composant parent. 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 :

```vue
<script setup lang="ts">
import { AddImageIcon } from '@univerjs/icons-vue'
</script>

<template>
  <AddImageIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
  />
</template>
```

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

```vue
<script setup lang="ts">
import { PaintBucketDoubleIcon } from '@univerjs/icons-vue'
</script>

<template>
  <PaintBucketDoubleIcon
    aria-hidden="true"
    :style="{ fontSize: '20px', color: '#27272a' }"
    :extend="{ colorChannel1: '#d4d4d8' }"
  />
</template>
```

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.

```vue
<script setup lang="ts">
import { ShapePieIcon } from '@univerjs/icons-vue'
</script>

<template>
  <ShapePieIcon
    aria-hidden="true"
    preserve-stroke-width
    style="font-size: 48px"
  />
</template>
```

## 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).