接了个 uni-app 的外包，底部导航要十几个图标，UI 只给了图没给字。照一张张切图，包体积蹭蹭往上涨，于是打算用现成的图标库。

原生就带一套

uni-app 内置了 uni-icons，只有二十多种基础图标，箭头、加减号、搜索、勾选这些。做设置页这种简单需求够用，直接装包引用组件就行。可一旦要丰富点的彩色图标，就不够看了。

更多还是靠这三家

  • iconfont：阿里出的，图标最多，选完可以生成 font-class 或 unicode，uni-app 里用 text 组件引用。
  • iconpark：字节出的，风格统一，有线性、填充、多色三种，支持按需引入。
  • heroicons：Tailwind 团队的，线条风，和简单 UI 很搭。

接入时最常见的是字体图标

把 iconfont 的字体文件和 CSS 下下来，放到项目 static 目录，在 App.vue 里全局引入样式。页面里用 text 组件加对应的类名渲染，大小用 font-size 调，颜色用 color 调。有些图标在 H5 正常、App 端不显示，八成是字体路径用了相对路径，打包后找不到，改成绝对路径或 base64 内联试试。

包体积控制

字体文件动辄几百 KB，只挑用的到的图标下载，别整包搬。配置按需引入后，一般能把图标相关的体积压到几十 KB。特别小的项目，直接用 SVG 组件更轻。

还有一个细节，图标颜色最好走主题变量，别写死色值。后面换深色模式或换肤，直接改变量就行，不用一张张返工。这个习惯前期多花十分钟，后面能省半天。

图标库选哪个不重要，重要的是跟设计统一风格，还能保证各端都显示正常。先实机跑一遍再交工，免得返工。