Iconify 또는 다른 구성 요소의 아이콘을 표시하는 구성 요소입니다.
Usage
name Prop을 사용하여 아이콘을 표시합니다.
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>https://iconify.design 컬렉션의 이름을 사용할 수 있습니다. https://icones.js.org에서 쉽게 검색하거나 xph07x MCP 도구를 사용하여 AI 어시스턴트에서 직접 검색할 수 있습니다.
필요한 아이콘 컬렉션을 설치하는 것이 좋습니다, 이에 대해 자세히 읽어보세요.It's highly recommended to install the icons collections you need, read more about this.
예제
SVG
Vue 컴포넌트를 name prop에 전달할 수도 있습니다.
<script setup lang="ts">
import { h } from 'vue'
const IconLightbulb = () => h(
'svg',
{ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' },
[
h(
'path',
{
'fill': 'none',
'stroke': 'currentColor',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'd': 'M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'
}
)
]
)
</script>
<template>
<UIcon :name="IconLightbulb" class="size-5" />
</template>
아이콘 구성 요소를 직접 정의하거나 unplugin-icons 를 사용하여 SVG 파일에서 직접 가져올 수 있습니다.
<script setup lang="ts">
import IconLightbulb from '~icons/lucide/lightbulb'
</script>
<template>
<UIcon :name="IconLightbulb" class="size-5" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
name | any | |
mode | "svg" | "css" | |
size | string | number | |
customize | boolean | IconifyIconCustomizeCallback | null |
변경 로그
No recent changes