Icon 图标

通用图标组件，支持 Iconify 图标库、自定义 Vue 组件、VNode 和 SVG 字符串。

组件特性

🎨 Iconify 支持：通过图标名称字符串访问 150+ 图标集（MDI、Lucide、Heroicons、Tabler、Carbon 等）。
🧩 自定义图标：支持传入 Vue 组件、VNode 或原始 SVG 字符串作为图标来源。
📏 多种尺寸：预设尺寸（xs / sm / md / lg / xl）或自定义像素值，支持全局尺寸继承。
🔄 变换能力：旋转、水平/垂直翻转、持续旋转动画。
🌗 主题适配：通过 currentColor 继承自动适配浅色/暗黑模式。
♿ 无障碍：默认设置 aria-hidden="true"；支持为语义化图标添加标签。
🔗 无缝集成：专为与 BrButton、BrInputGroup、BrTree 等所有 BreezeUI 组件组合使用而设计。

基础用法

使用 Iconify 图标名称渲染任意图标。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:home" size="md" />
    <BrIcon icon="mdi:account" size="md" />
    <BrIcon icon="mdi:cog" size="md" />
    <BrIcon icon="mdi:bell" size="md" />
  </div>
</template>

图标集

BrIcon 支持所有 Iconify 图标集——MDI、Lucide、Heroicons、Tabler、Carbon 等 150+ 图标库。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-6 items-center">
    <div class="text-center">
      <BrIcon icon="mdi:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">MDI</p>
    </div>
    <div class="text-center">
      <BrIcon icon="lucide:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Lucide</p>
    </div>
    <div class="text-center">
      <BrIcon icon="heroicons:home-solid" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Heroicons</p>
    </div>
    <div class="text-center">
      <BrIcon icon="tabler:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Tabler</p>
    </div>
  </div>
</template>

尺寸

使用 size 属性设置预设尺寸（xs / sm / md / lg / xl）或自定义像素值。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-end">
    <div class="text-center">
      <BrIcon icon="mdi:star" size="xs" />
      <p class="text-xs text-muted-foreground mt-1">xs</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="sm" />
      <p class="text-xs text-muted-foreground mt-1">sm</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="md" />
      <p class="text-xs text-muted-foreground mt-1">md</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">lg</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="xl" />
      <p class="text-xs text-muted-foreground mt-1">xl</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" :size="48" />
      <p class="text-xs text-muted-foreground mt-1">48px</p>
    </div>
  </div>
</template>

颜色

设置 color 为任意 CSS 颜色值。图标默认使用 currentColor，继承父级颜色。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:heart" size="lg" color="red" />
    <BrIcon icon="mdi:heart" size="lg" color="#3b82f6" />
    <BrIcon icon="mdi:heart" size="lg" color="hsl(142, 71%, 45%)" />
    <BrIcon icon="mdi:heart" size="lg" color="currentColor" class="text-primary" />
  </div>
</template>

旋转与翻转

使用 rotate、flipX 和 flipY 变换图标方向。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Default</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :rotate="90" />
      <p class="text-xs text-muted-foreground mt-1">90&deg;</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :rotate="180" />
      <p class="text-xs text-muted-foreground mt-1">180&deg;</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :flip-x="true" />
      <p class="text-xs text-muted-foreground mt-1">FlipX</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :flip-y="true" />
      <p class="text-xs text-muted-foreground mt-1">FlipY</p>
    </div>
  </div>
</template>

旋转动画

设置 spin 为 true 启用持续旋转动画，适用于加载指示器。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:loading" size="lg" :spin="true" />
    <BrIcon icon="mdi:refresh" size="lg" :spin="true" />
    Loading...
  </div>
</template>

自定义图标

传入 Vue 组件（如 Lucide 图标）或 SVG 字符串作为 icon 属性。

<script setup>
import { BrIcon } from '@breezeui/vue'
import { Search, Heart } from 'lucide-vue-next'

const customSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`
</script>

<template>
  <div class="flex gap-4 items-center">
    <div class="text-center">
      <BrIcon :icon="Search" size="md" />
      <p class="text-xs text-muted-foreground mt-1">Component</p>
    </div>
    <div class="text-center">
      <BrIcon :icon="Heart" size="md" color="red" />
      <p class="text-xs text-muted-foreground mt-1">Component</p>
    </div>
    <div class="text-center">
      <BrIcon :icon="customSvg" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">SVG String</p>
    </div>
  </div>
</template>

禁用状态

设置 disabled 应用灰显、不可交互样式。

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:home" size="lg" />
    <BrIcon icon="mdi:home" size="lg" :disabled="true" />
  </div>
</template>

集成：按钮

BrIcon 可通过插槽或内联内容与 BrButton 无缝配合。

<script setup>
import { BrIcon, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <BrButton>
      <BrIcon icon="mdi:home" size="sm" />
      Home
    </BrButton>
    <BrButton variant="outline">
      <template #prefix>
        <BrIcon icon="lucide:search" size="sm" />
      </template>
      Search
    </BrButton>
    <BrButton variant="soft" color="primary">
      <template #suffix>
        <BrIcon icon="mdi:arrow-right" size="sm" />
      </template>
      Next
    </BrButton>
    <BrButton variant="outline" color="danger">
      <BrIcon icon="mdi:heart" size="sm" color="red" />
      Like
    </BrButton>
  </div>
</template>

集成：输入框

结合 BrInputGroup 实现带图标前缀或后缀的输入框。

<script setup>
import { BrIcon, BrInput, BrInputGroup, BrInputGroupItem, BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack gap="3" style="max-width: 400px">
    <BrInputGroup>
      <BrInputGroupItem>
        <BrIcon icon="mdi:account" size="sm" />
      </BrInputGroupItem>
      <BrInput placeholder="Username" />
    </BrInputGroup>
    <BrInputGroup>
      <BrInputGroupItem>
        <BrIcon icon="mdi:lock" size="sm" />
      </BrInputGroupItem>
      <BrInput type="password" placeholder="Password" />
      <BrInputGroupItem>
        <BrIcon icon="mdi:eye-off" size="sm" />
      </BrInputGroupItem>
    </BrInputGroup>
  </BrStack>
</template>

全局尺寸

未指定 size 时，图标从 BrConfigProvider 继承全局尺寸。

<template>
  <BrConfigProvider size="lg">
    <BrIcon icon="mdi:home" />
  </BrConfigProvider>
</template>

API

Props

Name	Type	Default	Description
icon	`string \| Component \| VNode`	—	图标来源：Iconify 名称、Vue 组件、VNode 或 SVG 字符串
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'md'`	图标尺寸预设或自定义像素值
color	`string`	`'currentColor'`	CSS 颜色值
disabled	`boolean`	`false`	是否禁用（灰显、不可交互）
rotate	`number`	`0`	旋转角度（度）
spin	`boolean`	`false`	启用持续旋转动画
flipX	`boolean`	`false`	水平翻转
flipY	`boolean`	`false`	垂直翻转
class	`any`	—	额外 CSS 类名

无障碍

组件默认设置 aria-hidden="true"。如果图标传达有意义的信息，请用带有视觉隐藏标签的容器包裹：

<template>
  <span role="img" aria-label="设置">
    <BrIcon icon="mdi:cog" />
  </span>
</template>

#Icon 图标

#组件特性

#基础用法

#图标集

#尺寸

#颜色

#旋转与翻转

#旋转动画

#自定义图标

#禁用状态

#集成：按钮

#集成：输入框

#全局尺寸

#API

#Props

#无障碍