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',
+        icon: 'iconfont icon-my',
-        iconType: 'local',
+        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",
+        "icon": "iconfont icon-my",
-        "iconType": "local"
+        "iconType": "iconfont"
       }
     ]
   },

src/style/iconfont.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 4543091 */
+  src:
+    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOwAAsAAAAAB9AAAANjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDBIJqATYCJAMQCwoABCAFhGcHPRvnBsgusG3kMyE15/44PsBX09waBHv0REDt97oHAQDFrOIyPirRiULQ+TJcXV0hCYTuVFcBC915/2vX/32Q80hkZ5PZGZ9snvwruVLloidKqYN6iKC53bOtbKwVLSIi3W6zCWZbs3VbER3j9JpGX3ySYcc94IQRTK5s4epS/jSqIgvg37qlY2/jwQN7D9ADpfRCmIknQByTscVZPTBr+hnnCKg2o4bjakvXEPjuY65DJGeJNtBUhn1JxOBuB2UZmUpBOXdsFp4oxOv4GHgs3h/+wRDcicqSZJG1q9kK1z/Af9NpqxjpC2QaAdpHlCFh4spcYXs5sMWpSk5wUj31G2dLQKVKkZ/w7f/8/i/A3JVUSZK9f7xIKJeU14IFpBI/Qfkkz46GT/CuaGREfCtKJUougWeQWHvVC5Lcz2BGS+SePR99vj3yjJx7h574tp7uWcOh4yfaTjS/245TT/vkQrN+a7RLkK8+Vd+bz+FSGh+9srDQKPeJ2s29z7ah4+efdoxefRbbGwfy7ht+SuIWukzsu1b6ePP+6kN1aamb47qsPim1Ia3xdEpDcl1dckPKGYnneI23+57r2W1Mmkqs6ajrChRCs5qyQ66rTVWhgZaG7toOeHm5cxn0sSQuNDEgcUTdNTSupKI1JRZih/JssAUKezPeOJJzbNozF6zWJuuVavVU5Tgtkop/SDzHa7ytvnCTq0PhkEfi4xLLtb0PuwyOAYqmrYQApFJyoJjTnfz+ve94vvv2f/yWgxl8Jd8Di2DRDPuob59mU/+VfDCROQyR8xSnmP9fXm7liagmN39OlmbvjqG0sMsJKrU0EFXogaRSH5bNY1CmxhyUq7QC1cY1T67RwuQk5CoM2RUQNLoEUb03kDS6h2XzcyjT7iOUa/QXqq1Hn6/GUBAaGcGcWJFlGUmCoVOp8kLvABHnVczGYiOE2SVEUH5OXj/TSnTCDjHAviAWcE4RZYaGWszNiKoayGSGTASeY+PcrMjNpVMvyREMDRoxBMYRVojFMkQiMOhohubdzxtAiOapMMbERpKMnQT9SL4ceQysVdJZVa9kEbsFogIcRyEUE2kN0mL7CDVIGhBzupWMEHA5bDvipgq5hKJcKef8ivbx1kC15KgcYkghhzLxYNntxoKCReJ82jAHAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.woff?t=1715485842402') format('woff'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.ttf?t=1715485842402') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-my:before {
+  content: '\e78c';
+}
+
+.icon-package:before {
+  content: '\e9c2';
+}
+
+.icon-chat:before {
+  content: '\e600';
+}

src/style/index.scss

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