GlassIcons
glass-icons玻璃拟态图标按钮网格 · 背面 3D 旋转彩色发光板 + 前面磨砂玻璃片（backdrop-blur·inset 高光边），hover/focus 彩板抬升旋转、玻璃前推、标签滑出（纯 CSS 零依赖·token 配色·RSC 安全·reduced-motion）
用法
基础用法
传入 items（图标 + 标签 + 配色），hover/focus 看玻璃 3D 抬升与标签滑出。
tsx
import { Heart, Star, Bell, Cloud, Zap, Settings } from "lucide-react";
<GlassIcons
columns={3}
items={[
{ icon: <Heart />, label: "收藏", color: "red" },
{ icon: <Star />, label: "星标", color: "orange" },
{ icon: <Bell />, label: "通知", color: "blue" },
{ icon: <Cloud />, label: "云端", color: "indigo" },
{ icon: <Zap />, label: "闪电", color: "purple" },
{ icon: <Settings />, label: "设置", color: "green" },
]}
/>网格列数
columns 控制网格列数，窄屏自动回落到 2 列。
tsx
<GlassIcons
columns={2}
items={[
{ icon: <Heart />, label: "收藏", color: "red" },
{ icon: <Star />, label: "星标", color: "orange" },
{ icon: <Bell />, label: "通知", color: "blue" },
{ icon: <Cloud />, label: "云端", color: "indigo" },
]}
/>单色主题色
color 传 'primary' 让发光板吃主题主色，自动适配明暗。
tsx
<GlassIcons
columns={2}
items={[
{ icon: <Heart />, label: "喜欢", color: "primary" },
{ icon: <Star />, label: "收藏", color: "primary" },
]}
/>自定义渐变色
color 除预设名外还可传任意 CSS 渐变字符串。
tsx
<GlassIcons
columns={2}
items={[
{
icon: <Cloud />,
label: "极光",
color: "linear-gradient(135deg, var(--color-chart-1), var(--color-chart-4))",
},
{
icon: <Zap />,
label: "暖橙",
color: "linear-gradient(135deg, var(--color-chart-3), oklch(0.72 0.2 30))",
},
]}
/>何时用
需要一组玻璃拟态、带 3D 抬升发光交互的图标按钮网格（如功能入口/分类导航/快捷操作）时用。要给单个元素加边框光带用 BorderBeam/ShineBorder；要做眩光悬停用 GlareHover。GlassIcons 是「一组带标签的可点图标」，自带无障碍名。
导入
ts
import { GlassIcons } from "@hulianui/ui"Props
GlassIconsProps
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items* | GlassIconItem[] | — | 图标项列表，按网格依次渲染为玻璃按钮 |
| columns | number | 3 | 网格列数，窄屏自动回落到更少列 |
| className | string | — | 透传根网格容器 className（可覆盖列数/间距/对齐） |
| style | CSSProperties | — | 透传根容器内联样式 |
GlassIconItem · Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| label* | string | — | hover/focus 滑出的文字，同时作按钮 aria-label |
| color | string | "primary" | 背面发光配色，预设名 primary｜blue｜purple｜red｜indigo｜orange｜green，或任意 CSS 颜色/渐变 |
| className | string | — | 透传该按钮 className |
GlassIconItem · Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | () => void | 点击该图标按钮时回调 |
GlassIconItem · Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon* | ReactNode | 图标节点（通常 lucide-react），渲染于玻璃前层中央，aria-hidden |
禁忌 / 坑
label既是滑出文字也是aria-label，必填，不要为视觉留空——否则按钮失去无障碍名。- 玻璃发光在深色背景上才清晰，浅底下效果弱；
color喂 token/渐变时务必带--color-前缀。 - 容器需
overflow-visible，否则 3D 抬升与标签滑出会被裁切。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
import { Heart, Star, Bell } from "lucide-react";
<GlassIcons
columns={3}
items={[
{ icon: <Heart />, label: "收藏", color: "red" },
{ icon: <Star />, label: "星标", color: "orange" },
{ icon: <Bell />, label: "通知", color: "blue" },
]}
/>