feat(Loading): add @button-loading-icon-size less var

src/button/Button.tsx

@@ -41,6 +41,7 @@ export default defineComponent({
     hairline: Boolean,
     disabled: Boolean,
     iconPrefix: String,
+    loadingSize: String,
     loadingText: String,
     loadingType: String as PropType<LoadingType>,
     tag: {
@@ -59,10 +60,6 @@ export default defineComponent({
       type: String as PropType<ButtonHTMLAttributes['type']>,
       default: 'button',
     },
-    loadingSize: {
-      type: String,
-      default: '20px',
-    },
     iconPosition: {
       type: String as PropType<'left' | 'right'>,
       default: 'left',
@@ -84,7 +81,6 @@ export default defineComponent({
           class={bem('loading')}
           size={props.loadingSize}
           type={props.loadingType}
-          color="currentColor"
         />
       );
     };

src/button/README.md

@@ -181,3 +181,4 @@ How to use: [Custom Theme](#/en-US/theme).
 | @button-plain-background-color   | `@white`             | -           |
 | @button-disabled-opacity         | `@disabled-opacity`  | -           |
 | @button-icon-size                | `1.2em`              | -           |
+| @button-loading-icon-size        | `20px`               | -           |

src/button/README.zh-CN.md

@@ -208,3 +208,4 @@ app.use(Button);
 | @button-plain-background-color   | `@white`             | -    |
 | @button-disabled-opacity         | `@disabled-opacity`  | -    |
 | @button-icon-size                | `1.2em`              | -    |
+| @button-loading-icon-size        | `20px`               | -    |

src/button/index.less

@@ -110,6 +110,12 @@
   &__loading {
     color: inherit;
     font-size: inherit;
+
+    .van-loading__spinner {
+      color: currentColor;
+      width: @button-loading-icon-size;
+      height: @button-loading-icon-size;
+    }
   }
 
   &--mini {

src/button/test/__snapshots__/demo.spec.ts.snap

@@ -118,9 +118,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--circular van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--circular"
+        <span class="van-loading__spinner van-loading__spinner--circular">
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
           <svg class="van-loading__circular"
                viewbox="25 25 50 50"
           >
@@ -140,9 +138,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--spinner van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--spinner"
+        <span class="van-loading__spinner van-loading__spinner--spinner">
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
           <i>
           </i>
           <i>
@@ -176,9 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--circular van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--circular"
+        <span class="van-loading__spinner van-loading__spinner--circular">
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
           <svg class="van-loading__circular"
                viewbox="25 25 50 50"
           >

src/style/var.less

@@ -159,6 +159,7 @@
 @button-plain-background-color: @white;
 @button-disabled-opacity: @disabled-opacity;
 @button-icon-size: 1.2em;
+@button-loading-icon-size: 20px;
 
 // Calendar
 @calendar-background-color: @white;

src/submit-bar/test/__snapshots__/demo.spec.ts.snap

@@ -83,9 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div class="van-button__content">
           <div class="van-loading van-loading--circular van-button__loading">
-            <span class="van-loading__spinner van-loading__spinner--circular"
+            <span class="van-loading__spinner van-loading__spinner--circular">
-                  style="color: currentColor; width: 20px; height: 20px;"
-            >
               <svg class="van-loading__circular"
                    viewbox="25 25 50 50"
               >