diff --git a/src/_internal/icons/Cancel.tsx b/src/_internal/icons/Cancel.tsx
index f93c15c9fba..15b27a69c36 100644
--- a/src/_internal/icons/Cancel.tsx
+++ b/src/_internal/icons/Cancel.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'cancel',
+export default replaceable('cancel', () => (
-)
+))
diff --git a/src/_internal/icons/Clear.tsx b/src/_internal/icons/Clear.tsx
index b3b86232406..8e1e88897e6 100644
--- a/src/_internal/icons/Clear.tsx
+++ b/src/_internal/icons/Clear.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'clear',
+export default replaceable('clear', () => (
-)
+))
diff --git a/src/_internal/icons/Close.tsx b/src/_internal/icons/Close.tsx
index f1c418222cc..b605e01eabf 100644
--- a/src/_internal/icons/Close.tsx
+++ b/src/_internal/icons/Close.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'close',
+export default replaceable('close', () => (
-)
+))
diff --git a/src/_internal/icons/Date.tsx b/src/_internal/icons/Date.tsx
index 6f930cd15f8..a475960a962 100644
--- a/src/_internal/icons/Date.tsx
+++ b/src/_internal/icons/Date.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'date',
+export default replaceable('date', () => (
-)
+))
diff --git a/src/_internal/icons/Download.tsx b/src/_internal/icons/Download.tsx
index c2ba5f7c4e6..a1926ce6a75 100644
--- a/src/_internal/icons/Download.tsx
+++ b/src/_internal/icons/Download.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'download',
+export default replaceable('download', () => (
-)
+))
diff --git a/src/_internal/icons/Error.tsx b/src/_internal/icons/Error.tsx
index b3af34e1edd..390b44f65f6 100644
--- a/src/_internal/icons/Error.tsx
+++ b/src/_internal/icons/Error.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'error',
+export default replaceable('error', () => (
-)
+))
diff --git a/src/_internal/icons/Info.tsx b/src/_internal/icons/Info.tsx
index 42e098d79ac..104e82a3021 100644
--- a/src/_internal/icons/Info.tsx
+++ b/src/_internal/icons/Info.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'info',
+export default replaceable('info', () => (
-)
+))
diff --git a/src/_internal/icons/Retry.tsx b/src/_internal/icons/Retry.tsx
index f272847ecd8..7bc2e29faef 100644
--- a/src/_internal/icons/Retry.tsx
+++ b/src/_internal/icons/Retry.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'retry',
+export default replaceable('retry', () => (
-)
+))
diff --git a/src/_internal/icons/RotateClockwise.tsx b/src/_internal/icons/RotateClockwise.tsx
index 82d7decc12f..fcc1f83dbff 100644
--- a/src/_internal/icons/RotateClockwise.tsx
+++ b/src/_internal/icons/RotateClockwise.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'rotateClockwise',
+export default replaceable('rotateClockwise', () => (
-)
+))
diff --git a/src/_internal/icons/RotateCounterclockwise.tsx b/src/_internal/icons/RotateCounterclockwise.tsx
index 9bae8b0f904..68d44e60d3d 100644
--- a/src/_internal/icons/RotateCounterclockwise.tsx
+++ b/src/_internal/icons/RotateCounterclockwise.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'rotateClockwise',
+export default replaceable('rotateClockwise', () => (
-)
+))
diff --git a/src/_internal/icons/Success.tsx b/src/_internal/icons/Success.tsx
index 9798473af31..2a6da757d01 100644
--- a/src/_internal/icons/Success.tsx
+++ b/src/_internal/icons/Success.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'success',
+export default replaceable('success', () => (
-)
+))
diff --git a/src/_internal/icons/Time.tsx b/src/_internal/icons/Time.tsx
index e3f40debee4..1d4a91a05a6 100644
--- a/src/_internal/icons/Time.tsx
+++ b/src/_internal/icons/Time.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'time',
+export default replaceable('time', () => (
-)
+))
diff --git a/src/_internal/icons/To.tsx b/src/_internal/icons/To.tsx
index da531afcb78..06d9996581a 100644
--- a/src/_internal/icons/To.tsx
+++ b/src/_internal/icons/To.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'to',
+export default replaceable('to', () => (
-)
+))
diff --git a/src/_internal/icons/Trash.tsx b/src/_internal/icons/Trash.tsx
index 9a803494994..bf92702daf2 100644
--- a/src/_internal/icons/Trash.tsx
+++ b/src/_internal/icons/Trash.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'trash',
+export default replaceable('trash', () => (
-)
+))
diff --git a/src/_internal/icons/Warning.tsx b/src/_internal/icons/Warning.tsx
index 9579fc33503..e921cdaef1f 100644
--- a/src/_internal/icons/Warning.tsx
+++ b/src/_internal/icons/Warning.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'warning',
+export default replaceable('warning', () => (
-)
+))
diff --git a/src/_internal/icons/ZoomIn.tsx b/src/_internal/icons/ZoomIn.tsx
index 574003d0c46..02310e12aa7 100644
--- a/src/_internal/icons/ZoomIn.tsx
+++ b/src/_internal/icons/ZoomIn.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'zoomIn',
+export default replaceable('zoomIn', () => (
-)
+))
diff --git a/src/_internal/icons/ZoomOut.tsx b/src/_internal/icons/ZoomOut.tsx
index b56592b2279..14d1ccf21f7 100644
--- a/src/_internal/icons/ZoomOut.tsx
+++ b/src/_internal/icons/ZoomOut.tsx
@@ -1,8 +1,7 @@
import { h } from 'vue'
import { replaceable } from './replaceable'
-export default replaceable(
- 'zoomOut',
+export default replaceable('zoomOut', () => (
-)
+))
diff --git a/src/_internal/icons/replaceable.tsx b/src/_internal/icons/replaceable.tsx
index 377b3aa122d..7fdf7ce2fe2 100644
--- a/src/_internal/icons/replaceable.tsx
+++ b/src/_internal/icons/replaceable.tsx
@@ -1,9 +1,15 @@
+import type { VNode } from 'vue'
import type { GlobalIconConfig } from '../../config-provider/src/internal-interface'
import { upperFirst } from 'lodash-es'
-import { defineComponent, inject } from 'vue'
+import { defineComponent, h, inject } from 'vue'
import { configProviderInjectionKey } from '../../config-provider/src/context'
-export function replaceable(name: keyof GlobalIconConfig, icon: JSX.Element) {
+export function replaceable(name: keyof GlobalIconConfig, icon: () => VNode) {
+ const IconComponent = defineComponent({
+ render() {
+ return icon()
+ }
+ })
return defineComponent({
name: upperFirst(name),
setup() {
@@ -13,7 +19,7 @@ export function replaceable(name: keyof GlobalIconConfig, icon: JSX.Element) {
)?.mergedIconsRef
return () => {
const iconOverride = mergedIconsRef?.value?.[name]
- return iconOverride ? iconOverride() : icon
+ return iconOverride ? iconOverride() :