fix: expand icon not fixed

Author: tangjinzhou

components/alert/__tests__/__snapshots__/demo.test.js.snap

@@ -94,7 +94,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-success" data-show="true">
+<div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
     <div class="ant-alert-description">
@@ -103,7 +103,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info" data-show="true">
+<div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
     <div class="ant-alert-description">
@@ -112,7 +112,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning" data-show="true">
+<div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
     <div class="ant-alert-description">
@@ -121,7 +121,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error" data-show="true">
+<div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
     <div class="ant-alert-description">
@@ -130,28 +130,28 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true">
+<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Success Tips</div>
     <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true">
+<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Informational Notes</div>
     <div class="ant-alert-description">Additional description and informations about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true">
+<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Warning</div>
     <div class="ant-alert-description">This is a warning notice about copywriting.</div>
   </div>
   <!---->
 </div>
-<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true">
+<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
   <div class="ant-alert-content">
     <div class="ant-alert-message">Error</div>
     <div class="ant-alert-description">This is an error message about copywriting.</div>

components/alert/index.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes } from 'vue';
-import { inject, cloneVNode, defineComponent, ref } from 'vue';
+import { inject, defineComponent, ref } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -15,6 +15,7 @@ import { getTransitionProps, Transition } from '../_util/transition';
 import { isValidElement, getPropsSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 import { tuple, withInstall } from '../_util/type';
+import { cloneElement } from '../_util/vnode';
 
 function noop() {}
 
@@ -139,7 +140,7 @@ const Alert = defineComponent({
 
       const iconNode = (icon &&
         (isValidElement(icon) ? (
-          cloneVNode(icon, {
+          cloneElement(icon, {
             class: `${prefixCls}-icon`,
           })
         ) : (

components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

@@ -21,13 +21,13 @@ exports[`Table.pagination renders pagination correctly 1`] = `
               <tbody class="ant-table-tbody">
                 <!---->
                 <tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Jack
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Lucy
                   </td>
                 </tr>

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -31,45 +31,45 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
               <tbody class="ant-table-tbody">
                 <!---->
                 <tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
+                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-selection-column" style="position: sticky; left: 0px;">
                     <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
                       <!---->
                     </label>
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Jack
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
+                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-selection-column" style="position: sticky; left: 0px;">
                     <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
                       <!---->
                     </label>
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Lucy
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
+                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-selection-column" style="position: sticky; left: 0px;">
                     <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
                       <!---->
                     </label>
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Tom
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="3" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
+                  <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-selection-column" style="position: sticky; left: 0px;">
                     <!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
                       <!---->
                     </label>
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Jerry
                   </td>
                 </tr>

components/table/__tests__/__snapshots__/Table.test.js.snap

@@ -24,21 +24,21 @@ exports[`Table align column should not override cell style 1`] = `
               <tbody class="ant-table-tbody">
                 <!---->
                 <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->
                     <!---->
                   </td>
-                  <td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append">
+                  <td style="color: red; text-align: center;" class="ant-table-cell">
                     <!---->32
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->
                     <!---->
                   </td>
-                  <td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append">
+                  <td style="color: red; text-align: center;" class="ant-table-cell">
                     <!---->42
                   </td>
                 </tr>
@@ -94,25 +94,25 @@ exports[`Table renders JSX correctly 1`] = `
               <tbody class="ant-table-tbody">
                 <!---->
                 <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->John
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Brown
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->32
                   </td>
                 </tr>
                 <!---->
                 <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Jim
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->Green
                   </td>
-                  <td class="ant-table-cell ant-table-cell-with-append">
+                  <td class="ant-table-cell">
                     <!---->42
                   </td>
                 </tr>