Icon

Iconifyまたは他のコンポーネントから任意のアイコンを表示するコンポーネント。

使用法

nameプロパティを使用してアイコンを表示します。

name

class

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

https://iconify.designコレクションから任意の名前を使用できます。https://icones.js.orgで簡単に参照するか、search-icons MCPツールを使用してAIアシスタントから直接検索してください。

必要なアイコンコレクションをインストールすることを強くお勧めします。

例

SVG

nameプロパティにVueコンポーネントを渡すこともできます：

<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

FieldGroup

Group multiple button-like elements together.

Kbd

A kbd element to display a keyboard key.