Intégration dans Vue

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 :

pnpm add @univerjs/icons-vue

npm install @univerjs/icons-vue

yarn add @univerjs/icons-vue

bun add @univerjs/icons-vue

Ajouter une icône à un bouton

Choisissez un composant dans l’aperçu des icônes et importez-le par son nom. Ce bouton de copie affiche une icône et un libellé.

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

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

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

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