Fix/legacy icon usage (#19446)

* fix: legacy icon usage in progress component demo

* fix: legacy icon usage in button test cases

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -43,7 +43,26 @@ exports[`Button renders Chinese characters correctly 2`] = `
   class="ant-btn"
   type="button"
 >
-  search
+  <span
+    aria-label="search"
+    class="anticon anticon-search"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="search"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+      />
+    </svg>
+  </span>
   <span>
     按钮
   </span>
@@ -86,7 +105,26 @@ exports[`Button renders Chinese characters correctly 4`] = `
   class="ant-btn"
   type="button"
 >
-  search
+  <span
+    aria-label="search"
+    class="anticon anticon-search"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="search"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+      />
+    </svg>
+  </span>
   <span>
     按钮
   </span>
@@ -166,17 +204,6 @@ exports[`Button renders Chinese characters correctly 7`] = `
 </button>
 `;
 
-exports[`Button renders Chinese characters correctly 7`] = `
-<button
-  class="ant-btn"
-  type="button"
->
-  <span>
-    按 钮
-  </span>
-</button>
-`;
-
 exports[`Button renders correctly 1`] = `
 <button
   class="ant-btn"

components/button/__tests__/index.test.js

@@ -27,7 +27,7 @@ describe('Button', () => {
     const wrapper = render(<Button>按钮</Button>);
     expect(wrapper).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper1 = render(<Button icon="search">按钮</Button>);
+    const wrapper1 = render(<Button icon={<Search />}>按钮</Button>);
     expect(wrapper1).toMatchSnapshot();
     // should not insert space when there is icon
     const wrapper2 = render(
@@ -38,11 +38,11 @@ describe('Button', () => {
     );
     expect(wrapper2).toMatchSnapshot();
     // should not insert space when there is icon
-    const wrapper3 = render(<Button icon="search">按钮</Button>);
+    const wrapper3 = render(<Button icon={<Search />}>按钮</Button>);
     expect(wrapper3).toMatchSnapshot();
     // should not insert space when there is icon while loading
     const wrapper4 = render(
-      <Button icon="search" loading>
+      <Button icon={<Search />} loading>
         按钮
       </Button>,
     );

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

@@ -218,13 +218,55 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
       class="ant-btn ant-btn-icon-only"
       type="button"
     >
-      minus
+      <span
+        aria-label="minus"
+        class="anticon anticon-minus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="minus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </span>
     </button>
     <button
       class="ant-btn ant-btn-icon-only"
       type="button"
     >
-      plus
+      <span
+        aria-label="plus"
+        class="anticon anticon-plus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="plus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <defs />
+          <path
+            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+          />
+          <path
+            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </div>
@@ -475,13 +517,55 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
       class="ant-btn ant-btn-icon-only"
       type="button"
     >
-      minus
+      <span
+        aria-label="minus"
+        class="anticon anticon-minus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="minus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </span>
     </button>
     <button
       class="ant-btn ant-btn-icon-only"
       type="button"
     >
-      plus
+      <span
+        aria-label="plus"
+        class="anticon anticon-plus"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="plus"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <defs />
+          <path
+            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+          />
+          <path
+            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </div>

components/progress/demo/circle-dynamic.md

@@ -15,6 +15,7 @@ A dynamic progress bar is better.
 
 ```jsx
 import { Progress, Button } from 'antd';
+import { Minus as IconMinus, Plus as IconPlus } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
@@ -44,8 +45,8 @@ class App extends React.Component {
       <div>
         <Progress type="circle" percent={this.state.percent} />
         <ButtonGroup>
-          <Button onClick={this.decline} icon="minus" />
+          <Button onClick={this.decline} icon={<IconMinus />} />
-          <Button onClick={this.increase} icon="plus" />
+          <Button onClick={this.increase} icon={<IconPlus />} />
         </ButtonGroup>
       </div>
     );

components/progress/demo/dynamic.md

@@ -15,6 +15,7 @@ A dynamic progress bar is better.
 
 ```jsx
 import { Progress, Button } from 'antd';
+import { Minus as IconMinus, Plus as IconPlus } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
@@ -44,8 +45,8 @@ class App extends React.Component {
       <div>
         <Progress percent={this.state.percent} />
         <ButtonGroup>
-          <Button onClick={this.decline} icon="minus" />
+          <Button onClick={this.decline} icon={<IconMinus />} />
-          <Button onClick={this.increase} icon="plus" />
+          <Button onClick={this.increase} icon={<IconPlus />} />
         </ButtonGroup>
       </div>
     );