更新记录

1.0.0（2026-10-08） 下载此版本

• 首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(5.23)

e-icons 图标

轻量图标组件，内置 90+ 常用移动端图标。纯 Vue 实现，全平台通用，无需自定义基座。

特性

• 零字体依赖：使用内联 SVG path 渲染，不需要 @font-face 与 ttf 文件，小程序端免去 base64 转换
• 全平台一致：App / H5 / 微信 / 支付宝 / 抖音 等小程序渲染结果一致
• 可 tree-shaking：只引用用到的图标，产物不膨胀
• 可扩展：通过 customPrefix 传入自己的图标表，与内置图标合并使用

安装

本插件为 uni_modules 规范组件，引入工程后可直接使用，无需 npm 安装。

基本用法

<template>
  <view>
    <!-- 最简用法 -->
    <e-icons type="home" />

    <!-- 自定义颜色与尺寸 -->
    <e-icons type="star-filled" color="#ff9500" :size="32" />

    <!-- 尺寸支持 rpx -->
    <e-icons type="notification" color="#dd524d" size="48rpx" />

    <!-- 可点击 -->
    <e-icons type="close" clickable @click="onClose" />

    <!-- 使用图片作为图标 -->
    <e-icons image="/static/icons/custom.png" :size="24" />
  </view>
</template>

属性

事件

内置图标清单

方向类

arrow-left arrow-right arrow-up arrow-down up down back forward

操作类

close closeempty closeempty-circle checkmarkempty checkbox checkbox-filled circle circle-filled plus plusempty minus trash refresh undo redo

导航与状态类

home home-filled list bars more more-filled search info info-filled help help-filled notification notification-filled star star-filled heart heart-filled download upload image camera videocam videofill chat chatbubble chatbubble-filled chatboxes person person-filled contact contact-filled staff setting gear location location-filled map link email phone cart wallet order lock unlock eye eye-filled calendar time clock sound sound-filled compose paperplane paperplane-filled flag flag-filled mic mic-filled loop scan cloud-upload cloud-download list-box gift medal

扩展自定义图标

在 icons.js 中追加，或在使用时传入：

<template>
  <e-icons type="my-icon" :custom-prefix="myIcons" color="#007aff" :size="24" />
</template>

<script>
export default {
  data() {
    return {
      // 关键：viewBox 必须是 0 0 1024 1024，可与其他图标库坐标体系对齐
      myIcons: {
        'my-icon': 'M512 128a384 384 0 1 0 0 768 384 384 0 0 0 0-768z'
      }
    }
  }
}
</script>

实现说明

为什么不用 iconfont 字体方案？

字体图标需要额外加载 ttf/woff 文件，在小程序端必须转成 base64 内联才能生效，会显著增大包体积；且字体单色限制无法做多色图标，也无法按需裁剪。SVG path 方案下每个图标只是一个字符串，零网络请求、可 tree-shaking、渲染结果在各端完全一致。

viewBox 为什么固定 1024？

与阿里巴巴 iconfont、uni-icons 等主流图标库的坐标体系保持一致，你可以直接把现成的 SVG path 粘贴进来，不需要做缩放换算。

平台兼容

隐私与权限

本插件为纯前端渲染组件，不申请任何系统权限，不采集、不上传任何数据。