# Vue에 통합하기

> Vue 3 프로젝트에서 Univer Icons를 설치하고 사용합니다.

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

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

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [icons/vue.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/vue.ko-KR.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/ko-KR/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>
```

## 두 색상 아이콘 조절

기본 색상은 `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/ko-KR/guides/icons/ai.md)에 연결하세요.