图标检索

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

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

npm i @mdi/js

基本用法

<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	—	无障碍名称；不传时图标对屏幕阅读器隐藏

颜色优先跟随上下文

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

图标检索

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

预览尺寸 22px

正在载入图标清单…

命名规则

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

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

常用图标速查

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'

别用 import * as mdi

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

下一步

• Icon 图标组件 —— MIcon 的完整 API 与演示。