Icon
Een component om elk pictogram van Iconify of een ander onderdeel weer te geven.
Gebruik
Gebruik de name prop om een pictogram weer te geven.
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>U kunt elke naam uit de https://iconify.design-collectie gebruiken. Blader ze gemakkelijk op https://icones.js.org of zoek rechtstreeks vanuit uw AI-assistent met behulp van de
search-icons MCP-tool.Het wordt sterk aanbevolen om de pictogrammencollecties te installeren die je nodig hebt, lees hier meer over.
Voorbeelden
SVG
U kunt ook een Vue-component doorgeven aan de 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>
U kunt uw pictogramcomponenten zelf definiëren of unplugin-icons gebruiken om ze rechtstreeks uit SVG-bestanden te importeren:
<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 |
Wijzigingsgelog
No recent changes