Icon

一个用于显示来自 Iconify 或其他组件的任何图标的组件。

用法

使用 name 属性来显示图标

name

class

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>

强烈建议安装您需要的图标集合，请阅读更多相关信息。

示例

SVG

您还可以将 Vue 组件传入 name 属性

<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

属性

属性	默认值	类型
`name`		`string \| object`
`mode`		`"svg" \| "css"`
`尺寸`		`string \| number`
`自定义`		`(content: string, name?: string \| undefined, prefix?: string \| undefined, provider?: string \| undefined): string`

更新日志

61b60— 功能：允许传递组件而不是名称 (#4766)

FieldGroup

将多个类似按钮的元素组合在一起。

Kbd

一个用于显示键盘按键的 kbd 元素。