必须设置"tabBar":{"custom":true}并手写custom-tab-bar/index.vue组件，因原生tabBar仅支持80×80 PNG图标，不支持SVG、字体图标、动态颜色及运行时切换，H5端还会fallback为div模拟导致行为不一致。
不能直接用原生 tabBar 实现真正意义上的图标自定义——它只认 80×80 PNG，不支持 SVG、字体图标、动态颜色或运行时切换，H5 端还会 fallback 成 div 模拟，行为不一致。
必须设置 "custom": true 并手写组件
这是唯一可靠路径。原生 tabBar 的图标能力被平台硬性限制，连 iconPath 都不接受网络地址（微信小程序 2.7.0+ 除外），更别说用 iconfont 或 v-for 渲染动态图标了。
-
pages.json中必须显式配置"tabBar": {"custom": true}，否则自定义组件根本不会加载 - 组件路径固定为
custom-tab-bar/index.vue（注意是根目录下，不是components/） - 所有 tab 页面仍需在
tabBar.list中声明，否则uni.switchTab会失败
uv-tabbar 封装方案里怎么换图标
如果你用的是基于 uv-tabbar 的封装（比如知识库中提到的 bottom-tabbar.vue），图标由配置驱动，不写死在模板里：
- 图标路径全在
tabbar.config.js的tabs数组里，例如activeIcon: '@/static/icons/home-active.png' - 要用字体图标？把
active-icon插槽里的<image>换成<text class="iconfont icon-home"></text>，并确保样式已全局注入 - 图标尺寸靠
config.iconSize统一控制，避免各 tab 不对齐 - 注意：
require()路径在 H5 和 App 端可能失效，优先用绝对路径（@/static/...）或 CDN 地址（仅限支持平台）
常见踩坑点：图标不显示 / 选中状态错乱
这类问题几乎都出在路径、状态同步或平台兼容性上：
- 微信小程序真机调试时图标空白？检查
iconPath是否用了相对路径（如./xxx.png）——必须是项目内静态资源路径，且文件实际存在 - 切换 tab 后图标没变？确认
currentTab值是否和uv-tabbar的valueprop 严格一致，且@change回调里调用了uni.switchTab而非uni.navigateTo - H5 端图标模糊？PNG 图标未按 2x/3x 导出，或 CSS 中未设
image-rendering: -webkit-optimize-contrast - App 端图标偏移？
uv-tabbar-item默认有内边距，用:style="{ padding: 0 }"覆盖，再手动控制图标和文字间距
最易被忽略的是：即使你完全重写了 custom-tab-bar/index.vue，也必须在每个使用该 tab 的页面 onShow 里主动同步当前页索引（比如通过 getCurrentPages() 取路径匹配），否则热重载或后台切回时状态就丢了。
