更新记录

0.3.0（2026-09-03） 下载此版本

• 新增自定义图标能力：glyph + font-family prop，支持自备图标字体（如 iconfont.cn）接入，无需改库

0.2.15（2026-08-31） 下载此版本

• 新增内置图标：player-play / player-pause 及 filled 变体（player-play-filled / player-pause-filled）、arrows-maximize / arrows-minimize（Tabler outline + filled 合并子集，字体重建）

0.2.14（2026-08-18） 下载此版本

• 蒸汽模式兼容：移除 <style> 中已废弃的 lines: 1 声明（仅 VDOM 支持，Vapor 下告警），行数限制改用 <text> 的 :max-lines="1" 属性

平台兼容性

uni-app x(4.25)

其他

nax-icon

nax-ui 字体图标组件（uni-app x / uvue）。

安装

uni_modules/nax-icon

easycom 自动生效。

推荐同时安装主题包

uni_modules/nax-ui-theme

@import "@/uni_modules/nax-ui-theme/theme/default.css";

主题

通过 CSS 变量覆盖：

依赖

安装 theme 后仍需：App.uvue @import + 一处 class="nax-theme"。详见 uni_modules/nax-ui-theme/readme.md。

基础用法

<nax-icon name="search"></nax-icon>
<nax-icon name="close" size="sm" color="#999999"></nax-icon>
<nax-icon name="arrow-right" size="20" @click="onTap"></nax-icon>

配合按钮：

<nax-button type="primary" icon="search" label="搜索"></nax-button>

<nax-button type="primary" label="搜索">
  <template #icon>
    <nax-icon name="search" size="sm" color="#ffffff"></nax-icon>
  </template>
</nax-button>

Props

尺寸

Events

自定义图标（glyph / font-family）

内置图标集固定。业务需要自有图标（品牌 logo、运营素材、多语言图标等）时，可以自备一套图标字体接入 nax-icon，无需改动组件库。

原理

字体图标 = 「字体」+「字形字符」。内置的 name 是组件库帮你做好的「名字 → 字符」映射；自定义时由你自己提供这两样：

• glyph：要渲染的图标码位，直接把 iconfont 页面显示的  原样粘贴即可，组件自动识别，无需手动转义
• font-family：你的图标字体族名，必须与已注册的 @font-face 的 font-family 一致

三步接入

1. 生成图标字体
2. 注册 @font-face
3. 用 glyph + font-family 渲染

第一步：生成图标字体

以 iconfont.cn（阿里巴巴图标库）为例：

1. 挑选需要的图标加入项目
2. 项目页点击「下载到本地」，保留 字体文件（.ttf / .woff / .woff2）
3. 在「项目设置」里查看每个图标的 Unicode 码位（形如 \ue001），记下你要用的码位
4. 也可用 fontello / IcoMoon 自选 SVG 导出 ttf（可只导出需要的图标，控制字体体积）

第二步：注册 @font-face

把字体文件放入项目的 static/ 目录，在 App.uvue 的 <style> 中注册：

/* App.uvue */
@font-face {
  font-family: my-icons;
  src: url('/static/my-icons.ttf');
}

平台差异（务必按端处理）：

提示：微信小程序可先按需裁剪字体再转 base64，避免包体膨胀。

第三步：使用

直接粘贴 iconfont 页面显示的码位（Unicode 模式下的 ），不用转义：

<nax-icon glyph="&#xe6cf;" font-family="my-icons" size="20" color="#18a058"></nax-icon>

glyph 自动识别以下写法，等价：

优先级规则：glyph 非空 → 直接渲染 glyph；glyph 为空 → 用 name 查内置映射。两者同时传时 glyph 生效。

常见问题

当前支持的图标

close, check, plus, minus
arrow-left, arrow-right, arrow-up, arrow-down
chevron-left, chevron-right, chevron-up, chevron-down
search, loading, info, warning, success, error
user, home, more, edit, delete, star, heart
settings, eye, eye-off, copy, share, image, image-off, loader, loader-4, square, circle, square-check,
file-off, notes-off, database-off, message-off,
category, category-filled, map-pin, map-pin-filled,
player-play, player-pause, player-play-filled, player-pause-filled,
arrows-maximize, arrows-minimize