M-Icon 图标组件

灵活的图标组件，支持内置图标和自定义图片图标。

平台兼容

• ✅ H5
• ✅ 微信小程序
• ✅ uni-app 全平台

基本用法

使用内置图标

通过 name 属性指定图标名称。

<template>
  <m-icon name="success" />
  <m-icon name="warning" />
  <m-icon name="error" />
  <m-icon name="info" />
</template>

使用图片图标

当 name 属性包含 / 时，会被识别为图片路径。

<template>
  <m-icon name="/static/icon.png" />
  <m-icon name="https://example.com/icon.png" />
</template>

图标大小

通过 size 属性设置图标大小，支持数字（自动添加 px）或字符串（如 '20rpx'、'1.5em' 等）。

<template>
  <m-icon name="success" :size="24" />
  <m-icon name="warning" :size="32" />
  <m-icon name="error" size="48rpx" />
  <m-icon name="info" size="2em" />
</template>

图标颜色

通过 color 属性设置图标颜色。

<template>
  <m-icon name="success" color="#4d80f0" />
  <m-icon name="warning" color="#f0883a" />
  <m-icon name="error" color="#fa4350" />
  <m-icon name="info" color="#34d19d" />
</template>

自定义样式

通过 customStyle 属性设置自定义样式。

<template>
  <m-icon 
    name="success" 
    customStyle="margin-right: 8px; opacity: 0.8;" 
  />
</template>

自定义类名

通过 customClass 属性添加自定义类名。

<template>
  <m-icon 
    name="success" 
    customClass="my-icon"
  />
</template>

<style>
.my-icon {
  margin: 0 8px;
  transition: transform 0.3s;
}

.my-icon:active {
  transform: scale(1.1);
}
</style>

点击事件

通过 @click 事件监听图标点击。

<template>
  <m-icon 
    name="refresh" 
    @click="handleRefresh"
  />
</template>

<script setup>
function handleRefresh(event) {
  console.log('刷新图标被点击', event)
}
</script>

事件

事件名	说明	参数
click	点击图标时触发	event: MouseEvent
touch	触摸图标时触发（预留）	-

属性

属性名	类型	默认值	说明
name	string	-	图标名称或图片路径
color	string	-	图标颜色
size	string \| number	-	图标大小
classPrefix	string	'm-icon'	图标类名前缀
customClass	string	''	自定义类名
customStyle	string	''	自定义内联样式

插槽

无插槽，图标内容通过 name 属性指定。

使用示例

基础图标

<template>
  <view class="icon-group">
    <m-icon name="success" />
    <m-icon name="warning" />
    <m-icon name="error" />
    <m-icon name="info" />
    <m-icon name="refresh" />
    <m-icon name="add" />
    <m-icon name="close" />
    <m-icon name="back" />
  </view>
</template>

<style>
.icon-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
</style>

带颜色和大小的图标

<template>
  <view class="icon-demo">
    <m-icon name="success" color="#4d80f0" :size="24" />
    <m-icon name="warning" color="#f0883a" :size="32" />
    <m-icon name="error" color="#fa4350" :size="40" />
    <m-icon name="info" color="#34d19d" :size="48" />
  </view>
</template>

图片图标

<template>
  <view class="image-icon-demo">
    <m-icon name="/static/logo.png" :size="48" />
    <m-icon name="https://example.com/avatar.png" :size="64" />
  </view>
</template>

可点击图标

<template>
  <view class="clickable-icons">
    <m-icon 
      name="refresh" 
      :size="32" 
      color="#4d80f0"
      @click="handleRefresh"
      customClass="clickable"
    />
    <m-icon 
      name="add" 
      :size="32" 
      color="#34d19d"
      @click="handleAdd"
      customClass="clickable"
    />
    <m-icon 
      name="close" 
      :size="32" 
      color="#fa4350"
      @click="handleClose"
      customClass="clickable"
    />
  </view>
</template>

<script setup>
function handleRefresh() {
  console.log('刷新')
}

function handleAdd() {
  console.log('添加')
}

function handleClose() {
  console.log('关闭')
}
</script>

<style>
.clickable-icons {
  display: flex;
  gap: 24px;
}

.clickable {
  cursor: pointer;
  transition: transform 0.2s;
}

.clickable:active {
  transform: scale(0.9);
}
</style>

图标按钮

<template>
  <m-button type="primary" plain>
    <m-icon name="search" :size="16" />
    <text style="margin-left: 8px;">搜索</text>
  </m-button>
  
  <m-button type="success" plain>
    <m-icon name="add" :size="16" />
    <text style="margin-left: 8px;">添加</text>
  </m-button>
</template>

图标徽章

<template>
  <view class="icon-badge">
    <view class="icon-wrapper">
      <m-icon name="bell" :size="32" />
      <view class="badge">3</view>
    </view>
  </view>
</template>

<style>
.icon-badge {
  position: relative;
}

.icon-wrapper {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  color: white;
  background: #fa4350;
  border-radius: 10px;
  padding: 0 6px;
}
</style>

实现原理

1. 图标识别：

   • 当 name 属性包含 / 时，被识别为图片路径，使用 <image> 标签渲染
   • 否则被识别为内置图标名称，使用类名方式渲染

2. 样式处理：

   • 颜色通过 color 属性直接设置
   • 大小通过 size 属性设置，支持自动添加 px 单位
   • 自定义样式通过 customStyle 和 customClass 实现

3. 事件处理：

   • 支持 click 事件
   • 预留 touch 事件

4. 组件配置：

   • virtualHost: true - 减少 DOM 层级
   • addGlobalClass: true - 支持全局类名
   • styleIsolation: 'shared' - 样式隔离

注意事项

1. 图标名称：

   • 内置图标需要在样式文件中定义对应的类名
   • 图片图标需要提供有效的图片路径

2. 尺寸单位：

   • 数字类型的 size 会自动添加 px 单位
   • 字符串类型的 size 会直接使用

3. 图片图标：

   • 图片图标会使用 <image> 标签渲染
   • 建议使用正方形图片以获得最佳显示效果

4. 样式优先级：

   • 内联样式优先级高于类名样式
   • 自定义样式会覆盖默认样式

5. 微信小程序：

   • 图片路径需要符合小程序的资源路径规范
   • 网络图片需要配置域名白名单