fix: button icon style bug

src/packages/button/demo.vue

@@ -98,6 +98,9 @@ export default createDemo({
 }
 .demo-button-row2 {
   margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 .nut-button {
   margin-right: 15px;

src/packages/button/index.scss

@@ -1,6 +1,7 @@
 .nut-button {
   position: relative;
   display: inline-block;
+  flex-shrink: 0;
   height: $button-default-height;
   box-sizing: border-box;
   margin: 0;
@@ -33,6 +34,13 @@
   &:active::before {
     opacity: 0.1;
   }
+  &__warp {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
   &--loading,
   &--disabled {

src/packages/button/index.vue

@@ -1,9 +1,11 @@
 <template>
   <view :class="classes" :style="getStyle" @click="handleClick">
-    <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
-    <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
-    <view :class="{ text: icon || loading }" v-if="$slots.default">
-      <slot></slot>
+    <view class="nut-button__warp">
+      <nut-icon class="nut-icon-loading" v-if="loading"></nut-icon>
+      <nut-icon :class="icon" v-if="icon && !loading" :name="icon"></nut-icon>
+      <view :class="{ text: icon || loading }" v-if="$slots.default">
+        <slot></slot>
+      </view>
     </view>
   </view>
 </template>

src/styles/variables.scss

@@ -17,7 +17,7 @@ $white: #fff;
 $black: #000;
 
 // padding
-$padding-xs: 8px 12px;
+$padding-xs: 12px;
 
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun,
   sans-serif !default;