uniapp tabBar使用uni-icons

UniApp 的 tabBar 使用 Uni Icons 提供图标功能，可以帮助开发者轻松创建美观且一致的底部导航栏。UniIcons 是一套基于 SVG 格式的 UI 图标库，它包含了大量的常用矢量图标，并且可以在各个平台如 H5、小程序、Web 端等无缝应用。

在 UniApp 中设置 tabBar 与 UniIcons 结合的步骤大致如下：

1. **引入图标库**：首先在项目的 `uni-app.config.js` 文件中，配置支持 SVG 资源加载：

export default {
  //...
  iconfont: ['@/assets/iconfont/iconfont.css'], // 引入 UniIcons 的 CSS
};

2. **安装 UniIcons**：通过 CLI 安装图标字体，运行命令：

$ tsc -p src/components/@uniapp/cli-iconfont.tsconfig.json

3. **在页面组件中使用 icons**：在需要展示图标的 tabBar 上，可以使用 `<uni-icon>` 组件：

<view class="tabBar-item">
  <a-button type="primary" @click="tabClick('home')">
    <uni-icon type="home-fill" size="28" />首页
  </a-button>
</view>

在这个例子中，`type="home-fill"` 指定了 UniIcon 库中的图标名称，`size="28"` 控制了图标大小。

4. **自定义样式**：为了适应你的设计，你可以调整 `.tabBar-item` 类或`.uni-icon`类的样式，如颜色、边距等。