feat(Loading): add icon slot (#11109)

* feat(Loading): add icon slot

* chore: update snapshot

packages/vant/src/loading/Loading.tsx

@@ -43,6 +43,15 @@ export default defineComponent({
       extend({ color: props.color }, getSizeStyle(props.size))
     );
 
+    const renderIcon = () => {
+      const DefaultIcon = props.type === 'spinner' ? SpinIcon : CircularIcon;
+      return (
+        <span class={bem('spinner', props.type)} style={spinnerStyle.value}>
+          {slots.icon ? slots.icon() : DefaultIcon}
+        </span>
+      );
+    };
+
     const renderText = () => {
       if (slots.default) {
         return (
@@ -67,9 +76,7 @@ export default defineComponent({
           aria-live="polite"
           aria-busy={true}
         >
-          <span class={bem('spinner', type)} style={spinnerStyle.value}>
+          {renderIcon()}
-            {type === 'spinner' ? SpinIcon : CircularIcon}
-          </span>
           {renderText()}
         </div>
       );

packages/vant/src/loading/README.md

@@ -66,6 +66,19 @@ use `color` or `text-color` to change text color.
 <van-loading text-color="#0094ff" />
 ```
 
+### Custom Icon
+
+Use `icon` slot to custom icon.
+
+```html
+<van-loading vertical>
+  <template #icon>
+    <van-icon name="star-o" size="30" />
+  </template>
+  Loading...
+</van-loading>
+```
+
 ## API
 
 ### Props
@@ -81,9 +94,10 @@ use `color` or `text-color` to change text color.
 
 ### Slots
 
-| Name    | Description  |
+| Name    | Description         |
-| ------- | ------------ |
+| ------- | ------------------- |
-| default | Loading text |
+| default | Loading text        |
+| icon    | Custom loading icon |
 
 ### Types
 

packages/vant/src/loading/README.zh-CN.md

@@ -76,6 +76,19 @@ app.use(Loading);
 <van-loading text-color="#0094ff" />
 ```
 
+### 自定义图标
+
+通过 `icon` 插槽可以自定义加载图标。
+
+```html
+<van-loading vertical>
+  <template #icon>
+    <van-icon name="star-o" size="30" />
+  </template>
+  加载中...
+</van-loading>
+```
+
 ## API
 
 ### Props
@@ -91,9 +104,10 @@ app.use(Loading);
 
 ### Slots
 
-| 名称    | 说明     |
+| 名称    | 说明           |
-| ------- | -------- |
+| ------- | -------------- |
-| default | 加载文案 |
+| default | 加载文案       |
+| icon    | 自定义加载图标 |
 
 ### 类型定义
 

packages/vant/src/loading/demo/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VanIcon from '../../icon';
 import VanLoading from '..';
 import { useTranslate } from '../../../docs/site';
 
@@ -10,6 +11,7 @@ const t = useTranslate({
     color: '自定义颜色',
     vertical: '垂直排列',
     textColor: '自定义文本颜色',
+    customIcon: '自定义图标',
   },
   'en-US': {
     type: 'Type',
@@ -18,6 +20,7 @@ const t = useTranslate({
     color: 'Color',
     vertical: 'Vertical',
     textColor: 'Text Color',
+    customIcon: 'Custom Icon',
   },
 });
 </script>
@@ -58,6 +61,15 @@ const t = useTranslate({
       {{ t('loading') }}
     </van-loading>
   </demo-block>
+
+  <demo-block :title="t('customIcon')">
+    <van-loading vertical>
+      <template #icon>
+        <van-icon name="star-o" size="30" />
+      </template>
+      {{ t('loading') }}
+    </van-loading>
+  </demo-block>
 </template>
 
 <style lang="less">

packages/vant/src/loading/test/__snapshots__/demo.spec.ts.snap

@@ -257,4 +257,20 @@ exports[`should render demo and match snapshot 1`] = `
     </span>
   </div>
 </div>
+<div>
+  <div class="van-loading van-loading--circular van-loading--vertical"
+       aria-live="polite"
+       aria-busy="true"
+  >
+    <span class="van-loading__spinner van-loading__spinner--circular">
+      <i class="van-badge__wrapper van-icon van-icon-star-o"
+         style="font-size: 30px;"
+      >
+      </i>
+    </span>
+    <span class="van-loading__text">
+      Loading...
+    </span>
+  </div>
+</div>
 `;