From 8ca7a08b86b8cc185f936da2afcb0b191f672894 Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Mon, 20 Feb 2023 09:29:34 +0800
Subject: [PATCH] fix(comp:empty): resolve id conflicts in svg (#1451)

---
 .../__snapshots__/empty.spec.ts.snap          |  94 +++++++-------
 .../__snapshots__/empty.spec.ts.snap          |  94 +++++++-------
 packages/components/empty/src/Images.tsx      | 121 +++++++++++-------
 packages/components/empty/style/index.less    |   9 +-
 4 files changed, 170 insertions(+), 148 deletions(-)

diff --git a/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap b/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap
index c4a02b275..f28987673 100644
--- a/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap
+++ b/packages/components/_private/empty/__tests__/__snapshots__/empty.spec.ts.snap
@@ -4,135 +4,135 @@ exports[`Empty > render work 1`] = `
 "<div class=\\"ix-empty\\">
   <div class=\\"ix-empty-image\\"><svg width=\\"240\\" height=\\"150\\" viewBox=\\"0 0 240 150\\" xmlns=\\"http://www.w3.org/2000/svg\\">
       <defs>
-        <linearGradient id=\\"a\\" x1=\\"98.732%\\" x2=\\"1.144%\\" y1=\\"35.249%\\" y2=\\"64.751%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_a\\" x1=\\"98.732%\\" x2=\\"1.144%\\" y1=\\"35.249%\\" y2=\\"64.751%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"b\\" x1=\\"98.732%\\" x2=\\"-4.28%\\" y1=\\"29.211%\\" y2=\\"74.009%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_b\\" x1=\\"98.732%\\" x2=\\"-4.28%\\" y1=\\"29.211%\\" y2=\\"74.009%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"c\\" x1=\\"98.732%\\" x2=\\"1.773%\\" y1=\\"34.607%\\" y2=\\"65.393%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_c\\" x1=\\"98.732%\\" x2=\\"1.773%\\" y1=\\"34.607%\\" y2=\\"65.393%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"d\\" x1=\\"98.732%\\" x2=\\"-4.054%\\" y1=\\"31.668%\\" y2=\\"69.567%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_d\\" x1=\\"98.732%\\" x2=\\"-4.054%\\" y1=\\"31.668%\\" y2=\\"69.567%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"e\\" x1=\\"109.243%\\" x2=\\"2.442%\\" y1=\\"57.269%\\" y2=\\"42.07%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_e\\" x1=\\"109.243%\\" x2=\\"2.442%\\" y1=\\"57.269%\\" y2=\\"42.07%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"f\\" x1=\\"109.243%\\" x2=\\"16.437%\\" y1=\\"56.689%\\" y2=\\"45.02%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_f\\" x1=\\"109.243%\\" x2=\\"16.437%\\" y1=\\"56.689%\\" y2=\\"45.02%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"g\\" x1=\\"106.552%\\" x2=\\"-9.479%\\" y1=\\"57.117%\\" y2=\\"40.471%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_g\\" x1=\\"106.552%\\" x2=\\"-9.479%\\" y1=\\"57.117%\\" y2=\\"40.471%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"h\\" x1=\\"89.696%\\" x2=\\"2.512%\\" y1=\\"55.015%\\" y2=\\"41.695%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_h\\" x1=\\"89.696%\\" x2=\\"2.512%\\" y1=\\"55.015%\\" y2=\\"41.695%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"i\\" x1=\\"0%\\" x2=\\"89.377%\\" y1=\\"49.118%\\" y2=\\"50%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_i\\" x1=\\"0%\\" x2=\\"89.377%\\" y1=\\"49.118%\\" y2=\\"50%\\">
           <stop offset=\\"0%\\" stop-color=\\"#CDD2DA\\" stop-opacity=\\".531\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\" stop-opacity=\\".178\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"j\\" x1=\\"3.227%\\" x2=\\"87.16%\\" y1=\\"66.363%\\" y2=\\"73.709%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_j\\" x1=\\"3.227%\\" x2=\\"87.16%\\" y1=\\"66.363%\\" y2=\\"73.709%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"k\\" d=\\"M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z\\"></path>
-        <filter id=\\"l\\" width=\\"102.5%\\" height=\\"103.6%\\" x=\\"-1.2%\\" y=\\"-1.8%\\" filterUnits=\\"objectBoundingBox\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_k\\" d=\\"M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z\\"></path>
+        <filter id=\\"IDUX_EMPTY_DEFAULT_IMAGE_l\\" width=\\"102.5%\\" height=\\"103.6%\\" x=\\"-1.2%\\" y=\\"-1.8%\\" filterUnits=\\"objectBoundingBox\\">
           <feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
           <feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
           <feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
           <feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0\\"></feColorMatrix>
         </filter>
-        <linearGradient id=\\"m\\" x1=\\"31.515%\\" x2=\\"73.396%\\" y1=\\"0%\\" y2=\\"100%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_m\\" x1=\\"31.515%\\" x2=\\"73.396%\\" y1=\\"0%\\" y2=\\"100%\\">
           <stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"n\\" x1=\\"35.265%\\" x2=\\"64.735%\\" y1=\\"20.531%\\" y2=\\"71.964%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_n\\" x1=\\"35.265%\\" x2=\\"64.735%\\" y1=\\"20.531%\\" y2=\\"71.964%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"o\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\"></path>
-        <linearGradient id=\\"p\\" x1=\\"0%\\" y1=\\"45.743%\\" y2=\\"53.173%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_o\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_p\\" x1=\\"0%\\" y1=\\"45.743%\\" y2=\\"53.173%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"q\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
-        <linearGradient id=\\"r\\" x1=\\"13.714%\\" x2=\\"13.714%\\" y1=\\"13.836%\\" y2=\\"113.032%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_q\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_r\\" x1=\\"13.714%\\" x2=\\"13.714%\\" y1=\\"13.836%\\" y2=\\"113.032%\\">
           <stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
         </linearGradient>
-        <path id=\\"t\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
-        <linearGradient id=\\"u\\" x1=\\"50%\\" x2=\\"54.931%\\" y1=\\"42.206%\\" y2=\\"57.223%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_t\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_u\\" x1=\\"50%\\" x2=\\"54.931%\\" y1=\\"42.206%\\" y2=\\"57.223%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#FFF\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"w\\" x1=\\"2.15%\\" y1=\\"41.152%\\" y2=\\"53.34%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_w\\" x1=\\"2.15%\\" y1=\\"41.152%\\" y2=\\"53.34%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"y\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
-        <filter id=\\"x\\" width=\\"102.4%\\" height=\\"103.1%\\" x=\\"-1.2%\\" y=\\"-1.6%\\" filterUnits=\\"objectBoundingBox\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_y\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
+        <filter id=\\"IDUX_EMPTY_DEFAULT_IMAGE_x\\" width=\\"102.4%\\" height=\\"103.1%\\" x=\\"-1.2%\\" y=\\"-1.6%\\" filterUnits=\\"objectBoundingBox\\">
           <feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
           <feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
           <feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
           <feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.353775131 0\\"></feColorMatrix>
         </filter>
-        <linearGradient id=\\"z\\" x1=\\"0%\\" y1=\\"38.098%\\" y2=\\"58.871%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_z\\" x1=\\"0%\\" y1=\\"38.098%\\" y2=\\"58.871%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
       </defs>
       <g fill=\\"none\\" fill-rule=\\"evenodd\\">
         <g stroke-dasharray=\\"4,10\\" stroke-width=\\".8\\">
-          <path stroke=\\"url(#a)\\" d=\\"M.325 103.602L191.027.344\\"></path>
-          <path stroke=\\"url(#b)\\" d=\\"M117.37 139.398l125.286-80.541\\"></path>
-          <path stroke=\\"url(#c)\\" d=\\"M6.195 132.145L225.446 10.67\\"></path>
-          <path stroke=\\"url(#d)\\" d=\\"M76.264 130.444l149.182-90.173\\"></path>
-          <path stroke=\\"url(#e)\\" d=\\"M23.405 37.861l191.371 72.969-191.37-72.969z\\"></path>
-          <path stroke=\\"url(#f)\\" d=\\"M32.354 14.456L237.493 89.49 32.354 14.456z\\"></path>
-          <path stroke=\\"url(#g)\\" d=\\"M13.768 85.36l151.444 57.136L13.768 85.36z\\"></path>
-          <path stroke=\\"url(#h)\\" d=\\"M15.144 58.513l207.204 79.164L15.144 58.513z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_a)\\" d=\\"M.325 103.602L191.027.344\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_b)\\" d=\\"M117.37 139.398l125.286-80.541\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_c)\\" d=\\"M6.195 132.145L225.446 10.67\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_d)\\" d=\\"M76.264 130.444l149.182-90.173\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_e)\\" d=\\"M23.405 37.861l191.371 72.969-191.37-72.969z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_f)\\" d=\\"M32.354 14.456L237.493 89.49 32.354 14.456z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_g)\\" d=\\"M13.768 85.36l151.444 57.136L13.768 85.36z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_h)\\" d=\\"M15.144 58.513l207.204 79.164L15.144 58.513z\\"></path>
         </g>
-        <path fill=\\"url(#i)\\" fill-rule=\\"nonzero\\" d=\\"M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z\\" opacity=\\".424\\"></path>
-        <use fill=\\"url(#j)\\" xlink:href=\\"#k\\"></use>
-        <use fill=\\"#000\\" filter=\\"url(#l)\\" xlink:href=\\"#k\\"></use>
-        <path fill=\\"url(#m)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_i)\\" fill-rule=\\"nonzero\\" d=\\"M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z\\" opacity=\\".424\\"></path>
+        <use fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_j)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_k\\"></use>
+        <use fill=\\"#000\\" filter=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_l)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_k\\"></use>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_m)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z\\"></path>
         <path fill=\\"#BEC3CC\\" fill-rule=\\"nonzero\\" d=\\"M93.681 63.157l21.828 6.506c.608.181 1.025.74 1.025 1.375a.797.797 0 0 1-1.025.763L93.68 65.296a1.435 1.435 0 0 1-1.024-1.375.797.797 0 0 1 1.024-.764zM93.683 72.243l14.497 4.261a1.429 1.429 0 0 1 1.026 1.37.8.8 0 0 1-1.026.769L93.683 74.38a1.429 1.429 0 0 1-1.026-1.37.8.8 0 0 1 1.026-.768z\\" opacity=\\".65\\"></path>
-        <path fill=\\"url(#n)\\" fill-rule=\\"nonzero\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\" transform=\\"translate(124.517 45.88)\\"></path>
-        <path fill=\\"url(#p)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_n)\\" fill-rule=\\"nonzero\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\" transform=\\"translate(124.517 45.88)\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_p)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z\\"></path>
         <g transform=\\"translate(86.24 34.424)\\">
-          <mask id=\\"s\\" fill=\\"#fff\\">
-            <use xlink:href=\\"#q\\"></use>
+          <mask id=\\"IDUX_EMPTY_DEFAULT_IMAGE_s\\" fill=\\"#fff\\">
+            <use xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_q\\"></use>
           </mask>
-          <path fill=\\"url(#r)\\" fill-rule=\\"nonzero\\" d=\\"M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z\\" mask=\\"url(#s)\\"></path>
+          <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_r)\\" fill-rule=\\"nonzero\\" d=\\"M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z\\" mask=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_s)\\"></path>
         </g>
         <g transform=\\"translate(86.24 34.424)\\">
-          <mask id=\\"v\\" fill=\\"#fff\\">
-            <use xlink:href=\\"#t\\"></use>
+          <mask id=\\"IDUX_EMPTY_DEFAULT_IMAGE_v\\" fill=\\"#fff\\">
+            <use xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_t\\"></use>
           </mask>
-          <path stroke=\\"url(#u)\\" d=\\"M31.689.124l37.726 11.358L38.269 26.38.328 13.445z\\" mask=\\"url(#v)\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_u)\\" d=\\"M31.689.124l37.726 11.358L38.269 26.38.328 13.445z\\" mask=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_v)\\"></path>
         </g>
-        <path fill=\\"url(#w)\\" fill-rule=\\"nonzero\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_w)\\" fill-rule=\\"nonzero\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
         <g fill=\\"#000\\">
-          <use filter=\\"url(#x)\\" xlink:href=\\"#y\\"></use>
+          <use filter=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_x)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_y\\"></use>
         </g>
-        <path stroke=\\"url(#z)\\" stroke-dasharray=\\"2.406\\" stroke-width=\\".8\\" d=\\"M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93\\"></path>
+        <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_z)\\" stroke-dasharray=\\"2.406\\" stroke-width=\\".8\\" d=\\"M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93\\"></path>
       </g>
     </svg></div>
   <div class=\\"ix-empty-description\\">暂无数据</div>
diff --git a/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap b/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap
index 5d1b2e395..3ca4597a3 100644
--- a/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap
+++ b/packages/components/empty/__tests__/__snapshots__/empty.spec.ts.snap
@@ -4,135 +4,135 @@ exports[`Empty > render work 1`] = `
 "<div class=\\"ix-empty\\">
   <div class=\\"ix-empty-image\\"><svg width=\\"240\\" height=\\"150\\" viewBox=\\"0 0 240 150\\" xmlns=\\"http://www.w3.org/2000/svg\\">
       <defs>
-        <linearGradient id=\\"a\\" x1=\\"98.732%\\" x2=\\"1.144%\\" y1=\\"35.249%\\" y2=\\"64.751%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_a\\" x1=\\"98.732%\\" x2=\\"1.144%\\" y1=\\"35.249%\\" y2=\\"64.751%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"b\\" x1=\\"98.732%\\" x2=\\"-4.28%\\" y1=\\"29.211%\\" y2=\\"74.009%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_b\\" x1=\\"98.732%\\" x2=\\"-4.28%\\" y1=\\"29.211%\\" y2=\\"74.009%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"c\\" x1=\\"98.732%\\" x2=\\"1.773%\\" y1=\\"34.607%\\" y2=\\"65.393%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_c\\" x1=\\"98.732%\\" x2=\\"1.773%\\" y1=\\"34.607%\\" y2=\\"65.393%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"d\\" x1=\\"98.732%\\" x2=\\"-4.054%\\" y1=\\"31.668%\\" y2=\\"69.567%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_d\\" x1=\\"98.732%\\" x2=\\"-4.054%\\" y1=\\"31.668%\\" y2=\\"69.567%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"e\\" x1=\\"109.243%\\" x2=\\"2.442%\\" y1=\\"57.269%\\" y2=\\"42.07%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_e\\" x1=\\"109.243%\\" x2=\\"2.442%\\" y1=\\"57.269%\\" y2=\\"42.07%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"f\\" x1=\\"109.243%\\" x2=\\"16.437%\\" y1=\\"56.689%\\" y2=\\"45.02%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_f\\" x1=\\"109.243%\\" x2=\\"16.437%\\" y1=\\"56.689%\\" y2=\\"45.02%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"g\\" x1=\\"106.552%\\" x2=\\"-9.479%\\" y1=\\"57.117%\\" y2=\\"40.471%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_g\\" x1=\\"106.552%\\" x2=\\"-9.479%\\" y1=\\"57.117%\\" y2=\\"40.471%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"h\\" x1=\\"89.696%\\" x2=\\"2.512%\\" y1=\\"55.015%\\" y2=\\"41.695%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_h\\" x1=\\"89.696%\\" x2=\\"2.512%\\" y1=\\"55.015%\\" y2=\\"41.695%\\">
           <stop offset=\\"0%\\" stop-color=\\"#EBEDF1\\" stop-opacity=\\"0\\"></stop>
           <stop offset=\\"50.721%\\" stop-color=\\"#D3D7DE\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#D3D7DE\\" stop-opacity=\\"0\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"i\\" x1=\\"0%\\" x2=\\"89.377%\\" y1=\\"49.118%\\" y2=\\"50%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_i\\" x1=\\"0%\\" x2=\\"89.377%\\" y1=\\"49.118%\\" y2=\\"50%\\">
           <stop offset=\\"0%\\" stop-color=\\"#CDD2DA\\" stop-opacity=\\".531\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\" stop-opacity=\\".178\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"j\\" x1=\\"3.227%\\" x2=\\"87.16%\\" y1=\\"66.363%\\" y2=\\"73.709%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_j\\" x1=\\"3.227%\\" x2=\\"87.16%\\" y1=\\"66.363%\\" y2=\\"73.709%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"k\\" d=\\"M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z\\"></path>
-        <filter id=\\"l\\" width=\\"102.5%\\" height=\\"103.6%\\" x=\\"-1.2%\\" y=\\"-1.8%\\" filterUnits=\\"objectBoundingBox\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_k\\" d=\\"M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z\\"></path>
+        <filter id=\\"IDUX_EMPTY_DEFAULT_IMAGE_l\\" width=\\"102.5%\\" height=\\"103.6%\\" x=\\"-1.2%\\" y=\\"-1.8%\\" filterUnits=\\"objectBoundingBox\\">
           <feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
           <feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
           <feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
           <feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0\\"></feColorMatrix>
         </filter>
-        <linearGradient id=\\"m\\" x1=\\"31.515%\\" x2=\\"73.396%\\" y1=\\"0%\\" y2=\\"100%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_m\\" x1=\\"31.515%\\" x2=\\"73.396%\\" y1=\\"0%\\" y2=\\"100%\\">
           <stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"n\\" x1=\\"35.265%\\" x2=\\"64.735%\\" y1=\\"20.531%\\" y2=\\"71.964%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_n\\" x1=\\"35.265%\\" x2=\\"64.735%\\" y1=\\"20.531%\\" y2=\\"71.964%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"o\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\"></path>
-        <linearGradient id=\\"p\\" x1=\\"0%\\" y1=\\"45.743%\\" y2=\\"53.173%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_o\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_p\\" x1=\\"0%\\" y1=\\"45.743%\\" y2=\\"53.173%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"q\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
-        <linearGradient id=\\"r\\" x1=\\"13.714%\\" x2=\\"13.714%\\" y1=\\"13.836%\\" y2=\\"113.032%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_q\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_r\\" x1=\\"13.714%\\" x2=\\"13.714%\\" y1=\\"13.836%\\" y2=\\"113.032%\\">
           <stop offset=\\"0%\\" stop-color=\\"#F7F9FC\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#E1E5EB\\"></stop>
         </linearGradient>
-        <path id=\\"t\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
-        <linearGradient id=\\"u\\" x1=\\"50%\\" x2=\\"54.931%\\" y1=\\"42.206%\\" y2=\\"57.223%\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_t\\" d=\\"M0 13.457l38.276 13.049L69.74 11.457 31.682 0z\\"></path>
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_u\\" x1=\\"50%\\" x2=\\"54.931%\\" y1=\\"42.206%\\" y2=\\"57.223%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#FFF\\"></stop>
         </linearGradient>
-        <linearGradient id=\\"w\\" x1=\\"2.15%\\" y1=\\"41.152%\\" y2=\\"53.34%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_w\\" x1=\\"2.15%\\" y1=\\"41.152%\\" y2=\\"53.34%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
-        <path id=\\"y\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
-        <filter id=\\"x\\" width=\\"102.4%\\" height=\\"103.1%\\" x=\\"-1.2%\\" y=\\"-1.6%\\" filterUnits=\\"objectBoundingBox\\">
+        <path id=\\"IDUX_EMPTY_DEFAULT_IMAGE_y\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
+        <filter id=\\"IDUX_EMPTY_DEFAULT_IMAGE_x\\" width=\\"102.4%\\" height=\\"103.1%\\" x=\\"-1.2%\\" y=\\"-1.6%\\" filterUnits=\\"objectBoundingBox\\">
           <feGaussianBlur in=\\"SourceAlpha\\" result=\\"shadowBlurInner1\\" stdDeviation=\\".5\\"></feGaussianBlur>
           <feOffset in=\\"shadowBlurInner1\\" result=\\"shadowOffsetInner1\\"></feOffset>
           <feComposite in=\\"shadowOffsetInner1\\" in2=\\"SourceAlpha\\" k2=\\"-1\\" k3=\\"1\\" operator=\\"arithmetic\\" result=\\"shadowInnerInner1\\"></feComposite>
           <feColorMatrix in=\\"shadowInnerInner1\\" values=\\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.353775131 0\\"></feColorMatrix>
         </filter>
-        <linearGradient id=\\"z\\" x1=\\"0%\\" y1=\\"38.098%\\" y2=\\"58.871%\\">
+        <linearGradient id=\\"IDUX_EMPTY_DEFAULT_IMAGE_z\\" x1=\\"0%\\" y1=\\"38.098%\\" y2=\\"58.871%\\">
           <stop offset=\\"0%\\" stop-color=\\"#E1E5EB\\"></stop>
           <stop offset=\\"100%\\" stop-color=\\"#BEC3CC\\"></stop>
         </linearGradient>
       </defs>
       <g fill=\\"none\\" fill-rule=\\"evenodd\\">
         <g stroke-dasharray=\\"4,10\\" stroke-width=\\".8\\">
-          <path stroke=\\"url(#a)\\" d=\\"M.325 103.602L191.027.344\\"></path>
-          <path stroke=\\"url(#b)\\" d=\\"M117.37 139.398l125.286-80.541\\"></path>
-          <path stroke=\\"url(#c)\\" d=\\"M6.195 132.145L225.446 10.67\\"></path>
-          <path stroke=\\"url(#d)\\" d=\\"M76.264 130.444l149.182-90.173\\"></path>
-          <path stroke=\\"url(#e)\\" d=\\"M23.405 37.861l191.371 72.969-191.37-72.969z\\"></path>
-          <path stroke=\\"url(#f)\\" d=\\"M32.354 14.456L237.493 89.49 32.354 14.456z\\"></path>
-          <path stroke=\\"url(#g)\\" d=\\"M13.768 85.36l151.444 57.136L13.768 85.36z\\"></path>
-          <path stroke=\\"url(#h)\\" d=\\"M15.144 58.513l207.204 79.164L15.144 58.513z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_a)\\" d=\\"M.325 103.602L191.027.344\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_b)\\" d=\\"M117.37 139.398l125.286-80.541\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_c)\\" d=\\"M6.195 132.145L225.446 10.67\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_d)\\" d=\\"M76.264 130.444l149.182-90.173\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_e)\\" d=\\"M23.405 37.861l191.371 72.969-191.37-72.969z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_f)\\" d=\\"M32.354 14.456L237.493 89.49 32.354 14.456z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_g)\\" d=\\"M13.768 85.36l151.444 57.136L13.768 85.36z\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_h)\\" d=\\"M15.144 58.513l207.204 79.164L15.144 58.513z\\"></path>
         </g>
-        <path fill=\\"url(#i)\\" fill-rule=\\"nonzero\\" d=\\"M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z\\" opacity=\\".424\\"></path>
-        <use fill=\\"url(#j)\\" xlink:href=\\"#k\\"></use>
-        <use fill=\\"#000\\" filter=\\"url(#l)\\" xlink:href=\\"#k\\"></use>
-        <path fill=\\"url(#m)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_i)\\" fill-rule=\\"nonzero\\" d=\\"M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z\\" opacity=\\".424\\"></path>
+        <use fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_j)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_k\\"></use>
+        <use fill=\\"#000\\" filter=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_l)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_k\\"></use>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_m)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z\\"></path>
         <path fill=\\"#BEC3CC\\" fill-rule=\\"nonzero\\" d=\\"M93.681 63.157l21.828 6.506c.608.181 1.025.74 1.025 1.375a.797.797 0 0 1-1.025.763L93.68 65.296a1.435 1.435 0 0 1-1.024-1.375.797.797 0 0 1 1.024-.764zM93.683 72.243l14.497 4.261a1.429 1.429 0 0 1 1.026 1.37.8.8 0 0 1-1.026.769L93.683 74.38a1.429 1.429 0 0 1-1.026-1.37.8.8 0 0 1 1.026-.768z\\" opacity=\\".65\\"></path>
-        <path fill=\\"url(#n)\\" fill-rule=\\"nonzero\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\" transform=\\"translate(124.517 45.88)\\"></path>
-        <path fill=\\"url(#p)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_n)\\" fill-rule=\\"nonzero\\" d=\\"M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z\\" transform=\\"translate(124.517 45.88)\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_p)\\" fill-rule=\\"nonzero\\" d=\\"M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z\\"></path>
         <g transform=\\"translate(86.24 34.424)\\">
-          <mask id=\\"s\\" fill=\\"#fff\\">
-            <use xlink:href=\\"#q\\"></use>
+          <mask id=\\"IDUX_EMPTY_DEFAULT_IMAGE_s\\" fill=\\"#fff\\">
+            <use xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_q\\"></use>
           </mask>
-          <path fill=\\"url(#r)\\" fill-rule=\\"nonzero\\" d=\\"M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z\\" mask=\\"url(#s)\\"></path>
+          <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_r)\\" fill-rule=\\"nonzero\\" d=\\"M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z\\" mask=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_s)\\"></path>
         </g>
         <g transform=\\"translate(86.24 34.424)\\">
-          <mask id=\\"v\\" fill=\\"#fff\\">
-            <use xlink:href=\\"#t\\"></use>
+          <mask id=\\"IDUX_EMPTY_DEFAULT_IMAGE_v\\" fill=\\"#fff\\">
+            <use xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_t\\"></use>
           </mask>
-          <path stroke=\\"url(#u)\\" d=\\"M31.689.124l37.726 11.358L38.269 26.38.328 13.445z\\" mask=\\"url(#v)\\"></path>
+          <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_u)\\" d=\\"M31.689.124l37.726 11.358L38.269 26.38.328 13.445z\\" mask=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_v)\\"></path>
         </g>
-        <path fill=\\"url(#w)\\" fill-rule=\\"nonzero\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
+        <path fill=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_w)\\" fill-rule=\\"nonzero\\" d=\\"M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z\\"></path>
         <g fill=\\"#000\\">
-          <use filter=\\"url(#x)\\" xlink:href=\\"#y\\"></use>
+          <use filter=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_x)\\" xlink:href=\\"#IDUX_EMPTY_DEFAULT_IMAGE_y\\"></use>
         </g>
-        <path stroke=\\"url(#z)\\" stroke-dasharray=\\"2.406\\" stroke-width=\\".8\\" d=\\"M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93\\"></path>
+        <path stroke=\\"url(#IDUX_EMPTY_DEFAULT_IMAGE_z)\\" stroke-dasharray=\\"2.406\\" stroke-width=\\".8\\" d=\\"M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93\\"></path>
       </g>
     </svg></div>
   <div class=\\"ix-empty-description\\">暂无数据</div>
diff --git a/packages/components/empty/src/Images.tsx b/packages/components/empty/src/Images.tsx
index 8f656c5eb..e6a76ad59 100644
--- a/packages/components/empty/src/Images.tsx
+++ b/packages/components/empty/src/Images.tsx
@@ -32,59 +32,66 @@ export const EmptySimpleImage: FunctionalComponent = () => (
 export const EmptyDefaultImage: FunctionalComponent = () => (
   <svg width="240" height="150" viewBox="0 0 240 150" xmlns="http://www.w3.org/2000/svg">
     <defs>
-      <linearGradient id="a" x1="98.732%" x2="1.144%" y1="35.249%" y2="64.751%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_a" x1="98.732%" x2="1.144%" y1="35.249%" y2="64.751%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="b" x1="98.732%" x2="-4.28%" y1="29.211%" y2="74.009%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_b" x1="98.732%" x2="-4.28%" y1="29.211%" y2="74.009%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="c" x1="98.732%" x2="1.773%" y1="34.607%" y2="65.393%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_c" x1="98.732%" x2="1.773%" y1="34.607%" y2="65.393%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="d" x1="98.732%" x2="-4.054%" y1="31.668%" y2="69.567%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_d" x1="98.732%" x2="-4.054%" y1="31.668%" y2="69.567%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="e" x1="109.243%" x2="2.442%" y1="57.269%" y2="42.07%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_e" x1="109.243%" x2="2.442%" y1="57.269%" y2="42.07%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="f" x1="109.243%" x2="16.437%" y1="56.689%" y2="45.02%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_f" x1="109.243%" x2="16.437%" y1="56.689%" y2="45.02%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="g" x1="106.552%" x2="-9.479%" y1="57.117%" y2="40.471%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_g" x1="106.552%" x2="-9.479%" y1="57.117%" y2="40.471%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="h" x1="89.696%" x2="2.512%" y1="55.015%" y2="41.695%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_h" x1="89.696%" x2="2.512%" y1="55.015%" y2="41.695%">
         <stop offset="0%" stop-color="#EBEDF1" stop-opacity="0" />
         <stop offset="50.721%" stop-color="#D3D7DE" />
         <stop offset="100%" stop-color="#D3D7DE" stop-opacity="0" />
       </linearGradient>
-      <linearGradient id="i" x1="0%" x2="89.377%" y1="49.118%" y2="50%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_i" x1="0%" x2="89.377%" y1="49.118%" y2="50%">
         <stop offset="0%" stop-color="#CDD2DA" stop-opacity=".531" />
         <stop offset="100%" stop-color="#BEC3CC" stop-opacity=".178" />
       </linearGradient>
-      <linearGradient id="j" x1="3.227%" x2="87.16%" y1="66.363%" y2="73.709%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_j" x1="3.227%" x2="87.16%" y1="66.363%" y2="73.709%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#BEC3CC" />
       </linearGradient>
       <path
-        id="k"
+        id="IDUX_EMPTY_DEFAULT_IMAGE_k"
         d="M86.24 47.88L77.495 61.93a.234.234 0 0 0 .301.335l8.446-4.118v-9.73l31.681-13.992L86.241 47.88z"
       />
-      <filter id="l" width="102.5%" height="103.6%" x="-1.2%" y="-1.8%" filterUnits="objectBoundingBox">
+      <filter
+        id="IDUX_EMPTY_DEFAULT_IMAGE_l"
+        width="102.5%"
+        height="103.6%"
+        x="-1.2%"
+        y="-1.8%"
+        filterUnits="objectBoundingBox"
+      >
         <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5" />
         <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" />
         <feComposite
@@ -97,38 +104,45 @@ export const EmptyDefaultImage: FunctionalComponent = () => (
         />
         <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
       </filter>
-      <linearGradient id="m" x1="31.515%" x2="73.396%" y1="0%" y2="100%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_m" x1="31.515%" x2="73.396%" y1="0%" y2="100%">
         <stop offset="0%" stop-color="#F7F9FC" />
         <stop offset="100%" stop-color="#E1E5EB" />
       </linearGradient>
-      <linearGradient id="n" x1="35.265%" x2="64.735%" y1="20.531%" y2="71.964%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_n" x1="35.265%" x2="64.735%" y1="20.531%" y2="71.964%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#BEC3CC" />
       </linearGradient>
-      <path id="o" d="M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z" />
-      <linearGradient id="p" x1="0%" y1="45.743%" y2="53.173%">
+      <path id="IDUX_EMPTY_DEFAULT_IMAGE_o" d="M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z" />
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_p" x1="0%" y1="45.743%" y2="53.173%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#BEC3CC" />
       </linearGradient>
-      <path id="q" d="M0 13.457l38.276 13.049L69.74 11.457 31.682 0z" />
-      <linearGradient id="r" x1="13.714%" x2="13.714%" y1="13.836%" y2="113.032%">
+      <path id="IDUX_EMPTY_DEFAULT_IMAGE_q" d="M0 13.457l38.276 13.049L69.74 11.457 31.682 0z" />
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_r" x1="13.714%" x2="13.714%" y1="13.836%" y2="113.032%">
         <stop offset="0%" stop-color="#F7F9FC" />
         <stop offset="100%" stop-color="#E1E5EB" />
       </linearGradient>
-      <path id="t" d="M0 13.457l38.276 13.049L69.74 11.457 31.682 0z" />
-      <linearGradient id="u" x1="50%" x2="54.931%" y1="42.206%" y2="57.223%">
+      <path id="IDUX_EMPTY_DEFAULT_IMAGE_t" d="M0 13.457l38.276 13.049L69.74 11.457 31.682 0z" />
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_u" x1="50%" x2="54.931%" y1="42.206%" y2="57.223%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#FFF" />
       </linearGradient>
-      <linearGradient id="w" x1="2.15%" y1="41.152%" y2="53.34%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_w" x1="2.15%" y1="41.152%" y2="53.34%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#BEC3CC" />
       </linearGradient>
       <path
-        id="y"
+        id="IDUX_EMPTY_DEFAULT_IMAGE_y"
         d="M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z"
       />
-      <filter id="x" width="102.4%" height="103.1%" x="-1.2%" y="-1.6%" filterUnits="objectBoundingBox">
+      <filter
+        id="IDUX_EMPTY_DEFAULT_IMAGE_x"
+        width="102.4%"
+        height="103.1%"
+        x="-1.2%"
+        y="-1.6%"
+        filterUnits="objectBoundingBox"
+      >
         <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation=".5" />
         <feOffset in="shadowBlurInner1" result="shadowOffsetInner1" />
         <feComposite
@@ -141,32 +155,32 @@ export const EmptyDefaultImage: FunctionalComponent = () => (
         />
         <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.353775131 0" />
       </filter>
-      <linearGradient id="z" x1="0%" y1="38.098%" y2="58.871%">
+      <linearGradient id="IDUX_EMPTY_DEFAULT_IMAGE_z" x1="0%" y1="38.098%" y2="58.871%">
         <stop offset="0%" stop-color="#E1E5EB" />
         <stop offset="100%" stop-color="#BEC3CC" />
       </linearGradient>
     </defs>
     <g fill="none" fill-rule="evenodd">
       <g stroke-dasharray="4,10" stroke-width=".8">
-        <path stroke="url(#a)" d="M.325 103.602L191.027.344" />
-        <path stroke="url(#b)" d="M117.37 139.398l125.286-80.541" />
-        <path stroke="url(#c)" d="M6.195 132.145L225.446 10.67" />
-        <path stroke="url(#d)" d="M76.264 130.444l149.182-90.173" />
-        <path stroke="url(#e)" d="M23.405 37.861l191.371 72.969-191.37-72.969z" />
-        <path stroke="url(#f)" d="M32.354 14.456L237.493 89.49 32.354 14.456z" />
-        <path stroke="url(#g)" d="M13.768 85.36l151.444 57.136L13.768 85.36z" />
-        <path stroke="url(#h)" d="M15.144 58.513l207.204 79.164L15.144 58.513z" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_a)" d="M.325 103.602L191.027.344" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_b)" d="M117.37 139.398l125.286-80.541" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_c)" d="M6.195 132.145L225.446 10.67" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_d)" d="M76.264 130.444l149.182-90.173" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_e)" d="M23.405 37.861l191.371 72.969-191.37-72.969z" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_f)" d="M32.354 14.456L237.493 89.49 32.354 14.456z" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_g)" d="M13.768 85.36l151.444 57.136L13.768 85.36z" />
+        <path stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_h)" d="M15.144 58.513l207.204 79.164L15.144 58.513z" />
       </g>
       <path
-        fill="url(#i)"
+        fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_i)"
         fill-rule="nonzero"
         d="M124.157 103.884l31.966 11.166 40.333-25.333-40.477-14.692z"
         opacity=".424"
       />
-      <use fill="url(#j)" xlink:href="#k" />
-      <use fill="#000" filter="url(#l)" xlink:href="#k" />
+      <use fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_j)" xlink:href="#IDUX_EMPTY_DEFAULT_IMAGE_k" />
+      <use fill="#000" filter="url(#IDUX_EMPTY_DEFAULT_IMAGE_l)" xlink:href="#IDUX_EMPTY_DEFAULT_IMAGE_k" />
       <path
-        fill="url(#m)"
+        fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_m)"
         fill-rule="nonzero"
         d="M86.24 47.88l38.277 13.05v42.907L86.481 89.143a.376.376 0 0 1-.24-.35V47.88z"
       />
@@ -177,34 +191,47 @@ export const EmptyDefaultImage: FunctionalComponent = () => (
         opacity=".65"
       />
       <path
-        fill="url(#n)"
+        fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_n)"
         fill-rule="nonzero"
         d="M0 15.191L31.462 0v38.684a.376.376 0 0 1-.181.322L0 57.956V15.19z"
         transform="translate(124.517 45.88)"
       />
-      <path fill="url(#p)" fill-rule="nonzero" d="M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z" />
+      <path
+        fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_p)"
+        fill-rule="nonzero"
+        d="M86.24 47.88l38.277 13.05 31.462-15.05-38.057-11.456z"
+      />
       <g transform="translate(86.24 34.424)">
-        <mask id="s" fill="#fff">
-          <use xlink:href="#q" />
+        <mask id="IDUX_EMPTY_DEFAULT_IMAGE_s" fill="#fff">
+          <use xlink:href="#IDUX_EMPTY_DEFAULT_IMAGE_q" />
         </mask>
-        <path fill="url(#r)" fill-rule="nonzero" d="M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z" mask="url(#s)" />
+        <path
+          fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_r)"
+          fill-rule="nonzero"
+          d="M31.684-8.02L82.34-4.687V57.87l-50.655-1.334z"
+          mask="url(#IDUX_EMPTY_DEFAULT_IMAGE_s)"
+        />
       </g>
       <g transform="translate(86.24 34.424)">
-        <mask id="v" fill="#fff">
-          <use xlink:href="#t" />
+        <mask id="IDUX_EMPTY_DEFAULT_IMAGE_v" fill="#fff">
+          <use xlink:href="#IDUX_EMPTY_DEFAULT_IMAGE_t" />
         </mask>
-        <path stroke="url(#u)" d="M31.689.124l37.726 11.358L38.269 26.38.328 13.445z" mask="url(#v)" />
+        <path
+          stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_u)"
+          d="M31.689.124l37.726 11.358L38.269 26.38.328 13.445z"
+          mask="url(#IDUX_EMPTY_DEFAULT_IMAGE_v)"
+        />
       </g>
       <path
-        fill="url(#w)"
+        fill="url(#IDUX_EMPTY_DEFAULT_IMAGE_w)"
         fill-rule="nonzero"
         d="M124.517 60.93l-.05 1.737 7.545 14.903c.092.181.31.257.494.171l33.014-15.395a.376.376 0 0 0 .162-.536l-9.703-15.93-31.462 15.05z"
       />
       <g fill="#000">
-        <use filter="url(#x)" xlink:href="#y" />
+        <use filter="url(#IDUX_EMPTY_DEFAULT_IMAGE_x)" xlink:href="#IDUX_EMPTY_DEFAULT_IMAGE_y" />
       </g>
       <path
-        stroke="url(#z)"
+        stroke="url(#IDUX_EMPTY_DEFAULT_IMAGE_z)"
         stroke-dasharray="2.406"
         stroke-width=".8"
         d="M118.145 48c19.263-2.343 28.895-8.87 28.895-19.582 0-16.066-27.203-1.937-13.381 5.75 13.822 7.69 29.746-6.203 32.892-16.93"
diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less
index af10864c2..02d7f6a9d 100644
--- a/packages/components/empty/style/index.less
+++ b/packages/components/empty/style/index.less
@@ -6,19 +6,14 @@
 
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   color: @empty-color;
   margin: var(--ix-spacing-xl) var(--ix-spacing-lg);
 
   &-image {
-    height: 100%;
-
-    img {
-      height: 100%;
-    }
-
     svg {
-      height: 100%;
       margin: auto;
     }