Skip to content
仅桌面端保证样式

IconGrid 图标网格

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

内置展示集

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

自定义图标集

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

收藏 1

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

事件联动

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

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

API

Props

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

事件

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

插槽

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

图标数据

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

基于 MIT 许可证发布