Icon 图标

统一渲染图标，支持 lucide-vue-next / @radix-icons/vue 开源图标库、本地 SVG 与内置后台管理图标集。

用于统一渲染图标：支持 lucide-vue-next 与 @radix-icons/vue 开源图标库、本地 SVG，以及内置的一套常用后台管理图标。命名与用法参考 Nuxt UI Icon。

何时使用

  • 需要在界面中展示图标时。
  • 需要统一不同图标库（lucide / radix / 本地 SVG）的尺寸、颜色与对齐时。

代码演示

基础用法

直接传图标名即可：裸名称走内置图标集，lucide: / i-lucide- / radix: 等前缀引用对应图标库（- 与 : 分隔、大小写不敏感）。

<script setup lang="ts">
import { Icon } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-wrap items-center gap-4 text-2xl">
    <Icon name="home" />
    <Icon name="i-lucide-search" />
    <Icon name="lucide:settings" />
    <Icon name="radix:home" />
    <Icon name="chart-bar" />
  </div>
</template>

图标组件与原始 SVG

name 也支持直接传入图标组件（推荐，可被构建工具 tree-shaking），或原始 SVG 字符串。

<script setup lang="ts">
import { Icon } from "@reglow/reui";
import { Settings, UserRound } from "lucide-vue-next";
import { GearIcon } from "@radix-icons/vue";

// 原始 SVG 字符串（请仅使用可信内容，内部通过 v-html 注入）
const rawSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9" /><path d="M12 8v8M8 12h8" /></svg>`;
</script>

<template>
  <div class="flex flex-wrap items-center gap-4 text-2xl">
    <Icon :name="UserRound" />
    <Icon :name="Settings" />
    <Icon :name="GearIcon" />
    <Icon :name="rawSvg" />
  </div>
</template>

尺寸与颜色

size 数字按 px、字符串按任意 CSS 单位，默认 1em（随字号缩放）；颜色默认继承 currentColor，可直接用文本色类控制。

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Icon name="search" :size="16" />
    <Icon name="search" :size="20" />
    <Icon name="search" size="1.5rem" />
    <Icon name="search" class="size-6 text-primary" />
    <Icon name="star" class="size-6 text-yellow-500" />
  </div>
</template>

内置后台图标集

内置约 55 个后台常用图标（基于 lucide），无需额外引入即可按名称使用。

<script setup lang="ts">
import { Icon } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-wrap items-center gap-4 text-xl">
    <Icon name="dashboard" />
    <Icon name="chart-bar" />
    <Icon name="users" />
    <Icon name="settings" />
    <Icon name="file" />
    <Icon name="calendar" />
    <Icon name="bell" />
    <Icon name="shopping-cart" />
  </div>
</template>

导入

import {
  Icon,
  adminIcons,
  radixIcons,
  registerIcons,
  resolveIcon,
} from "@reglow/reui";
import type { IconName } from "@reglow/reui";

名称写法

写法说明
home / i-home内置后台管理图标集（基于 lucide）
lucide:homelucide 集合
i-lucide-home同上，Iconify 风格前缀
radix:home / i-radix-home@radix-icons/vue 集合
local:logo / i-local-logo通过 registerIcons 注册的本地图标

本地 SVG：注册为图标名

通过 registerIcons 把本地 SVG 组件注册为名称，之后即可用字符串引用：

import { registerIcons } from "@reglow/reui";
import LogoIcon from "./logo.svg";

registerIcons({ logo: LogoIcon });

// 之后：<Icon name="logo" /> 或 <Icon name="local:logo" />

API

Props

属性说明类型默认值
name图标名（见上）/ 图标组件 / 原始 SVG 字符串string | Component-
size尺寸，数字按 px，字符串为任意 CSS 单位string | number1em
color颜色，默认继承 currentColorstring-
label无障碍标签；提供时作为图形暴露，否则视为装饰性（aria-hidden）string-
class附加类名HTMLAttributes["class"]-
style附加样式CSSProperties-

导出

导出说明
Icon图标组件
adminIcons内置后台管理图标集（lucide，键为 kebab-case 名称）
radixIcons内置 @radix-icons/vue 示例图标集
registerIcons注册自定义图标（registerIcons({ logo: LogoIcon })）
resolveIcon按名称解析为组件（resolveIcon("lucide:home")）
Divider 分割线
区隔内容的分割线
Label 标签
基于 reka-ui Label，用于表单字段标题，支持 for 关联与无障碍。