diff --git a/packages/vant/src/loading/Loading.tsx b/packages/vant/src/loading/Loading.tsx
index 42a900dfc..c1520ab02 100644
--- a/packages/vant/src/loading/Loading.tsx
+++ b/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 (
+
+ {slots.icon ? slots.icon() : DefaultIcon}
+
+ );
+ };
+
const renderText = () => {
if (slots.default) {
return (
@@ -67,9 +76,7 @@ export default defineComponent({
aria-live="polite"
aria-busy={true}
>
-
- {type === 'spinner' ? SpinIcon : CircularIcon}
-
+ {renderIcon()}
{renderText()}
);
diff --git a/packages/vant/src/loading/README.md b/packages/vant/src/loading/README.md
index f986c83f9..0c61a9a0d 100644
--- a/packages/vant/src/loading/README.md
+++ b/packages/vant/src/loading/README.md
@@ -66,6 +66,19 @@ use `color` or `text-color` to change text color.
```
+### Custom Icon
+
+Use `icon` slot to custom icon.
+
+```html
+
+
+
+
+ Loading...
+
+```
+
## API
### Props
@@ -81,9 +94,10 @@ use `color` or `text-color` to change text color.
### Slots
-| Name | Description |
-| ------- | ------------ |
-| default | Loading text |
+| Name | Description |
+| ------- | ------------------- |
+| default | Loading text |
+| icon | Custom loading icon |
### Types
diff --git a/packages/vant/src/loading/README.zh-CN.md b/packages/vant/src/loading/README.zh-CN.md
index 4ac7c86de..125b5fd29 100644
--- a/packages/vant/src/loading/README.zh-CN.md
+++ b/packages/vant/src/loading/README.zh-CN.md
@@ -76,6 +76,19 @@ app.use(Loading);
```
+### 自定义图标
+
+通过 `icon` 插槽可以自定义加载图标。
+
+```html
+
+
+
+
+ 加载中...
+
+```
+
## API
### Props
@@ -91,9 +104,10 @@ app.use(Loading);
### Slots
-| 名称 | 说明 |
-| ------- | -------- |
-| default | 加载文案 |
+| 名称 | 说明 |
+| ------- | -------------- |
+| default | 加载文案 |
+| icon | 自定义加载图标 |
### 类型定义
diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue
index 327cae667..6f4f2f613 100644
--- a/packages/vant/src/loading/demo/index.vue
+++ b/packages/vant/src/loading/demo/index.vue
@@ -1,4 +1,5 @@
@@ -58,6 +61,15 @@ const t = useTranslate({
{{ t('loading') }}
+
+
+
+
+
+
+ {{ t('loading') }}
+
+