From 648a768bdd2c58f1df48616a5620a855473fa267 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 17 Mar 2021 10:10:58 +0800
Subject: [PATCH] feat(List): add @list-loading-icon-size less var (#8365)

---
 src/list/List.tsx                             | 4 +++-
 src/list/README.md                            | 3 ++-
 src/list/README.zh-CN.md                      | 3 ++-
 src/list/index.less                           | 7 +++++++
 src/list/test/__snapshots__/demo.spec.ts.snap | 6 ++----
 src/style/var.less                            | 3 ++-
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/list/List.tsx b/src/list/List.tsx
index be7cb4938..895cec922 100644
--- a/src/list/List.tsx
+++ b/src/list/List.tsx
@@ -118,7 +118,9 @@ export default defineComponent({
             {slots.loading ? (
               slots.loading()
             ) : (
-              <Loading size={16}>{props.loadingText || t('loading')}</Loading>
+              <Loading class={bem('loading-icon')}>
+                {props.loadingText || t('loading')}
+              </Loading>
             )}
           </div>
         );
diff --git a/src/list/README.md b/src/list/README.md
index 0e40759d0..b3944a10d 100644
--- a/src/list/README.md
+++ b/src/list/README.md
@@ -204,7 +204,8 @@ How to use: [Custom Theme](#/en-US/theme).
 
 | Name                    | Default Value   | Description |
 | ----------------------- | --------------- | ----------- |
-| @list-icon-margin-right | `5px`           | -           |
+| @list-icon-margin-right | `@padding-base` | -           |
 | @list-text-color        | `@gray-6`       | -           |
 | @list-text-font-size    | `@font-size-md` | -           |
 | @list-text-line-height  | `50px`          | -           |
+| @list-loading-icon-size | `16px`          | -           |
diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md
index 19f239f36..47de211a5 100644
--- a/src/list/README.zh-CN.md
+++ b/src/list/README.zh-CN.md
@@ -219,10 +219,11 @@ export default {
 
 | 名称                    | 默认值          | 描述 |
 | ----------------------- | --------------- | ---- |
-| @list-icon-margin-right | `5px`           | -    |
+| @list-icon-margin-right | `@padding-base` | -    |
 | @list-text-color        | `@gray-6`       | -    |
 | @list-text-font-size    | `@font-size-md` | -    |
 | @list-text-line-height  | `50px`          | -    |
+| @list-loading-icon-size | `16px`          | -    |
 
 ## 常见问题
 
diff --git a/src/list/index.less b/src/list/index.less
index e86c4408b..99ab6352f 100644
--- a/src/list/index.less
+++ b/src/list/index.less
@@ -14,4 +14,11 @@
     height: 0;
     pointer-events: none;
   }
+
+  &__loading-icon {
+    .van-loading__spinner {
+      width: @list-loading-icon-size;
+      height: @list-loading-icon-size;
+    }
+  }
 }
diff --git a/src/list/test/__snapshots__/demo.spec.ts.snap b/src/list/test/__snapshots__/demo.spec.ts.snap
index b61c279a0..6ccee5f86 100644
--- a/src/list/test/__snapshots__/demo.spec.ts.snap
+++ b/src/list/test/__snapshots__/demo.spec.ts.snap
@@ -46,10 +46,8 @@ exports[`should render demo and match snapshot 1`] = `
            aria-busy="true"
       >
         <div class="van-list__loading">
-          <div class="van-loading van-loading--circular">
-            <span class="van-loading__spinner van-loading__spinner--circular"
-                  style="width: 16px; height: 16px;"
-            >
+          <div class="van-loading van-loading--circular van-list__loading-icon">
+            <span class="van-loading__spinner van-loading__spinner--circular">
               <svg class="van-loading__circular"
                    viewbox="25 25 50 50"
               >
diff --git a/src/style/var.less b/src/style/var.less
index 531557c31..a3be7f0cb 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -469,10 +469,11 @@
 @image-preview-close-icon-z-index: 1;
 
 // List
-@list-icon-margin-right: 5px;
+@list-icon-margin-right: @padding-base;
 @list-text-color: @gray-6;
 @list-text-font-size: @font-size-md;
 @list-text-line-height: 50px;
+@list-loading-icon-size: 16px;
 
 // Loading
 @loading-text-color: @gray-6;