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

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

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

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

pnpm add @univerjs/icons

npm install @univerjs/icons

yarn add @univerjs/icons

bun add @univerjs/icons

Добавьте иконку на кнопку

Выберите компонент в предпросмотре иконок и импортируйте его по имени. Этот пример добавляет на кнопку копирования иконку и текст.

import { CopyIcon } from '@univerjs/icons'export function CopyButton({ onCopy }: { onCopy: () => void }) {  return (    <button type="button" onClick={onCopy}>      <CopyIcon aria-hidden="true" />      <span>Копировать</span>    </button>  )}

Передайте обработчик копирования через onCopy. Иконка декоративная: видимый текст уже описывает действие.

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

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

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

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

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

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

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

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

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

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

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

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

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