IconGrid 图标网格
EwIconGrid 是本库的招牌组件:分类分节的致密图标网格。内置 900+ 图标展示集(动态 chunk 按需加载, 不占主包体积),提供关键词/分类过滤与「点击复制图标名」——单元格 hover 浮现「+」徽标, 复制成功后短暂变为蓝色对勾。
内置展示集
开箱即用
不传 icons 即使用内置展示集;试试搜索 brush、切换分类,点击任意格子复制图标名。
自定义图标集
icons 属性
传入 [{ name, category, paths }] 即可渲染自有集合;categoryZh 可提供中文分组名。
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 | 展示搜索栏(内部为 EwSearchBox) | boolean | true |
| placeholder | 搜索占位 | string | 'Search icons' |
| copy-on-select | 点击单元格复制图标名 | boolean | true |
事件
| 事件 | 说明 | 参数 |
|---|---|---|
| select | 点击单元格 | name |
| copy | 图标名复制成功 | name |
插槽
| 插槽 | 说明 |
|---|---|
| search | 覆写搜索栏 |
| search-suffix | 搜索栏后缀动作位 |
图标数据
内置展示集为每个分类限量采样的 Remix 原生名图标;核心语义名(search / close 等 39 个) 见 EwIcon。扩展采样量请调整生成脚本 SHOWCASE_PER_CATEGORY 后重新执行 pnpm gen:icons。