Vue에 통합하기
Vue 3 프로젝트에서 Univer Icons를 설치하고 사용합니다.
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>두 색상 아이콘 조절
기본 색상은 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 서비스에 연결하세요.
이 가이드는 어떠셨나요?