fix: 修复 taro 下 badge icon 样式问题

src/packages/__VUE/badge/doc.en-US.md

@@ -242,6 +242,7 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

src/packages/__VUE/badge/doc.md

@@ -243,6 +243,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

src/packages/__VUE/badge/doc.taro.md

@@ -242,6 +242,7 @@ import { Check, Link, Download } from '@nutui/icons-vue-taro';
 | --nut-badge-color| _#fff_ |
 | --nut-badge-font-size| _var(--nut-font-size-1)_ |
 | --nut-badge-border-radius| _14px_ |
+| --nut-badge-icon-padding| _4px_ |
 | --nut-badge-padding| _0 5px_ |
 | --nut-badge-content-transform| _translate(50%, -50%)_ |
 | --nut-badge-z-index| _1_ |

src/packages/__VUE/badge/index.scss

@@ -10,16 +10,20 @@
   position: relative;
   display: inline-block;
   .nut-badge__icon {
+    display: flex;
+    align-items: center;
     line-height: normal;
     transform: $badge-content-transform;
     position: absolute;
     background: $badge-background-color;
-    padding: $badge-padding;
+    padding: $badge-icon-padding;
     text-align: center;
     border-radius: $badge-border-radius;
     z-index: $badge-z-index;
   }
   .nut-badge__content {
+    display: flex;
+    align-items: center;
     transform: $badge-content-transform;
     &--sup {
       position: absolute;

src/packages/styles/variables-jdb.scss

@@ -596,6 +596,7 @@ $badge-background-color: linear-gradient(135deg, $primary-color-start 0%, $prima
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 14px !default;
+$badge-icon-padding: 4px !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;

src/packages/styles/variables-jddkh.scss

@@ -528,6 +528,7 @@ $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-col
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
 $badge-border-radius: 8px !default;
+$badge-icon-padding: 4px !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translate(50%, -50%) !default;
 $badge-z-index: 1 !default;

src/packages/styles/variables-jdt.scss

@@ -543,6 +543,7 @@ $badge-background-color: var(
 $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
+$badge-icon-padding: var(--nut-badge-icon-padding, 4px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
 $badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;

src/packages/styles/variables.scss

@@ -578,6 +578,7 @@ $badge-background-color: var(
 $badge-color: var(--nut-badge-color, #fff) !default;
 $badge-font-size: var(--nut-badge-font-size, $font-size-1) !default;
 $badge-border-radius: var(--nut-badge-border-radius, 14px) !default;
+$badge-icon-padding: var(--nut-badge-icon-padding, 4px) !default;
 $badge-padding: var(--nut-badge-padding, 0 5px) !default;
 $badge-content-transform: var(--nut-badge-content-transform, translate(50%, -50%)) !default;
 $badge-z-index: var(--nut-badge-z-index, 1) !default;