feat: tabbar 支持4种图标

.stylelintrc.cjs

@@ -53,5 +53,6 @@ module.exports = {
     'no-duplicate-selectors': null,
     'scss/comment-no-empty': null,
     'selector-class-pattern': null,
+    'font-family-no-missing-generic-family-keyword': null,
   },
 }

.vscode/settings.json

@@ -39,6 +39,7 @@
     "climblee",
     "commitlint",
     "dcloudio",
+    "iconfont",
     "qrcode",
     "refresherrefresh",
     "scrolltolower",

pages.config.ts

@@ -37,14 +37,20 @@ export default defineUniPages({
       {
         pagePath: 'pages/index/about',
         text: '关于',
-        icon: 'i-carbon-3d-mpr-toggle',
+        icon: 'i-carbon-code',
         iconType: 'unocss',
       },
+      // {
+      //   pagePath: 'pages/my/index',
+      //   text: '我的',
+      //   icon: '/static/logo.svg',
+      //   iconType: 'local',
+      // },
       {
         pagePath: 'pages/my/index',
         text: '我的',
-        icon: '/static/logo.svg',
-        iconType: 'local',
+        icon: 'iconfont icon-my',
+        iconType: 'iconfont',
       },
     ],
   },

src/components/fg-tabbar/fg-tabbar.vue

@@ -13,7 +13,10 @@
         :title="item.text"
         :icon="item.icon"
       ></wd-tabbar-item>
-      <wd-tabbar-item v-else-if="item.iconType === 'unocss'" :title="item.text">
+      <wd-tabbar-item
+        v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
+        :title="item.text"
+      >
         <template #icon>
           <view
             h-40rpx
@@ -33,7 +36,7 @@
 
 <script setup lang="ts">
 // unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
-// i-carbon-3d-mpr-toggle
+// i-carbon-code
 import { tabBar } from '@/pages.json'
 import { tabbarStore } from './tabbar'
 

src/pages.json

@@ -33,14 +33,14 @@
       {
         "pagePath": "pages/index/about",
         "text": "关于",
-        "icon": "i-carbon-3d-mpr-toggle",
+        "icon": "i-carbon-code",
         "iconType": "unocss"
       },
       {
         "pagePath": "pages/my/index",
         "text": "我的",
-        "icon": "/static/logo.svg",
-        "iconType": "local"
+        "icon": "iconfont icon-my",
+        "iconType": "iconfont"
       }
     ]
   },

src/style/index.scss

@@ -1,3 +1,5 @@
+@import './iconfont.css';
+
 .test {
   // 可以通过 @apply 多个样式封装整体样式
   @apply mt-4 ml-4;