跳到正文
Linasan UI

IconSelect 图标选择

从图标库里搜索、分类挑选图标,也可以粘贴 SVG。

值是图标的 value;开了 allowSvg 时也可能是一段 SVG 源码,用 isSvgIcon(v) 判断、svgIcon(markup) 渲染(form/svg-icon)。IconPicker 是平铺的小图标单选,适合选项少的场景。

安装

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/icon-select.json

第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。

用法

import { IconSelect, type IconOption } from '@/components/form/icon-select';

const icons: IconOption[] = [{ value: 'users', label: '用户', Icon: Users, group: 'nav' }];
<IconSelect value={icon} onChange={setIcon} icons={icons} groups={groups} allowSvg />

安装 IconPicker

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/icon-picker.json

第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。

属性

IconSelect

属性

类型

IconPicker

属性

类型

本页目录