From b3e514c26b44c313c7566bdc5a0c7a091b56fe0e Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Fri, 29 Apr 2022 16:09:26 +0800
Subject: [PATCH] feat: H5 tabbar iconfont

---
 src/platforms/h5/components/app/tabBar.vue | 36 +++++++++++++++++++---
 src/platforms/h5/service/api/ui/tab-bar.js |  2 +-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/platforms/h5/components/app/tabBar.vue b/src/platforms/h5/components/app/tabBar.vue
index d1be1eb5c..6efbf8048 100644
--- a/src/platforms/h5/components/app/tabBar.vue
+++ b/src/platforms/h5/components/app/tabBar.vue
@@ -36,13 +36,23 @@
           :style="{height:height}"
         >
           <div
-            v-if="getIconPath(item,index) || item.iconPath || item.isMidButton"
+            v-if="getIconPath(item,index) || item.iconfont || item.iconPath || item.isMidButton"
             :class="{'uni-tabbar__icon__diff':!item.text}"
             class="uni-tabbar__icon"
             :style="{width: iconWidth,height:iconWidth}"
-          >
+          >
+            <div
+              v-if="item.iconfont"
+              :style="{
+                color:selectedIndex === index ? selectedColor : color,
+                fontSize: item.iconfont.fontSize || fontSize
+              }"
+              class="uni-tabbar__iconfont"
+            >
+              {{ selectedIndex === index ? item.iconfont.selectedText : item.iconfont.text }}
+            </div>
             <img
-              v-if="!item.isMidButton"
+              v-else-if="!item.isMidButton"
               :src="_getRealPath(getIconPath(item,index))"
             >
             <div
@@ -166,6 +176,10 @@
   uni-tabbar .uni-tabbar__icon img {
     width: 100%;
     height: 100%;
+  }
+
+  uni-tabbar .uni-tabbar__iconfont {
+    font-family: 'UniTabbarIconFont';
   }
 
   uni-tabbar .uni-tabbar__label {
@@ -219,10 +233,12 @@
 <script>
 import getRealPath from 'uni-platform/helpers/get-real-path'
 import { isPlainObject } from 'uni-shared'
-import { publish } from 'uni-platform/service/bridge'
+import { publish } from 'uni-platform/service/bridge'
+import { loadFontFace } from 'uni-core/view/bridge/subscribe/font'
 function cssSupports (css) {
   return window.CSS && CSS.supports && (CSS.supports(css) || CSS.supports.apply(CSS, css.split(':')))
-}
+}
+const UNI_TABBAR_ICON_FONT = 'UniTabbarIconFont'
 export default {
   name: 'TabBar',
   props: {
@@ -247,6 +263,10 @@ export default {
     borderStyle: {
       type: String,
       default: 'black'
+    },
+    iconfontSrc: {
+      type: String,
+      default: ''
     },
     list: {
       type: Array,
@@ -339,6 +359,12 @@ export default {
       if (item.visible === undefined) {
         this.$set(item, 'visible', true)
       }
+    })
+    loadFontFace({
+      options: {
+        family: UNI_TABBAR_ICON_FONT,
+        source: `url("${this.iconfontSrc}")`
+      }
     })
   },
   beforeCreate () {
diff --git a/src/platforms/h5/service/api/ui/tab-bar.js b/src/platforms/h5/service/api/ui/tab-bar.js
index 977aae00d..294c8cecb 100644
--- a/src/platforms/h5/service/api/ui/tab-bar.js
+++ b/src/platforms/h5/service/api/ui/tab-bar.js
@@ -2,7 +2,7 @@ import {
   setProperties
 } from 'uni-shared'
 
-const setTabBarItemProps = ['text', 'iconPath', 'selectedIconPath', 'visible']
+const setTabBarItemProps = ['text', 'iconPath', 'iconfont', 'selectedIconPath', 'visible']
 
 const setTabBarStyleProps = ['color', 'selectedColor', 'backgroundColor', 'borderStyle']
 
-- 
GitLab