# Integración en Vue

> Instala y usa Univer Icons en tu proyecto de Vue 3.

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

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

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

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

---

Añade Univer Icons a tu interfaz de Vue 3 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 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
```

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

```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>Copiar</span>
  </button>
</template>
```

Gestiona el evento `copy` en el componente padre. 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:

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

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

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

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

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.

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

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