# Vue への組み込み

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

- Human documentation: [https://docs.univer.ai/ja-JP/guides/icons/vue](https://docs.univer.ai/ja-JP/guides/icons/vue)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/icons/vue.md](https://docs.univer.ai/ja-JP/guides/icons/vue.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [icons/vue.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/vue.ja-JP.mdx)

---

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

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

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

#### npm

```bash
npm install @univerjs/icons-vue
```

#### pnpm

```bash
pnpm add @univerjs/icons-vue
```

#### yarn

```bash
yarn add @univerjs/icons-vue
```

#### bun

```bash
bun add @univerjs/icons-vue
```

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

[アイコンプレビュー](https://docs.univer.ai/ja-JP/guides/icons/all-icons.md)でコンポーネントを選び、名前を指定してインポートします。次の例では、コピー用ボタンにアイコンとテキストを表示します。

```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 サービス](https://docs.univer.ai/ja-JP/guides/icons/ai.md)に接続してください。