Integración en React

Añade Univer Icons a tu interfaz de React y ajusta su tamaño y color para que encajen con los controles.

Instala el paquete

Instala el paquete de iconos en tu proyecto de React:

pnpm add @univerjs/icons

npm install @univerjs/icons

yarn add @univerjs/icons

bun add @univerjs/icons

Añade un icono a un botón

Elige un componente en la vista previa e impórtalo por su nombre. Este botón de copia incluye un icono y una etiqueta de texto.

import { CopyIcon } from '@univerjs/icons'export function CopyButton({ onCopy }: { onCopy: () => void }) {  return (    <button type="button" onClick={onCopy}>      <CopyIcon aria-hidden="true" />      <span>Copiar</span>    </button>  )}

Pasa tu función de copia mediante onCopy. El icono es decorativo porque el texto ya describe la acción.

Ajusta el tamaño y el color

Los iconos heredan el color del texto y tienen un tamaño de 1em. Usa fontSize y color para cambiarlos:

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

Ajusta un icono de dos colores

Define el color principal con color y el acento con extend.colorChannel1. Este ejemplo combina gris oscuro y gris claro:

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

Los iconos multicolor, como los logotipos, pueden tener colores fijos. Estos ajustes no sustituyen todos sus colores.

Mantén el grosor al ampliar

Si los trazos quedan demasiado gruesos al ampliar el icono, prueba preserveStrokeWidth. Conserva el grosor de los trazos compatibles a escala de 16 × 16, sin cambiar las formas rellenas. Comprueba el resultado con el control de trazos de la vista previa.

import { ShapePieIcon } from '@univerjs/icons'export function ShapeToolIcon() {  return (    <ShapePieIcon      aria-hidden="true"      preserveStrokeWidth      style={{ fontSize: 48 }}    />  )}

Pon nombre a los botones sin texto

Si quitas el texto visible, añade aria-label="Copiar" al botón y conserva aria-hidden="true" en el icono. Así los lectores de pantalla pueden anunciar la acción.

Para pedir a un AI Agent que busque un icono y genere el código, conecta servicio MCP.