项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
仅桌面端保证样式

IconGrid 图标网格 ​

EvIconGrid 是本库的招牌组件:分类分节的致密图标网格。内置 900+ 图标展示集(动态 chunk 按需加载, 不占主包体积),提供关键词/分类过滤与「点击复制图标名」——单元格 hover 浮现「+」徽标, 复制成功后短暂变为蓝色对勾。

内置展示集 ​

开箱即用
不传 icons 即使用内置展示集;试试搜索 brush、切换分类,点击任意格子复制图标名。
Loading icons…

自定义图标集 ​

icons 属性
传入 [{ name, category, paths }] 即可渲染自有集合;categoryZh 可提供中文分组名。

收藏 1

vue
<EvIconGrid :icons="[{ name: 'my-icon', category: '收藏', paths: [{ d: '…' }] }]" />

事件联动 ​

点击单元格时依次派发 select(name) 与 copy(name)(copy-on-select 关闭时只派发 select), 可据此实现「复制后吐司提示」等联动:

vue
<EvIconGrid @select="(name) => onSelect(name)" @copy="(name) => onCopy(name)" />

API ​

Props ​

属性说明类型默认值
icons自定义图标集 [{ name, category, categoryZh?, paths }];缺省用内置展示集array—
searchable展示搜索栏(内部为 EvSearchBox)booleantrue
placeholder搜索占位string'Search icons'
copy-on-select点击单元格复制图标名booleantrue

事件 ​

事件说明参数
select点击单元格name
copy图标名复制成功name

插槽 ​

插槽说明
search覆写搜索栏
search-suffix搜索栏后缀动作位

图标数据

内置展示集为每个分类限量采样的 Remix 原生名图标;核心语义名(search / close 等 72 个) 见 EvIcon。扩展采样量请调整生成脚本 SHOWCASE_PER_CATEGORY 后重新执行 pnpm gen:icons。

基于 MIT 许可证发布