Icon 图标

Universal

通用图标显示组件，支持直接传入 Vue 组件、注册的前缀库（如 lucide:settings、custom:logo）、内联 SVG 字符串及图片 URL，并具备无障碍标记与响应式尺寸继承能力。

多种图标源类型

无缝解析 Vue 组件对象、内置前缀名称、纯图标名、内联 SVG 片段以及图片/矢量资源路径。

Vue 组件

前缀: lucide:server

内置: terminal

内联 SVG

图片/SVG 文件路径

<template>
  <div class="flex items-center gap-4">
    <!-- 1. 直接传入 Vue 组件 -->
    <Icon :icon="Settings" class="text-primary text-xl" />

    <!-- 2. 带库前缀的字符串 (内置 lucide 支持) -->
    <Icon icon="lucide:server" class="text-emerald-500 text-xl" />

    <!-- 3. 纯名称匹配 -->
    <Icon icon="terminal" class="text-amber-500 text-xl" />

    <!-- 4. 直接传入 SVG 标记代码 -->
    <Icon :icon="svgSnippet" class="text-purple-500 text-xl" />

    <!-- 5. 图像路径或网络资源 -->
    <Icon icon="/icon.svg" size="1.25rem" />
  </div>
</template>

尺寸与文字排版继承

size 默认继承 '1em'，随周围文字字体大小自动缩放；亦可显式指定数值（px）或任意 CSS 尺寸单位。

跟随小号正文 (text-xs)

跟随常规文字 (text-base)

跟随大标题 (text-xl)

16px

24px

32px

2.5rem

<template>
  <!-- 跟随父级字号 1em 自动适配 -->
  <span class="text-xs"><Icon icon="lucide:activity" /> 小号</span>
  <span class="text-base"><Icon icon="lucide:activity" /> 中号</span>
  <span class="text-xl"><Icon icon="lucide:activity" /> 大号</span>

  <!-- 显式传入数值(px)或单位字符 -->
  <Icon icon="lucide:shield-check" :size="16" />
  <Icon icon="lucide:shield-check" :size="24" />
  <Icon icon="lucide:shield-check" size="2.5rem" />
</template>

自定义图标库与前缀解析器

使用 registerIconResolver 注册外部图标体系，例如 mdi、remixicon、FontAwesome 或公司私有资产池。

cloud:database

cloud:kubernetes

import { registerIconResolver } from '@recloudstudio/ui'

// 注册自定义前缀
registerIconResolver('cloud', (name) => {
  if (name === 'database') {
    return '<svg viewBox="0 0 24 24">...</svg>'
  }
  return null
})

// 模板中直接调用
<Icon icon="cloud:database" size="1.5rem" />

无障碍描述与回退插槽

未提供 label 时自动应用 aria-hidden='true' 充当装饰图标；提供 label 时自动设置 role='img' 与 aria-label；当图标源未能解析时回退显示默认插槽内容。

带 aria-label 屏幕朗读

解析失败触发 fallback 插槽

<template>
  <!-- 装饰图标：自动输出 aria-hidden="true" -->
  <Icon icon="lucide:bell" />

  <!-- 具有语义的操作图标：设置 role="img" 与 aria-label -->
  <Icon icon="lucide:bell" label="系统提醒通知" />

  <!-- 回退插槽：当资源不存在时呈现 -->
  <Icon icon="unknown:missing-icon">
    <span>N/A</span>
  </Icon>
</template>

在控制台树与下拉菜单中无缝组合

现有 TreeView、NavTree、CommandPalette 等组件的 icon 属性已全面拓宽支持 IconSource，既可以直接使用字符串前缀，也可使用组件。

<template>
  <!-- NavTree、TreeView、CommandPalette 等原生无缝接收统一 IconSource -->
  <NavTree :groups="[
    {
      title: '组件导航',
      items: [
        { title: 'Button 按钮', href: '/components/button', icon: 'lucide:box' },
        { title: 'Card 卡片', href: '/components/card', icon: 'cloud:database' }
      ]
    }
  ]" active-href="/components/button" />
</template>