更新记录

1.1.2（2026-11-10） 下载此版本

• 字形表抽出为独立模块 components/o-icon/glyphs.js（导出 GLYPHS 与 ICON_NAMES），组件与演示页共用一份数据，新增图标不再需要手动同步演示页
• pages/index/icon.vue 图标总览由 1358 行硬编码清单改为读取字形表，缩减到 32 行

平台兼容性

uni-app(3.8.10)

o-icon 图标

基于 iconfont 的字体图标组件，内置 332 个图标。同一套代码在 Vue2 / Vue3、H5、App、各平台小程序下表现一致。

特性

• 字形表渲染：图标字符通过数据表直接输出到 text 节点，不依赖 ::before 伪元素，nvue / 各家小程序都不会出现“图标不显示”的问题
• 字形数据单一来源：components/o-icon/glyphs.js 导出 GLYPHS（name -> unicode）与 ICON_NAMES（图标名列表），业务代码可 import 用于遍历展示，新增图标只改这一份
• Vue2 / Vue3 双兼容：Options API 编写，Vue3 下通过 emits 声明 click 事件，Vue2 自动忽略
• 全平台小程序适配：微信 / QQ / 支付宝 / 百度 / 字节 / 快手 / 京东 / 飞书，微信端开启 virtualHost 去包裹层，styleIsolation: 'apply-shared' 让页面上的工具类（如 py-2）作用到图标
• 尺寸容错：数字、58、58rpx、24px、1.2em、120%、10vw 均可，非法值自动回退默认值
• 颜色容错：#hex、rgb/rgba、hsl、CSS 变量、主题色名（primary / red / white 等）均可，传空字符串继承父级颜色，无法识别的值按 class 交给外部样式
• 支持 spin 旋转动画、click 事件透传、带前缀的图标名（user 与 o-icon-user 等价）

基础用法

<o-icon name="user"></o-icon>
<o-icon name="search" size="40" color="#23A05F"></o-icon>
<o-icon name="setting-filled" size="48rpx" color="primary"></o-icon>
<o-icon name="loading" size="24px" color="" spin></o-icon>

属性

事件

<o-icon name="close" size="lg" @click="onClose"></o-icon>

全局 class 与样式

组件根节点为 text.o-icon，父级传入的 class / style 会直接作用在图标节点上：

<o-icon name="star-filled" class="mr-2" style="opacity: .6"></o-icon>

需要覆盖颜色 / 尺寸时，行内样式优先级高于 class，可传 color="" 让图标继承父级 color：

<view style="color: #23A05F">
    <o-icon name="user" color=""></o-icon>
</view>

图标清单

name 取值见 components/o-icon/o-icon.vue 中的 GLYPHS 表（与 iconfont.css 的图标名一一对应），共 332 个。

替换 / 新增图标时：

1. 在 iconfont.cn 项目里添加图标并下载字体，覆盖 components/o-icon/iconfont.ttf
2. 同步更新组件内 GLYPHS 表的 '图标名': '\uXXXX' 键值对（由 iconfont 的 iconfont.css 复制转换，键名统一小写）

平台说明

• H5 / App（vue）：@font-face 直接引用同目录 iconfont.ttf
• 小程序：小程序的 wxss / acss 不支持本地字体文件（只认 https 或 base64），因此组件在 #ifdef MP 下改为引入 iconfont.mp.scss——它把 iconfont.ttf 以 base64 内联，微信 / QQ / 支付宝 / 百度 / 字节 / 快手 / 京东 / 飞书均可离线使用
  • 替换字体后需要重新生成：node uni_modules/o-icon/components/o-icon/build-font-base64.js
  • 若不想把 68KB base64 放进主包，可删掉 iconfont.mp.scss 的引用，改用 uni.loadFontFace 加载 CDN 上的字体文件
• App（nvue / uvue）：不支持 CSS @font-face，需在 App.vue 的 onLaunch 中注册字体后使用，例如：

// #ifdef APP-NVUE
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
    fontFamily: 'o-icon',
    src: "url('https://your-cdn.com/iconfont.ttf')"
})
// #endif

更新日志

见 changelog.md。