Integración en Vue

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:

pnpm add @univerjs/icons-vue

npm install @univerjs/icons-vue

yarn add @univerjs/icons-vue

bun add @univerjs/icons-vue

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.

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

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

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

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