Vue への組み込み
Vue 3 プロジェクトに Univer アイコンをインストールして使用します。
Univer Icons を Vue 3 の画面に追加し、周囲のコントロールに合わせてサイズと色を調整します。
パッケージをインストールする
Vue 3 プロジェクトにアイコンパッケージをインストールします。
Shell
pnpm add @univerjs/icons-vueShell
npm install @univerjs/icons-vueShell
yarn add @univerjs/icons-vueShell
bun add @univerjs/icons-vueボタンにアイコンを追加する
アイコンプレビューでコンポーネントを選び、名前を指定してインポートします。次の例では、コピー用ボタンにアイコンとテキストを表示します。
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 を指定します。
Vue
<script setup lang="ts">import { AddImageIcon } from '@univerjs/icons-vue'</script><template> <AddImageIcon aria-hidden="true" :style="{ fontSize: '20px', color: '#27272a' }" /></template>2 色のアイコンを調整する
主色は color、アクセント色は extend.colorChannel1 で設定します。次の例は濃いグレーと薄いグレーを組み合わせています。
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>ブランドロゴなどの多色アイコンには固定色が含まれるため、これらの設定ではすべての色を変更できません。
拡大時の線幅を保つ
拡大すると線が太すぎる場合は、preserveStrokeWidth を試してください。対応する線を 16 × 16 のときの幅に保ちます。塗りつぶしには影響しません。プレビューで線幅の設定を切り替えて確認できます。
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>アイコンだけのボタンに名前を付ける
テキストを省略する場合は、ボタンに aria-label="コピー" を追加し、アイコンの aria-hidden="true" を残します。スクリーンリーダーが操作名を読み上げられます。
AI Agentにアイコンの選択とコード生成を依頼するには、MCP サービスに接続してください。
このガイドはいかがですか？