# Integración en React

> Instala y usa Univer Icons en tu proyecto de React.

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

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

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

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

---

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:

#### npm

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

#### pnpm

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

#### yarn

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

#### bun

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

## Añade un icono a un botón

Elige un componente en la [vista previa](https://docs.univer.ai/es-ES/guides/icons/all-icons.md) e impórtalo por su nombre. Este botón de copia incluye un icono y una etiqueta de texto.

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

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

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

```tsx
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](https://docs.univer.ai/es-ES/guides/icons/ai.md).