Vue
kubai-icons-vue는 각 아이콘을 Vue 컴포넌트로 제공합니다. Vue 3.3 이상이 필요합니다.
설치
bash
npm install kubai-icons-vue사용법
아이콘을 이름으로 가져와 템플릿에서 사용합니다.
vue
<script setup>
import { Folder, BellOff } from "kubai-icons-vue";
</script>
<template>
<Folder :size="28" color="#6366F1" />
<BellOff variant="soft" title="Muted" />
</template>Prop 목록
prop은 size, color, variant, badgeColor, trigger, hover, active, defaultActive, title입니다. React prop 표에 설명된 대로 동작합니다. 토글 아이콘의 켜짐/꺼짐 상태를 바인딩하려면 v-model:active를 사용하세요.
부모에서 트리거
버튼 전체에 마우스를 올리거나 키보드 포커스가 이동할 때 모션을 재생하려면 버튼에 data-kubai-trigger를, 아이콘에 trigger="parent"를 추가하세요.
vue
<button data-kubai-trigger>
<Trash :size="18" trigger="parent" />
Delete
</button>이름으로 아이콘 사용
API에서 받은 값처럼 아이콘 이름을 런타임에만 알 수 있다면 DynamicIcon을 사용하세요. 각 아이콘은 여전히 별도의 청크이므로 번들에 전체 세트가 포함되지 않습니다.
vue
<script setup>
import { DynamicIcon } from "kubai-icons-vue/dynamic";
defineProps({ name: String });
</script>
<template>
<DynamicIcon :name="name" />
</template>서버 렌더링
Nuxt에서는 컴포넌트가 서버에서 렌더링되고 모션은 클라이언트에서 추가됩니다. 사용하는 위치에서 가져오거나 플러그인에 등록하세요. DynamicIcon은 예외로, 서버에서는 빈 플레이스홀더를 렌더링하고 브라우저에서 아이콘을 불러옵니다.
개별 파일 import
개발 서버에서 패키지 인덱스를 불러오지 않으려면 아이콘을 해당 파일에서 직접 가져오세요.
js
import Folder from "kubai-icons-vue/icons/folder";