React への組み込み

React プロジェクトに Univer アイコンをインストールして使用します。

Univer Icons を React の画面に追加し、周囲のコントロールに合わせてサイズと色を調整します。

パッケージをインストールする

React プロジェクトにアイコンパッケージをインストールします。

Shell

pnpm add @univerjs/icons

Shell

npm install @univerjs/icons

Shell

yarn add @univerjs/icons

Shell

bun add @univerjs/icons

ボタンにアイコンを追加する

アイコンプレビューでコンポーネントを選び、名前を指定してインポートします。次の例では、コピー用ボタンにアイコンとテキストを表示します。

TSX

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 を指定します。

TSX

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

2 色のアイコンを調整する

主色は color、アクセント色は extend.colorChannel1 で設定します。次の例は濃いグレーと薄いグレーを組み合わせています。

TSX

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

ブランドロゴなどの多色アイコンには固定色が含まれるため、これらの設定ではすべての色を変更できません。

拡大時の線幅を保つ

拡大すると線が太すぎる場合は、preserveStrokeWidth を試してください。対応する線を 16 × 16 のときの幅に保ちます。塗りつぶしには影響しません。プレビューで線幅の設定を切り替えて確認できます。

TSX

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 サービスに接続してください。

このガイドはいかがですか？