Интеграция с Vue

Добавьте Univer Icons в интерфейс Vue 3, затем настройте размер и цвет под окружающие элементы управления.

Установите пакет

Установите пакет иконок в проект Vue 3:

pnpm add @univerjs/icons-vue

npm install @univerjs/icons-vue

yarn add @univerjs/icons-vue

bun add @univerjs/icons-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>Копировать</span>  </button></template>

Обработайте событие copy в родительском компоненте. Иконка декоративная: видимый текст уже описывает действие.

Настройте размер и цвет

Иконки наследуют цвет текста, а их размер равен 1em. Чтобы изменить их отдельно, задайте fontSize и color:

<script setup lang="ts">import { AddImageIcon } from '@univerjs/icons-vue'</script><template>  <AddImageIcon    aria-hidden="true"    :style="{ fontSize: '20px', color: '#27272a' }"  /></template>

Настройте двухцветную иконку

Основной цвет задаётся через color, акцентный через extend.colorChannel1. Пример использует тёмно-серый и светло-серый:

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

Многоцветные иконки, включая логотипы, могут содержать фиксированные цвета. Эти настройки меняют не все цвета таких иконок.

Сохраните толщину линий при увеличении

Если линии увеличенной иконки слишком толстые, попробуйте preserveStrokeWidth. Поддерживаемые линии сохранят толщину для размера 16 × 16. Залитые фигуры не изменятся. Проверьте результат с помощью настройки линий в предпросмотре.

<script setup lang="ts">import { ShapePieIcon } from '@univerjs/icons-vue'</script><template>  <ShapePieIcon    aria-hidden="true"    preserve-stroke-width    style="font-size: 48px"  /></template>

Назовите кнопки без текста

Если вы убираете текст, добавьте кнопке aria-label="Копировать" и оставьте aria-hidden="true" у иконки. Так программы чтения с экрана смогут озвучить действие.

Чтобы поручить AI Agent выбор иконки и написание кода, подключите MCP-сервер.