---
url: /components/icon-grid.md
---
# IconGrid 图标网格

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

## 内置展示集

## 自定义图标集

```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](./search-box)） | boolean | `true` |
| placeholder | 搜索占位 | string | `'Search icons'` |
| copy-on-select | 点击单元格复制图标名 | boolean | `true` |

### 事件

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

### 插槽

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

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