Icon 矢量图标

包含 73+ 高清 1:1 精致 SVG 矢量图标，每个图标均为 100% 独立设计与独特图形，支持黑白熊猫双模式暗黑自动适配、自定义尺寸与填充颜色。

全量矢量图标清单 (73 个)

info success check warning error close plus minus loading arrow_right arrow_left arrow_up arrow_down chevron_right chevron_left chevron_up chevron_down swap undo redo bold italic underline strikethrough align_left align_center align_right cart bag wallet credit_card gift scan qrcode barcode coupon box truck message send like star heart share user team crown fire home notification sidebar config log_in log_out lock unlock eye eye_off delete edit search shield power camera image video play pause volume map sun moon wechat

代码示例

1. 基础用法

通过 name 属性传入图标名称，通过 size 设置图标尺寸。

<template>
  <mu-icon name="home" size="24" />
  <mu-icon name="notification" size="24" />
  <mu-icon name="config" size="24" />
  <mu-icon name="user" size="24" />
</template>

---

2. 自定义颜色与大小 (Color & Size)

通过 color 属性传入 Hex 或 RGB 颜色。

<template>
  <mu-icon name="heart" size="32" color="#F43F5E" />
  <mu-icon name="star" size="32" color="#F59E0B" />
  <mu-icon name="check_circle" size="32" color="#10B981" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
name	矢量图标名称（见图标清单）	String	-	'info'
size	图标尺寸大小 (px/rpx)	Number | String	-	32
color	图标颜色	String	-	'currentColor'
custom	自定义 SVG 路径字符串（直接注入 SVG 内部）	String	-	''
isImage	是否强制以 <image> 图片模式渲染（适合外链/本地图片）	Boolean	true | false	false
radius	图片模式下的圆角（如 '50%'、'12rpx'）	String	-	''
marginRight	图标右侧间距 (rpx)	Number | String	-	0
marginLeft	图标左侧间距 (rpx)	Number | String	-	0

---

事件说明 (Events)

事件名	说明	回调参数
click	点击图标时触发	(event: TouchEvent)