# 图标检索

图标数据全部来自 [Material Design Icons](https://pictogrammers.com/library/mdi/)，通过 `@mdi/js` 以**纯字符串常量**的形式提供：每个图标就是一条 24×24 viewBox 的 SVG path，按需引入即可被 tree-shaking 掉未使用的部分。

`MIcon` 组件本身只做渲染，不内置任何图标集合，所以必须自行安装 `@mdi/js`：

```bash
npm i @mdi/js
```

## 基本用法

```vue
<script setup lang="ts">
import { MIcon } from 'miao-design'
import { mdiAccountPlusOutline, mdiSync } from '@mdi/js'
</script>

<template>
  <MIcon :path="mdiAccountPlusOutline" :size="20" />
  <MIcon :path="mdiSync" :size="20" :spin="true" title="同步中" />
</template>
```

## 属性一览

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `path` | `string` | — | SVG path data，通常来自 `@mdi/js`；也可传入任意 24×24 viewBox 的自定义路径 |
| `size` | `number \| string` | `24` | 数字按 px 处理，字符串原样输出（如 `'1.5em'`） |
| `color` | `'primary' \| 'secondary' \| 'error' \| 'success' \| 'warning' \| 'info'` | — | 语义色；缺省时继承 `currentColor` |
| `disabled` | `boolean` | `false` | 禁用态，使用 `action.disabled` 文字色 |
| `flip` | `'horizontal' \| 'vertical' \| 'both'` | — | 翻转方向 |
| `rotate` | `number` | `0` | 旋转角度（deg，顺时针） |
| `spin` | `boolean` | `false` | 自旋动画，常用于加载 / 同步 |
| `title` | `string` | — | 无障碍名称；不传时图标对屏幕阅读器隐藏 |

::: tip 颜色优先跟随上下文
不传 `color` 时 SVG 使用 `fill="currentColor"`，所以直接把 `MIcon` 放进按钮或文字里，它就会继承父级的文字颜色 —— 这也是在 `MButton` 里混排图标不需要额外设色的原因。
:::

## 图标检索

数据量较大（7000+），这里按需加载，点击任意图标即可复制其变量名。

<IconSearch />

## 命名规则

图标名遵循 `mdi{PascalCaseName}` 模式，例如 `mdiWindowMaximize`、`mdiArrowLeftBold`。

| 后缀 | 含义 | 示例 |
| --- | --- | --- |
| `Outline` | 轮廓线版本（无填充） | `mdiAccountOutline` |
| `Bold` | 加粗版本 | `mdiCheckBold` |
| `Multiple` | 多实例 | `mdiAccountMultiple` |
| `Plus` / `Minus` | 添加 / 移除 | `mdiAccountPlus` |
| `Check` | 带勾选标记 | `mdiAccountCheck` |
| `Alert` | 带警告标记 | `mdiAccountAlert` |
| `Off` | 关闭 / 禁用 | `mdiBluetoothOff` |
| `Variant` | 变体 | `mdiPackageVariant` |
| `Circle` / `Box` | 圆形 / 方形容器 | `mdiAlertCircle` |

## 常用图标速查

```ts
import {
  mdiPlus, mdiMinus, mdiClose, mdiCheck, mdiCheckCircle,      // 基础操作
  mdiPencilOutline, mdiDeleteOutline, mdiContentCopy,         // 编辑
  mdiMagnify, mdiFilterVariant, mdiRefresh, mdiSync,          // 检索 / 刷新
  mdiChevronDown, mdiChevronRight, mdiArrowLeft, mdiMenu,     // 方向
  mdiAccountOutline, mdiBellOutline, mdiCogOutline,           // 用户 / 设置
  mdiEyeOutline, mdiEyeOffOutline, mdiInformationOutline,     // 状态
  mdiAlertOutline, mdiCloseCircleOutline, mdiLoading           // 反馈
} from '@mdi/js'
```

::: warning 别用 `import * as mdi`
`import * as mdi from '@mdi/js'` 会把 7000+ 条路径全部打进产物（体积以 MB 计）。始终用具名导入。
:::

## 下一步

- [Icon 图标组件](/components/icon) —— `MIcon` 的完整 API 与演示。