Intégration dans React

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 :

pnpm add @univerjs/icons

npm install @univerjs/icons

yarn add @univerjs/icons

bun add @univerjs/icons

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

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 :

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 :

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.

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.