✅ resolve merge conflict

2024-12-02 12:09:14 +08:00 · 2020-01-03 12:09:35 +08:00 · 2020-01-03 12:09:35 +08:00 · 08f3643272
commit 08f3643272
parent 4df1cd3db2 9913f992b7
1110 changed files with 291275 additions and 302356 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@ -1,6 +1,8 @@
 const fs = require('fs');
 const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
 const packageInfo = require('./package.json');
+const darkVars = require('./scripts/dark-vars');

 // We need compile additional content for antd user
 function finalizeCompile() {
@ -57,6 +59,25 @@ function finalizeDist() {

    // eslint-disable-next-line
    console.log('Built a entry less file to dist/antd.less');
+
+    // Build less entry file: dist/antd.dark.less
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'antd.dark.less'),
+      '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
+    );
+
+    // eslint-disable-next-line
+    console.log('Built a entry less file to dist/antd.dark.less');
+
+    // Build dark.js: dist/dark-theme.js, for less-loader
+
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'dark-theme.js'),
+      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
+    );
+
+    // eslint-disable-next-line
+    console.log('Built a dark theme js file to dist/dark-theme.js');
  }
 }

--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -10,13 +10,6 @@ references:
    attach_workspace:
      at: ~/ant-design

-  install_react: &install_react
-    run: REACT=15 ./scripts/install-react.sh
-
-  react_15: &react_15
-    environment:
-      REACT: 15
-
  react_16: &react_16
    environment:
      REACT: 16
@ -51,21 +44,6 @@ references:
      - test_node:
          requires:
            - setup
-      - test_dist_15:
-          requires:
-            - dist
-      - test_lib_15:
-          requires:
-            - compile
-      - test_es_15:
-          requires:
-            - compile
-      - test_dom_15:
-          requires:
-            - setup
-      - test_node_15:
-          requires:
-            - setup
      - check_metadata:
          requires:
            - setup
@ -173,69 +151,6 @@ jobs:
      - *attach_workspace
      - run: npm run test-node -- -w 1

-  test_dist_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: dist
-            REACT: 15
-
-  test_lib_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: lib
-            REACT: 15
-
-  test_es_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            LIB_DIR: es
-            REACT: 15
-
-  test_dom_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm test -- -w 1 -u
-          environment:
-            REACT: 15
-
-  test_node_15:
-    <<: *container_config
-    <<: *react_15
-    steps:
-      - checkout
-      - *attach_workspace
-      - *install_react
-      - run:
-          command: npm run test-node -- -w 1 -u
-          environment:
-            REACT: 15
-
  check_metadata:
    <<: *container_config
    steps:
--- a/.depslintrc.js
+++ b/.depslintrc.js
@ -14,5 +14,9 @@ module.exports = {
      pattern: /ConfigConsumer.*renderEmpty/ms,
      module: '../empty',
    },
+    {
+      pattern: /config-provider\/context.*renderEmpty/ms,
+      module: '../empty',
+    },
  ],
 };
--- a/.eslintignore
+++ b/.eslintignore
@ -6,6 +6,7 @@ components/**/*.jsx
 # Docs templates
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
+site/theme/template/Home/**/*.jsx
 typings
 es/**/*
 lib/**/*
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -37,6 +37,7 @@ const eslintrc = {
    'react/forbid-prop-types': 0,
    'react/jsx-indent': 0,
    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
+    'import/extensions': 0,
    'import/no-extraneous-dependencies': [
      'error',
      {
@ -87,7 +88,6 @@ const eslintrc = {
    'react/static-property-placement': 0,
    'jest/no-test-callback': 0,
    'jest/expect-expect': 0,
-    'import/extensions': 0,
  },
  globals: {
    gtag: true,
--- a/.gitignore
+++ b/.gitignore
@ -38,8 +38,12 @@ components/**/*.jsx
 !components/**/__tests__/**/*.js
 !components/**/__tests__/**/*.js.snap
 /.history
+*.tmp
+
 # Docs templates
 site/theme/template/IconDisplay/*.js
 site/theme/template/IconDisplay/*.jsx
 site/theme/template/IconDisplay/fields.js
-*.tmp
+
+site/theme/template/Home/**/*.jsx
+
--- a/.npmignore
+++ b/.npmignore
@ -1 +1,2 @@
 ~*
+dist/report.html
--- a/.travis.yml
+++ b/.travis.yml
@ -13,19 +13,11 @@ matrix:
  fast_finish: true
  include:
    - env: TEST_TYPE=lint
-    - env: REACT=16 TEST_TYPE=test:dist
-    - env: REACT=16 TEST_TYPE=test:lib
-    - env: REACT=16 TEST_TYPE=test:es
-    - env: REACT=16 TEST_TYPE=test:dom
-    - env: REACT=16 TEST_TYPE=test:node
-    - env: REACT=15 TEST_TYPE=test:dist
-    - env: REACT=15 TEST_TYPE=test:lib
-    - env: REACT=15 TEST_TYPE=test:es
-    - env: REACT=15 TEST_TYPE=test:dom
-    - env: REACT=15 TEST_TYPE=test:node
-
-before_script:
-  - scripts/install-react.sh
+    - env: TEST_TYPE=test:dist
+    - env: TEST_TYPE=test:lib
+    - env: TEST_TYPE=test:es
+    - env: TEST_TYPE=test:dom
+    - env: TEST_TYPE=test:node

 script:
  - scripts/travis-script.sh
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -33,13 +33,13 @@

 ## 🖥 支持环境

- 现代浏览器和 IE9 及以上。
+- 现代浏览器和 IE11 及以上。
 - 支持服务端渲染。
 - [Electron](http://electron.atom.io/)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 安装

@ -53,7 +53,7 @@ yarn add antd

 ## 🔨 示例

-````jsx
+```jsx
 import { Button, DatePicker } from 'antd';

 const App = () => (
@ -62,12 +62,13 @@ const App = () => (
    <DatePicker />
  </>
 );
+```

 引入样式：

 ```jsx
 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
-````
+```

 你也可以使用 [babel-plugin-import](https://ant.design/docs/react/getting-started-cn#按需加载)。

--- a/README.md
+++ b/README.md
@ -39,7 +39,7 @@ English | [简体中文](./README-zh_CN.md)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 Install

--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@ -33,21 +33,6 @@ jobs:
        node-react@16:
          REACT: 16
          TEST_TYPE: test:node
-        dist-react@15:
-          REACT: 15
-          TEST_TYPE: test:dist
-        lib-react@15:
-          REACT: 15
-          TEST_TYPE: test:lib
-        es-react@15:
-          REACT: 15
-          TEST_TYPE: test:es
-        dom-react@15:
-          REACT: 15
-          TEST_TYPE: test:dom
-        node-react@15:
-          REACT: 15
-          TEST_TYPE: test:node
    steps:
      - checkout: self
        fetchDepth: 1
@ -57,8 +42,6 @@ jobs:
          versionSpec: '10.x'
      - script: npm install
        displayName: install
-      - script: scripts/install-react.sh
-        displayName: install-react
      - script: scripts/travis-script.sh
        displayName: test
      - task: PublishBuildArtifacts@1
--- a/components/tests/snapshots/index.test.js.snap
+++ b/components/tests/snapshots/index.test.js.snap
@ -27,12 +27,10 @@ Array [
  "Drawer",
  "Empty",
  "Form",
-  "Icon",
  "Input",
  "InputNumber",
  "Layout",
  "List",
-  "LocaleProvider",
  "message",
  "Menu",
  "Mentions",
@ -64,7 +62,6 @@ Array [
  "Timeline",
  "Tooltip",
  "Typography",
-  "Mention",
  "Upload",
  "version",
 ]
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@ -5,7 +5,6 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import delayRaf from '../raf';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
 import getDataOrAriaProps from '../getDataOrAriaProps';
-import triggerEvent from '../triggerEvent';
 import Wave from '../wave';
 import TransButton from '../transButton';
 import openAnimation from '../openAnimation';
@ -126,19 +125,6 @@ describe('Test utils function', () => {
    });
  });

-  it('triggerEvent', () => {
-    const button = document.createElement('button');
-    button.addEventListener(
-      'click',
-      () => {
-        button.style.width = '100px';
-      },
-      true,
-    );
-    triggerEvent(button, 'click');
-    expect(button.style.width).toBe('100px');
-  });
-
  describe('wave', () => {
    it('bindAnimationEvent should return when node is null', () => {
      const wrapper = mount(
@ -183,9 +169,6 @@ describe('Test utils function', () => {
    });

    it('should not throw when no children', () => {
-      if (process.env.REACT === '15') {
-        return;
-      }
      expect(() => mount(<Wave />)).not.toThrow();
    });
  });
--- a/components/_util/colors.ts
+++ b/components/_util/colors.ts
@ -1,5 +1,6 @@
 import { tuple } from './type';

+export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
 // eslint-disable-next-line import/prefer-default-export
 export const PresetColorTypes = tuple(
  'pink',
@ -18,3 +19,4 @@ export const PresetColorTypes = tuple(
 );

 export type PresetColorType = (typeof PresetColorTypes)[number];
+export type PresetStatusColorType = (typeof PresetStatusColorTypes)[number];
--- a/components/_util/responsiveObserve.ts
+++ b/components/_util/responsiveObserve.ts
@ -1,23 +1,3 @@
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire: any;
-
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
-
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type BreakpointMap = Partial<Record<Breakpoint, string>>;

@ -42,6 +22,7 @@ let subUid = -1;
 let screens = {};

 const responsiveObserve = {
+  matchHandlers: {},
  dispatch(pointMap: BreakpointMap) {
    screens = pointMap;
    if (subscribers.length < 1) {
@ -73,31 +54,32 @@ const responsiveObserve = {
    }
  },
  unregister() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.unregister(responsiveMap[screen]),
-    );
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
+      const matchMediaQuery = responsiveMap[screen]!;
+      const handler = this.matchHandlers[matchMediaQuery];
+      if (handler && handler.mql && handler.listener) {
+        handler.mql.removeListener(handler.listener);
+      }
+    });
  },
  register() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.register(responsiveMap[screen], {
-        match: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: true,
-          };
-          this.dispatch(pointMap);
-        },
-        unmatch: () => {
-          const pointMap = {
-            ...screens,
-            [screen]: false,
-          };
-          this.dispatch(pointMap);
-        },
-        // Keep a empty destory to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
+      const matchMediaQuery = responsiveMap[screen]!;
+      const listener = ({ matches }: { matches: boolean }) => {
+        this.dispatch({
+          ...screens,
+          [screen]: matches,
+        });
+      };
+      const mql = window.matchMedia(matchMediaQuery);
+      mql.addListener(listener);
+      this.matchHandlers[matchMediaQuery] = {
+        mql,
+        listener,
+      };
+
+      listener(mql);
+    });
  },
 };

--- a/components/_util/triggerEvent.tsx
+++ b/components/_util/triggerEvent.tsx
@ -1,8 +0,0 @@
-export default function triggerEvent(el: Element, type: string) {
-  if ('createEvent' in document) {
-    // modern browsers, IE9+
-    const e = document.createEvent('HTMLEvents');
-    e.initEvent(type, false, true);
-    el.dispatchEvent(e);
-  }
-}
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@ -4,6 +4,7 @@ import Affix from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
 import { spyElementPrototype } from '../../__tests__/util/domHook';
+import rtlTest from '../../../tests/shared/rtlTest';

 const events = {};

@ -40,6 +41,8 @@ class AffixMounter extends React.Component {
 }

 describe('Affix Render', () => {
+  rtlTest(Affix);
+
  let wrapper;
  let domMock;

--- a/components/affix/tests/snapshots/Affix.test.js.snap
+++ b/components/affix/tests/snapshots/Affix.test.js.snap
@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Affix Render rtl render component should be rendered correctly in RTL direction 1`] = `
+<div>
+  <div
+    class=""
+  />
+</div>
+`;
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@ -13,47 +13,31 @@ title:

 The simplest usage.

-```jsx
+```tsx
+import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';

-class Demo extends React.Component {
-  state = {
-    top: 10,
-    bottom: 10,
-  };
+const Demo: FC = () => {
+  const [top, setTop] = useState(10);
+  const [bottom, setBottom] = useState(10);

-  render() {
-    return (
-      <div>
-        <Affix offsetTop={this.state.top}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                top: this.state.top + 10,
-              });
-            }}
-          >
+  return (
+    <div>
+        <Affix offsetTop={top}>
+          <Button type="primary" onClick={() => setTop(top + 10)}>
            Affix top
          </Button>
        </Affix>
        <br />
-        <Affix offsetBottom={this.state.bottom}>
-          <Button
-            type="primary"
-            onClick={() => {
-              this.setState({
-                bottom: this.state.bottom + 10,
-              });
-            }}
-          >
+        <Affix offsetBottom={bottom}>
+          <Button type="primary" onClick={() =>setBottom(bottom + 10)}>
            Affix bottom
          </Button>
        </Affix>
      </div>
-    );
-  }
+  )
 }

+
 ReactDOM.render(<Demo />, mountNode);
 ```
--- a/components/affix/demo/debug.md
+++ b/components/affix/demo/debug.md
@ -1,8 +1,8 @@
 ---
 order: 99
 title:
-  zh-CN: 调试
-  en-US: Debug
+  zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
+  en-US:
 debug: true
 ---

@ -14,36 +14,28 @@ DEBUG

 DEBUG

-```jsx
+```tsx
+import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';

-class Demo extends React.Component {
-  state = {
-    top: 10,
-  };
-
-  render() {
-    return (
-      <div style={{ height: 10000 }}>
-        <div>Top</div>
-        <Affix offsetTop={this.state.top}>
-          <div style={{ background: 'red' }}>
-            <Button
-              type="primary"
-              onClick={() => {
-                this.setState({
-                  top: this.state.top + 10,
-                });
-              }}
-            >
-              Affix top
-            </Button>
-          </div>
-        </Affix>
-        <div>Bottom</div>
-      </div>
-    );
-  }
+const Demo: FC = () => {
+  const [top, setTop] = useState(10);
+  return (
+    <div style={{ height: 10000 }}>
+      <div>Top</div>
+      <Affix offsetTop={top}>
+        <div style={{ background: 'red' }}>
+          <Button
+            type="primary"
+            onClick={() => setTop(top + 10)}
+          >
+            Affix top
+          </Button>
+        </div>
+      </Affix>
+      <div>Bottom</div>
+    </div>
+  );
 }

 ReactDOM.render(<Demo />, mountNode);
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@ -13,27 +13,23 @@ title:

 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).

-```jsx
+```tsx
+import React, { useState, FC } from 'react';
 import { Affix, Button } from 'antd';

-class Demo extends React.Component {
-  render() {
-    return (
-      <div
-        className="scrollable-container"
-        ref={node => {
-          this.container = node;
-        }}
-      >
-        <div className="background">
-          <Affix target={() => this.container}>
-            <Button type="primary">Fixed at the top of container</Button>
-          </Affix>
-        </div>
+const Demo: FC = () => {
+  const [container, setContainer] = useState(null);
+  return (
+    <div className="scrollable-container" ref={setContainer}>
+      <div className="background">
+        <Affix target={() => container}>
+          <Button type="primary">Fixed at the top of container</Button>
+        </Affix>
      </div>
-    );
-  }
-}
+    </div>
+  )
+};
+

 ReactDOM.render(<Demo />, mountNode);
 ```
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -14,12 +14,12 @@ Please note that Affix should not cover other content on the page, especially wh

 ## API

-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |  |
-| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |  |
-| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |  |
-| onChange | Callback for when Affix state is changed | Function(affixed) | - |  |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
+| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
+| target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
+| onChange | Callback for when Affix state is changed | Function(affixed) | - |

 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:

--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@ -1,12 +1,10 @@
 import * as React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import ResizeObserver from 'rc-resize-observer';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';

-import warning from '../_util/warning';
 import {
  addObserveTarget,
  removeObserveTarget,
@ -25,7 +23,6 @@ export interface AffixProps {
   * 距离窗口顶部达到指定偏移量后触发
   */
  offsetTop?: number;
-  offset?: number;
  /** 距离窗口底部达到指定偏移量后触发 */
  offsetBottom?: number;
  style?: React.CSSProperties;
@ -119,17 +116,8 @@ class Affix extends React.Component<AffixProps, AffixState> {
  }

  getOffsetTop = () => {
-    const { offset, offsetBottom } = this.props;
+    const { offsetBottom } = this.props;
    let { offsetTop } = this.props;
-    if (typeof offsetTop === 'undefined') {
-      offsetTop = offset;
-      warning(
-        typeof offset === 'undefined',
-        'Affix',
-        '`offset` is deprecated. Please use `offsetTop` instead.',
-      );
-    }
-
    if (offsetBottom === undefined && offsetTop === undefined) {
      offsetTop = 0;
    }
@ -299,6 +287,4 @@ class Affix extends React.Component<AffixProps, AffixState> {
  }
 }

-polyfill(Affix);
-
 export default Affix;
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -15,12 +15,12 @@ title: Affix

 ## API

-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |  |
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |

 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

--- a/components/alert/ErrorBoundary.tsx
+++ b/components/alert/ErrorBoundary.tsx
@ -0,0 +1,43 @@
+import * as React from 'react';
+import Alert from '.';
+
+interface ErrorBoundaryProps {
+  message?: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+export default class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  {
+    error?: Error | null;
+    info: {
+      componentStack?: string;
+    };
+  }
+> {
+  state = {
+    error: undefined,
+    info: {
+      componentStack: '',
+    },
+  };
+
+  componentDidCatch(error: Error | null, info: object) {
+    this.setState({ error, info });
+  }
+
+  render() {
+    const { message, description, children } = this.props;
+    const { error, info } = this.state;
+    const componentStack = info && info.componentStack ? info.componentStack : null;
+    const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
+    const errorDescription = typeof description === 'undefined' ? componentStack : description;
+    if (error) {
+      // You can render any custom fallback UI
+      return (
+        <Alert type="error" message={errorMessage} description={<pre>{errorDescription}</pre>} />
+      );
+    }
+    return children;
+  }
+}
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@ -1,14 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-danger"
+  type="button"
+>
+  <span>
+    Click me to throw a error
+  </span>
+</button>
+`;
+
 exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-warning ant-alert-banner"
    data-show="true"
  >
-    <i
-      aria-label="icon: exclamation-circle"
+    <span
+      aria-label="exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -21,10 +33,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -39,9 +51,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
    class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable"
    data-show="true"
  >
-    <i
-      aria-label="icon: exclamation-circle"
+    <span
+      aria-label="exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -54,10 +67,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -71,9 +84,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
      tabindex="0"
      type="button"
    >
-      <i
-        aria-label="icon: close"
+      <span
+        aria-label="close"
        class="anticon anticon-close"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -86,10 +100,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
          />
        </svg>
-      </i>
+      </span>
    </button>
  </div>
  <br />
@ -111,9 +125,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
    class="ant-alert ant-alert-error ant-alert-banner"
    data-show="true"
  >
-    <i
-      aria-label="icon: close-circle"
+    <span
+      aria-label="close-circle"
      class="anticon anticon-close-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -126,10 +141,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -177,9 +192,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
      tabindex="0"
      type="button"
    >
-      <i
-        aria-label="icon: close"
+      <span
+        aria-label="close"
        class="anticon anticon-close"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -192,10 +208,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
          />
        </svg>
-      </i>
+      </span>
    </button>
  </div>
  <div
@ -217,9 +233,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
      tabindex="0"
      type="button"
    >
-      <i
-        aria-label="icon: close"
+      <span
+        aria-label="close"
        class="anticon anticon-close"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -232,10 +249,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
          />
        </svg>
-      </i>
+      </span>
    </button>
  </div>
 </div>
@ -287,9 +304,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-success"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -302,10 +320,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -319,9 +337,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-info"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -334,10 +353,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -351,9 +370,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-warning"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -366,10 +386,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -383,9 +403,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-error"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -398,10 +419,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -415,9 +436,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-success ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -430,10 +452,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -449,9 +471,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-info ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -464,10 +487,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -483,9 +506,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-warning ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -498,10 +522,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -517,9 +541,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    class="ant-alert ant-alert-error ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: smile"
+    <span
+      aria-label="smile"
      class="anticon anticon-smile ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -532,10 +557,10 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-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 0 1 248.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 0 1 249 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 0 1 775.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 0 1 775 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 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"
+          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"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -621,9 +646,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-success"
    data-show="true"
  >
-    <i
-      aria-label="icon: check-circle"
+    <span
+      aria-label="check-circle"
      class="anticon anticon-check-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -636,10 +662,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -653,9 +679,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-info"
    data-show="true"
  >
-    <i
-      aria-label="icon: info-circle"
+    <span
+      aria-label="info-circle"
      class="anticon anticon-info-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -668,10 +695,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -685,9 +712,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-warning"
    data-show="true"
  >
-    <i
-      aria-label="icon: exclamation-circle"
+    <span
+      aria-label="exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -700,10 +728,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -717,9 +745,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-error"
    data-show="true"
  >
-    <i
-      aria-label="icon: close-circle"
+    <span
+      aria-label="close-circle"
      class="anticon anticon-close-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -732,10 +761,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -749,9 +778,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-success ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: check-circle"
+    <span
+      aria-label="check-circle"
      class="anticon anticon-check-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -764,13 +794,13 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
+          d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"
        />
        <path
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -786,9 +816,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-info ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: info-circle"
+    <span
+      aria-label="info-circle"
      class="anticon anticon-info-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -804,10 +835,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
        />
        <path
-          d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -823,9 +854,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-warning ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: exclamation-circle"
+    <span
+      aria-label="exclamation-circle"
      class="anticon anticon-exclamation-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -841,10 +873,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
        />
        <path
-          d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
+          d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -860,9 +892,10 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    class="ant-alert ant-alert-error ant-alert-with-description"
    data-show="true"
  >
-    <i
-      aria-label="icon: close-circle"
+    <span
+      aria-label="close-circle"
      class="anticon anticon-close-circle ant-alert-icon"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -875,13 +908,13 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+          d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
        />
        <path
          d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
        />
      </svg>
-    </i>
+    </span>
    <span
      class="ant-alert-message"
    >
@ -915,9 +948,10 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
      tabindex="0"
      type="button"
    >
-      <i
-        aria-label="icon: close"
+      <span
+        aria-label="close"
        class="anticon anticon-close"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -930,10 +964,10 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
          />
        </svg>
-      </i>
+      </span>
    </button>
  </div>
  <p>
--- a/components/alert/tests/snapshots/index.test.js.snap
+++ b/components/alert/tests/snapshots/index.test.js.snap
@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert ErrorBoundary 1`] = `
+<div
+  class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
+  data-show="true"
+>
+  <span
+    class="ant-alert-message"
+  >
+    ReferenceError: NotExisted is not defined
+  </span>
+  <span
+    class="ant-alert-description"
+  >
+    <pre>
+          in ThrowError
+    in ErrorBoundary (created by WrapperComponent)
+    in WrapperComponent
+    </pre>
+  </span>
+</div>
+`;
+
+exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
+  data-show="true"
+>
+  <span
+    class="ant-alert-message"
+  />
+  <span
+    class="ant-alert-description"
+  />
+</div>
+`;
--- a/components/alert/tests/index.test.js
+++ b/components/alert/tests/index.test.js
@ -1,8 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Alert from '..';
+import rtlTest from '../../../tests/shared/rtlTest';
+
+const { ErrorBoundary } = Alert;

 describe('Alert', () => {
+  rtlTest(Alert);
+
  beforeAll(() => {
    jest.useFakeTimers();
  });
@ -50,18 +55,15 @@ describe('Alert', () => {
    });
  });

-  it('warning for props#iconType', () => {
-    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
-      <Alert
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
-        iconType="up"
-      />,
+  const testIt = process.env.REACT === '15' ? it.skip : it;
+  testIt('ErrorBoundary', () => {
+    const ThrowError = () => <NotExisted />; // eslint-disable-line
+    const wrapper = mount(
+      <ErrorBoundary>
+        <ThrowError />
+      </ErrorBoundary>,
    );
-    expect(warnSpy).toHaveBeenCalledWith(
-      'Warning: [antd: Alert] `iconType` is deprecated. Please use `icon` instead.',
-    );
-    warnSpy.mockRestore();
+    // eslint-disable-next-line jest/no-standalone-expect
+    expect(wrapper.render()).toMatchSnapshot();
  });
 });
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@ -20,7 +20,7 @@ ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
 ```

 <style>
-.ant-alert {
+.code-box-demo .ant-alert {
  margin-bottom: 16px;
 }
 </style>
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@ -15,9 +15,10 @@ title:
 A relevant icon makes information clearer and more friendly.

 ```jsx
-import { Alert, Icon } from 'antd';
+import { Alert } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';

-const icon = <Icon type="smile" />;
+const icon = <SmileOutlined />;

 ReactDOM.render(
  <div>
--- a/components/alert/demo/error-boundary.md
+++ b/components/alert/demo/error-boundary.md
@ -0,0 +1,51 @@
+---
+order: 8
+title:
+  zh-CN: ErrorBoundary
+  en-US: React 错误处理
+---
+
+## zh-CN
+
+友好的 [React 错误处理](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) 包裹组件。
+
+## en-US
+
+ErrorBoundary Component for making error handling easier in [React](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html).
+
+```jsx
+import { Button, Alert } from 'antd';
+
+const { ErrorBoundary } = Alert;
+
+class ThrowError extends React.Component {
+  state = {
+    error: null,
+  };
+
+  onClick = () => {
+    this.setState({
+      error: new Error('An Uncaught Error'),
+    });
+  };
+
+  render() {
+    const { error } = this.state;
+    if (error) {
+      throw error;
+    }
+    return (
+      <Button type="danger" onClick={this.onClick}>
+        Click me to throw a error
+      </Button>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ErrorBoundary>
+    <ThrowError />
+  </ErrorBoundary>,
+  mountNode,
+);
+```
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -13,15 +13,22 @@ Alert component for feedback.

 ## API

-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| afterClose | Called when close animation is finished | () => void | - | 3.3.1 |
-| banner | Whether to show as banner | boolean | false |  |
-| closable | Whether Alert can be closed | boolean | - |  |
-| closeText | Close text to show | string\|ReactNode | - |  |
-| description | Additional content of Alert | string\|ReactNode | - |  |
-| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - | 3.10.0 |
-| message | Content of Alert | string\|ReactNode | - |  |
-| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |  |
-| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |  |
-| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |  |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| afterClose | Called when close animation is finished | () => void | - |
+| banner | Whether to show as banner | boolean | false |
+| closable | Whether Alert can be closed | boolean | - |
+| closeText | Close text to show | string\|ReactNode | - |
+| description | Additional content of Alert | string\|ReactNode | - |
+| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - |
+| message | Content of Alert | string\|ReactNode | - |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
+| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
+
+### Alert.ErrorBoundary
+
+| Property    | Description                      | Type      | Default             | Version |
+| ----------- | -------------------------------- | --------- | ------------------- | ------- |
+| message     | custom error message to show     | ReactNode | `{{ error }}`       |         |
+| description | custom error description to show | ReactNode | `{{ error stack }}` |         |
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@ -1,11 +1,22 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import {
+  CloseOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  CloseCircleOutlined,
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+  InfoCircleFilled,
+  CloseCircleFilled,
+} from '@ant-design/icons';
 import Animate from 'rc-animate';
 import classNames from 'classnames';
-import Icon, { ThemeType } from '../icon';
+
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import getDataOrAriaProps from '../_util/getDataOrAriaProps';
-import warning from '../_util/warning';
+import ErrorBoundary from './ErrorBoundary';

 function noop() {}

@ -28,7 +39,6 @@ export interface AlertProps {
  afterClose?: () => void;
  /** Whether to show icon */
  showIcon?: boolean;
-  iconType?: string;
  style?: React.CSSProperties;
  prefixCls?: string;
  className?: string;
@ -41,21 +51,27 @@ export interface AlertState {
  closed: boolean;
 }

+const iconMapFilled = {
+  success: CheckCircleFilled,
+  info: InfoCircleFilled,
+  error: CloseCircleFilled,
+  warning: ExclamationCircleFilled,
+};
+
+const iconMapOutlined = {
+  success: CheckCircleOutlined,
+  info: InfoCircleOutlined,
+  error: CloseCircleOutlined,
+  warning: ExclamationCircleOutlined,
+};
+
 export default class Alert extends React.Component<AlertProps, AlertState> {
-  constructor(props: AlertProps) {
-    super(props);
+  static ErrorBoundary = ErrorBoundary;

-    warning(
-      !('iconType' in props),
-      'Alert',
-      '`iconType` is deprecated. Please use `icon` instead.',
-    );
-
-    this.state = {
-      closing: false,
-      closed: false,
-    };
-  }
+  state = {
+    closing: false,
+    closed: false,
+  };

  handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
@ -79,7 +95,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
    (this.props.afterClose || noop)();
  };

-  renderAlert = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderAlert = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
    const {
      description,
      prefixCls: customizePrefixCls,
@ -90,7 +106,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
      style,
      icon,
    } = this.props;
-    let { closable, type, showIcon, iconType } = this.props;
+    let { closable, type, showIcon } = this.props;
    const { closing, closed } = this.state;

    const prefixCls = getPrefixCls('alert', customizePrefixCls);
@ -100,30 +116,8 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
    // banner模式默认为警告
    type = banner && type === undefined ? 'warning' : type || 'info';

-    let iconTheme: ThemeType = 'filled';
-    if (!iconType) {
-      switch (type) {
-        case 'success':
-          iconType = 'check-circle';
-          break;
-        case 'info':
-          iconType = 'info-circle';
-          break;
-        case 'error':
-          iconType = 'close-circle';
-          break;
-        case 'warning':
-          iconType = 'exclamation-circle';
-          break;
-        default:
-          iconType = 'default';
-      }
-
-      // use outline icon in alert with description
-      if (description) {
-        iconTheme = 'outlined';
-      }
-    }
+    // use outline icon in alert with description
+    const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;

    // closeable when closeText is assigned
    if (closeText) {
@ -139,6 +133,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
        [`${prefixCls}-no-icon`]: !showIcon,
        [`${prefixCls}-banner`]: !!banner,
        [`${prefixCls}-closable`]: closable,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
      },
      className,
    );
@ -153,23 +148,25 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
        {closeText ? (
          <span className={`${prefixCls}-close-text`}>{closeText}</span>
        ) : (
-          <Icon type="close" />
+          <CloseOutlined />
        )}
      </button>
    ) : null;

    const dataOrAriaProps = getDataOrAriaProps(this.props);

-    const iconNode = (icon &&
-      (React.isValidElement<{ className?: string }>(icon) ? (
-        React.cloneElement(icon, {
-          className: classNames(`${prefixCls}-icon`, {
-            [icon.props.className as string]: icon.props.className,
-          }),
-        })
-      ) : (
-        <span className={`${prefixCls}-icon`}>{icon}</span>
-      ))) || <Icon className={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />;
+    const iconNode =
+      (icon &&
+        (React.isValidElement<{ className?: string }>(icon) ? (
+          React.cloneElement(icon, {
+            className: classNames(`${prefixCls}-icon`, {
+              [icon.props.className as string]: icon.props.className,
+            }),
+          })
+        ) : (
+          <span className={`${prefixCls}-icon`}>{icon}</span>
+        ))) ||
+      React.createElement(iconType, { className: `${prefixCls}-icon` });

    return closed ? null : (
      <Animate
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -14,15 +14,22 @@ title: Alert

 ## API

+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
+| banner | 是否用作顶部公告 | boolean | false |
+| closable | 默认不显示关闭按钮 | boolean | 无 |
+| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
+| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
+| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - |
+| message | 警告提示内容 | string\|ReactNode | 无 |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
+| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
+
+### Alert.ErrorBoundary
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | 3.3.1 |
-| banner | 是否用作顶部公告 | boolean | false |  |
-| closable | 默认不显示关闭按钮 | boolean | 无 |  |
-| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |  |
-| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |  |
-| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - | 3.10.0 |
-| message | 警告提示内容 | string\|ReactNode | 无 |  |
-| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |  |
-| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |  |
-| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |  |
+| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | `{{ error }}` |  |
+| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | `{{ error stack }}` |  |
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -3,11 +3,6 @@

@alert-prefix-cls: ~'@{ant-prefix}-alert';

-@alert-message-color: @heading-color;
-@alert-text-color: @text-color;
-@alert-close-color: @text-color-secondary;
-@alert-close-hover-color: @icon-color-hover;
-
 .@{alert-prefix-cls} {
  .reset-component;

@ -16,18 +11,33 @@
  word-wrap: break-word;
  border-radius: @border-radius-base;

+  &-rtl {
+    padding: 8px 37px 8px 15px;
+    direction: rtl;
+  }
+
  &&-no-icon {
    padding: 8px 15px;
  }

  &&-closable {
    padding-right: 30px;
+
+    .@{alert-prefix-cls}-rtl& {
+      padding-right: 15px;
+      padding-left: 30px;
+    }
  }

  &-icon {
    position: absolute;
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    left: 16px;
+
+    .@{alert-prefix-cls}-rtl & {
+      right: 16px;
+      left: auto;
+    }
  }

  &-description {
@ -63,9 +73,15 @@
  &-error {
    background-color: @alert-error-bg-color;
    border: @border-width-base @border-style-base @alert-error-border-color;
+
    .@{alert-prefix-cls}-icon {
      color: @alert-error-icon-color;
    }
+
+    .@{alert-prefix-cls}-description > pre {
+      margin: 0;
+      padding: 0;
+    }
  }

  &-close-icon {
@ -80,6 +96,11 @@
    outline: none;
    cursor: pointer;

+    .@{alert-prefix-cls}-rtl & {
+      right: auto;
+      left: 16px;
+    }
+
    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
      transition: color 0.3s;
@ -103,6 +124,10 @@
    color: @alert-text-color;
    line-height: @line-height-base;
    border-radius: @border-radius-base;
+
+    .@{alert-prefix-cls}-rtl& {
+      padding: 15px 64px 15px 15px;
+    }
  }

  &-with-description&-no-icon {
@ -114,6 +139,11 @@
    top: 16px;
    left: 24px;
    font-size: 24px;
+
+    .@{alert-prefix-cls}-rtl& {
+      right: 24px;
+      left: auto;
+    }
  }

  &-with-description &-close-icon {
@ -122,6 +152,11 @@
    right: 16px;
    font-size: @font-size-base;
    cursor: pointer;
+
+    .@{alert-prefix-cls}-rtl& {
+      right: auto;
+      left: 16px;
+    }
  }

  &-with-description &-message {
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import { AntAnchor } from './Anchor';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@ -83,6 +82,4 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
  }
 }

-polyfill(AnchorLink);
-
 export default AnchorLink;
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -19,14 +19,14 @@ For displaying anchor hyperlinks on page and jumping between them.
 | --- | --- | --- | --- | --- |
 | affix | Fixed mode of Anchor | boolean | true |  |
 | bounds | Bounding distance of anchor area | number | 5(px) |  |
-| getContainer | Scrolling container | () => HTMLElement | () => window | 3.4.0 |
+| getContainer | Scrolling container | () => HTMLElement | () => window |  |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |  |
-| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 |
-| getCurrentAnchor | Customize the anchor highlight | () => string | - | 3.22.0 |
-| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 |
-| onChange | Listening for anchor link change | (currentActiveLink: string) => void |  | 3.24.0 |
+| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - |  |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - |  |
+| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` |  |
+| onChange | Listening for anchor link change | (currentActiveLink: string) => void |  |  |

 ### Link Props

--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -20,14 +20,14 @@ title: Anchor
 | --- | --- | --- | --- | --- |
 | affix | 固定模式 | boolean | true |  |
 | bounds | 锚点区域边界 | number | 5(px) |  |
-| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | 3.4.0 |
+| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |  |
-| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 |
-| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 3.22.0 |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 |
-| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void |  | 3.24.0 |
+| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - |  |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` |  |
+| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void |  |  |

 ### Link Props

--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -13,7 +13,7 @@
    margin-left: -4px;
    padding-left: 4px;
    overflow: auto;
-    background-color: @component-background;
+    background-color: @anchor-bg;
  }

  &-ink {
--- a/components/auto-complete/InputElement.tsx
+++ b/components/auto-complete/InputElement.tsx
@ -1,25 +0,0 @@
-import * as React from 'react';
-
-export interface InputElementProps {
-  children: React.ReactElement<any>;
-}
-
-export default class InputElement extends React.Component<InputElementProps, any> {
-  saveRef = (ele: HTMLInputElement) => {
-    const { ref: childRef } = this.props.children as any;
-    if (typeof childRef === 'function') {
-      childRef(ele);
-    }
-  };
-
-  render() {
-    return React.cloneElement(
-      this.props.children,
-      {
-        ...this.props,
-        ref: this.saveRef,
-      },
-      null,
-    );
-  }
-}
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
--- a/components/auto-complete/tests/snapshots/index.test.js.snap
+++ b/components/auto-complete/tests/snapshots/index.test.js.snap
@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutoComplete with Custom Input Element Render rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-select ant-select-auto-complete ant-select-rtl ant-select-single ant-select-show-search"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-search"
+    >
+      <input
+        aria-activedescendant="undefined_list_0"
+        aria-autocomplete="list"
+        aria-controls="undefined_list"
+        aria-haspopup="listbox"
+        aria-owns="undefined_list"
+        autocomplete="off"
+        class="ant-select-selection-search-input"
+        role="combobox"
+        value=""
+      />
+    </span>
+    <span
+      class="ant-select-selection-placeholder"
+    />
+  </div>
+</div>
+`;
--- a/components/auto-complete/tests/focus.test.js
+++ b/components/auto-complete/tests/focus.test.js
@ -1,11 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import AutoComplete from '..';
-import focusTest from '../../../tests/shared/focusTest';
-
-describe('AutoComplete could be focus', () => {
-  focusTest(AutoComplete);
-});

 describe('AutoComplete children could be focus', () => {
  beforeAll(() => {
@ -67,7 +62,11 @@ describe('AutoComplete children could be focus', () => {
    let inputRef;
    mount(
      <AutoComplete dataSource={[]}>
-        <input ref={node => { inputRef = node; }} />
+        <input
+          ref={node => {
+            inputRef = node;
+          }}
+        />
      </AutoComplete>,
    );
    expect(typeof inputRef.focus).toBe('function');
--- a/components/auto-complete/tests/index.test.js
+++ b/components/auto-complete/tests/index.test.js
@ -2,9 +2,11 @@ import React from 'react';
 import { mount } from 'enzyme';
 import AutoComplete from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';

 describe('AutoComplete with Custom Input Element Render', () => {
  mountTest(AutoComplete);
+  rtlTest(AutoComplete);

  it('AutoComplete with custom Input render perfectly', () => {
    const wrapper = mount(
@ -15,34 +17,27 @@ describe('AutoComplete with Custom Input Element Render', () => {

    expect(wrapper.find('textarea').length).toBe(1);
    wrapper.find('textarea').simulate('change', { target: { value: '123' } });
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );

    // should not filter data source defaultly
-    expect(dropdownWrapper.find('MenuItem').length).toBe(3);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(3);
  });

  it('AutoComplete should work when dataSource is object array', () => {
    const wrapper = mount(
-      <AutoComplete dataSource={[{ text: 'text', value: 'value' }, { text: 'abc', value: 'xxx' }]}>
+      <AutoComplete
+        dataSource={[
+          { text: 'text', value: 'value' },
+          { text: 'abc', value: 'xxx' },
+        ]}
+      >
        <input />
      </AutoComplete>,
    );
    expect(wrapper.find('input').length).toBe(1);
    wrapper.find('input').simulate('change', { target: { value: 'a' } });
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );

    // should not filter data source defaultly
-    expect(dropdownWrapper.find('MenuItem').length).toBe(2);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(2);
  });

  it('AutoComplete throws error when contains invalid dataSource', () => {
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@ -7,28 +7,36 @@ title:

 ## zh-CN

-基本使用。通过 dataSource 设置自动完成的数据源
+基本使用。通过 options 设置自动完成的数据源

 ## en-US

-Basic Usage, set data source of autocomplete with `dataSource` property.
+Basic Usage, set data source of autocomplete with `options` property.

-```jsx
+```tsx
 import { AutoComplete } from 'antd';

 function onSelect(value) {
  console.log('onSelect', value);
 }

+function mockVal(str: string, repeat: number = 1) {
+  return {
+    value: str.repeat(repeat),
+  };
+}
+
 class Complete extends React.Component {
  state = {
    value: '',
-    dataSource: [],
+    options: [],
  };

  onSearch = searchText => {
    this.setState({
-      dataSource: !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)],
+      options: !searchText
+        ? []
+        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
    });
  };

@ -37,11 +45,12 @@ class Complete extends React.Component {
  };

  render() {
-    const { dataSource, value } = this.state;
+    const { options, value } = this.state;
+
    return (
      <div>
        <AutoComplete
-          dataSource={dataSource}
+          options={[]}
          style={{ width: 200 }}
          onSelect={onSelect}
          onSearch={this.onSearch}
@ -51,7 +60,7 @@ class Complete extends React.Component {
        <br />
        <AutoComplete
          value={value}
-          dataSource={dataSource}
+          options={options}
          style={{ width: 200 }}
          onSelect={onSelect}
          onSearch={this.onSearch}
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@ -11,52 +11,15 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.

-```jsx
-import { Icon, Input, AutoComplete } from 'antd';
+```tsx
+import { Input, AutoComplete } from 'antd';
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';

 const { Option, OptGroup } = AutoComplete;

-const dataSource = [
-  {
-    title: 'Libraries',
-    children: [
-      {
-        title: 'AntDesign',
-        count: 10000,
-      },
-      {
-        title: 'AntDesign UI',
-        count: 10600,
-      },
-    ],
-  },
-  {
-    title: 'Solutions',
-    children: [
-      {
-        title: 'AntDesign UI',
-        count: 60100,
-      },
-      {
-        title: 'AntDesign',
-        count: 30010,
-      },
-    ],
-  },
-  {
-    title: 'Articles',
-    children: [
-      {
-        title: 'AntDesign design language',
-        count: 100000,
-      },
-    ],
-  },
-];
-
-function renderTitle(title) {
+function renderTitle(title: string) {
  return (
    <span>
      {title}
@ -72,24 +35,34 @@ function renderTitle(title) {
  );
 }

-const options = dataSource
-  .map(group => (
-    <OptGroup key={group.title} label={renderTitle(group.title)}>
-      {group.children.map(opt => (
-        <Option key={opt.title} value={opt.title}>
-          {opt.title}
-          <span className="certain-search-item-count">{opt.count} people</span>
-        </Option>
-      ))}
-    </OptGroup>
-  ))
-  .concat([
-    <Option disabled key="all" className="show-all">
-      <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
-        View all results
-      </a>
-    </Option>,
-  ]);
+function renderItem(title: string, count: number) {
+  return {
+    value: title,
+    label: (
+      <>
+        {title}
+        <span className="certain-search-item-count">
+          <UserOutlined /> {count}
+        </span>
+      </>
+    ),
+  };
+}
+
+const options = [
+  {
+    label: renderTitle('Libraries'),
+    options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
+  },
+  {
+    label: renderTitle('Solutions'),
+    options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
+  },
+  {
+    label: renderTitle('Articles'),
+    options: [renderItem('AntDesign design language', 100000)],
+  },
+];

 function Complete() {
  return (
@ -97,15 +70,15 @@ function Complete() {
      <AutoComplete
        className="certain-category-search"
        dropdownClassName="certain-category-search-dropdown"
-        dropdownMatchSelectWidth={false}
-        dropdownStyle={{ width: 300 }}
-        size="large"
+        dropdownMatchSelectWidth={500}
        style={{ width: '100%' }}
-        dataSource={options}
-        placeholder="input here"
-        optionLabelProp="value"
+        options={options}
      >
-        <Input suffix={<Icon type="search" className="certain-category-icon" />} />
+        <Input
+          size="large"
+          suffix={<SearchOutlined className="certain-category-icon" />}
+          placeholder="input here"
+        />
      </AutoComplete>
    </div>
  );
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@ -24,12 +24,14 @@ function onSelect(value) {

 class Complete extends React.Component {
  state = {
-    dataSource: [],
+    options: [],
  };

  handleSearch = value => {
    this.setState({
-      dataSource: !value ? [] : [value, value + value, value + value + value],
+      options: !value
+        ? []
+        : [{ value }, { value: value + value }, { value: value + value + value }],
    });
  };

@ -38,10 +40,10 @@ class Complete extends React.Component {
  };

  render() {
-    const { dataSource } = this.state;
+    const { options } = this.state;
    return (
      <AutoComplete
-        dataSource={dataSource}
+        options={options}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={this.handleSearch}
--- a/components/auto-complete/demo/form-debug.md
+++ b/components/auto-complete/demo/form-debug.md
@ -0,0 +1,73 @@
+---
+order: 999
+title:
+  zh-CN: 在 Form 中 Debug
+  en-US: Debug in Form
+debug: true
+---
+
+```jsx
+import { Input, AutoComplete, Form, TreeSelect, Button } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+ReactDOM.render(
+  <Form style={{ margin: '0 auto' }}>
+    <Form.Item label="单独 AutoComplete" {...formItemLayout}>
+      <AutoComplete />
+    </Form.Item>
+    <Form.Item label="单独 TreeSelect" {...formItemLayout}>
+      <TreeSelect />
+    </Form.Item>
+    <Form.Item label="添加 Input.Group 正常" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete />
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="包含 search 图标正常" {...formItemLayout}>
+      <AutoComplete>
+        <Input suffix={<SearchOutlined />} />
+      </AutoComplete>
+    </Form.Item>
+    <Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete>
+          <Input suffix={<SearchOutlined />} />
+        </AutoComplete>
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="同时有 Input.Group 和 Search 组件发生移位" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete>
+          <Input.Search />
+        </AutoComplete>
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="Input Group 和 Button 结合" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '20%' }} />
+        <AutoComplete>
+          <Input.Search />
+        </AutoComplete>
+        <Button type="primary" icon={<SearchOutlined />}>
+          Search
+        </Button>
+      </Input.Group>
+    </Form.Item>
+  </Form>,
+  mountNode,
+);
+```
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@ -16,16 +16,20 @@ A non-case-sensitive AutoComplete
 ```jsx
 import { AutoComplete } from 'antd';

-const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
+const options = [
+  { value: 'Burns Bay Road' },
+  { value: 'Downing Street' },
+  { value: 'Wall Street' },
+];

 function Complete() {
  return (
    <AutoComplete
      style={{ width: 200 }}
-      dataSource={dataSource}
+      options={options}
      placeholder="try to type `b`"
      filterOption={(inputValue, option) =>
-        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+        option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
      }
    />
  );
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@ -7,11 +7,11 @@ title:

 ## zh-CN

-也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
+也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。

 ## en-US

-You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
+You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。

 ```jsx
 import { AutoComplete } from 'antd';
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@ -11,12 +11,11 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).

 ```jsx
-import { Icon, Button, Input, AutoComplete } from 'antd';
-
-const { Option } = AutoComplete;
+import { Button, Input, AutoComplete } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';

 function onSelect(value) {
  console.log('onSelect', value);
@ -30,57 +29,50 @@ function searchResult(query) {
  return new Array(getRandomInt(5))
    .join('.')
    .split('.')
-    .map((item, idx) => ({
-      query,
-      category: `${query}${idx}`,
-      count: getRandomInt(200, 100),
-    }));
-}
-
-function renderOption(item) {
-  return (
-    <Option key={item.category} text={item.category}>
-      <div className="global-search-item">
-        <span className="global-search-item-desc">
-          Found {item.query} on
-          <a
-            href={`https://s.taobao.com/search?q=${item.query}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {item.category}
-          </a>
-        </span>
-        <span className="global-search-item-count">{item.count} results</span>
-      </div>
-    </Option>
-  );
+    .map((item, idx) => {
+      const category = `${query}${idx}`;
+      return {
+        value: category,
+        label: (
+          <div className="global-search-item">
+            <span className="global-search-item-desc">
+              Found {query} on{' '}
+              <a
+                href={`https://s.taobao.com/search?q=${query}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {category}
+              </a>
+            </span>
+            <span className="global-search-item-count">{getRandomInt(200, 100)} results</span>
+          </div>
+        ),
+      };
+    });
 }

 class Complete extends React.Component {
  state = {
-    dataSource: [],
+    options: [],
  };

  handleSearch = value => {
    this.setState({
-      dataSource: value ? searchResult(value) : [],
+      options: value ? searchResult(value) : [],
    });
  };

  render() {
-    const { dataSource } = this.state;
+    const { options } = this.state;
    return (
      <div className="global-search-wrapper" style={{ width: 300 }}>
        <AutoComplete
          className="global-search"
-          size="large"
          style={{ width: '100%' }}
-          dataSource={dataSource.map(renderOption)}
+          options={options}
          onSelect={onSelect}
          onSearch={this.handleSearch}
-          placeholder="input here"
-          optionLabelProp="text"
        >
          <Input
            suffix={
@ -90,9 +82,11 @@ class Complete extends React.Component {
                size="large"
                type="primary"
              >
-                <Icon type="search" />
+                <SearchOutlined />
              </Button>
            }
+            size="large"
+            placeholder="input here"
          />
        </AutoComplete>
      </div>
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -13,11 +13,6 @@ When there is a need for autocomplete functionality.

 ## API

-```jsx
-const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />;
-```
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
@ -25,8 +20,6 @@ const dataSource = ['12345', '23456', '34567'];
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
 | children (for customize input element) | customize input element | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` |  |
 | children (for dataSource) | Data source to auto complete | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - |  |
-| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | - |  |
-| dropdownMenuStyle | additional style applied to dropdown menu | object |  |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultValue | Initial selected option. | string\|string\[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
@ -34,14 +27,14 @@ const dataSource = ['12345', '23456', '34567'];
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |  |
 | placeholder | placeholder of input | string | - |  |
 | value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |  |
-| onBlur | Called when leaving the component. | function() | - | 3.6.5 |
+| onBlur | Called when leaving the component. | function() | - |  |
 | onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |  |
-| onFocus | Called when entering the component | function() | - | 3.6.5 |
+| onFocus | Called when entering the component | function() | - |  |
 | onSearch | Called when searching items. | function(value) | - |  |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |  |
-| defaultOpen | Initial open state of dropdown | boolean | - | 3.9.3 |
-| open | Controlled open state of dropdown | boolean | - | 3.9.3 |
-| onDropdownVisibleChange | Call when dropdown open | function(open) | - | 3.9.3 |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
+| open | Controlled open state of dropdown | boolean | - |  |
+| onDropdownVisibleChange | Call when dropdown open | function(open) | - |  |

 ## Methods

--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@ -1,160 +1,136 @@
+/**
+ * TODO: 4.0
+ * - remove `dataSource`
+ * - `size` not work with customizeInput
+ * - customizeInput not feedback `ENTER` key since accessibility enhancement
+ */
+
 import * as React from 'react';
-import { Option, OptGroup } from 'rc-select';
+import toArray from 'rc-util/lib/Children/toArray';
+import { SelectProps as RcSelectProps } from 'rc-select';
 import classNames from 'classnames';
-import InputElement from './InputElement';
-import Input, { InputProps } from '../input';
-import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
+import omit from 'omit.js';
+import Select, { InternalSelectProps, OptionType } from '../select';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { Omit } from '../_util/type';
+import warning from '../_util/warning';
+
+const { Option } = Select;
+
+const InternalSelect = Select as React.ComponentClass<RcSelectProps>;

 export interface DataSourceItemObject {
  value: string;
  text: string;
 }
-export type DataSourceItemType =
-  | string
-  | DataSourceItemObject
-  | React.ReactElement<OptionProps>
-  | React.ReactElement<OptGroupProps>;
+export type DataSourceItemType = string | DataSourceItemObject;

-export interface AutoCompleteInputProps {
-  onChange?: React.FormEventHandler<any>;
-  value: any;
-}
-
-export type ValidInputElement =
-  | HTMLInputElement
-  | HTMLTextAreaElement
-  | React.ReactElement<AutoCompleteInputProps>;
-
-export interface AutoCompleteProps extends Omit<AbstractSelectProps, 'loading'> {
-  value?: SelectValue;
-  defaultValue?: SelectValue;
+export interface AutoCompleteProps
+  extends Omit<InternalSelectProps<string>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp'> {
  dataSource?: DataSourceItemType[];
-  dropdownMenuStyle?: React.CSSProperties;
-  autoFocus?: boolean;
-  backfill?: boolean;
-  optionLabelProp?: string;
-  onChange?: (value: SelectValue) => void;
-  onSelect?: (value: SelectValue, option: Object) => any;
-  onBlur?: (value: SelectValue) => void;
-  onFocus?: () => void;
-  children?:
-    | ValidInputElement
-    | React.ReactElement<InputProps>
-    | React.ReactElement<OptionProps>
-    | Array<React.ReactElement<OptionProps>>;
 }

 function isSelectOptionOrSelectOptGroup(child: any): Boolean {
  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
 }

-export default class AutoComplete extends React.Component<AutoCompleteProps, {}> {
-  static Option = Option as React.ClassicComponentClass<OptionProps>;
+const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (props, ref) => {
+  const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
+  const childNodes: React.ReactElement[] = toArray(children);

-  static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
+  const selectRef = React.useRef<Select>();

-  static defaultProps = {
-    transitionName: 'slide-up',
-    optionLabelProp: 'children',
-    choiceTransitionName: 'zoom',
-    showSearch: false,
-    filterOption: false,
-  };
+  React.useImperativeHandle<Select, Select>(ref, () => selectRef.current!);

-  private select: any;
+  // ============================= Input =============================
+  let customizeInput: React.ReactElement;

-  saveSelect = (node: any) => {
-    this.select = node;
-  };
-
-  getInputElement = () => {
-    const { children } = this.props;
-    const element =
-      children && React.isValidElement(children) && children.type !== Option ? (
-        React.Children.only(this.props.children)
-      ) : (
-        <Input />
-      );
-    const elementProps = { ...(element as React.ReactElement<any>).props };
-    // https://github.com/ant-design/ant-design/pull/7742
-    delete elementProps.children;
-    return <InputElement {...elementProps}>{element}</InputElement>;
-  };
-
-  focus() {
-    this.select.focus();
+  if (
+    childNodes.length === 1 &&
+    React.isValidElement(childNodes[0]) &&
+    !isSelectOptionOrSelectOptGroup(childNodes[0])
+  ) {
+    customizeInput = childNodes[0];
  }

-  blur() {
-    this.select.blur();
+  const getInputElement = (): React.ReactElement => customizeInput;
+
+  // ============================ Options ============================
+  let optionChildren: React.ReactNode;
+
+  // [Legacy] convert `children` or `dataSource` into option children
+  if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    optionChildren = children;
+  } else {
+    optionChildren = dataSource
+      ? dataSource.map(item => {
+          if (React.isValidElement(item)) {
+            return item;
+          }
+          switch (typeof item) {
+            case 'string':
+              return (
+                <Option key={item} value={item}>
+                  {item}
+                </Option>
+              );
+            case 'object': {
+              const { value: optionValue } = item as DataSourceItemObject;
+              return (
+                <Option key={optionValue} value={optionValue}>
+                  {(item as DataSourceItemObject).text}
+                </Option>
+              );
+            }
+            default:
+              throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+          }
+        })
+      : [];
  }

-  renderAutoComplete = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      size,
-      className = '',
-      notFoundContent,
-      optionLabelProp,
-      dataSource,
-      children,
-    } = this.props;
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-
-    const cls = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-      [className]: !!className,
-      [`${prefixCls}-show-search`]: true,
-      [`${prefixCls}-auto-complete`]: true,
-    });
-
-    let options;
-    const childArray = React.Children.toArray(children);
-    if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
-      options = children;
-    } else {
-      options = dataSource
-        ? dataSource.map(item => {
-            if (React.isValidElement(item)) {
-              return item;
-            }
-            switch (typeof item) {
-              case 'string':
-                return <Option key={item}>{item}</Option>;
-              case 'object':
-                return (
-                  <Option key={(item as DataSourceItemObject).value}>
-                    {(item as DataSourceItemObject).text}
-                  </Option>
-                );
-              default:
-                throw new Error(
-                  'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
-                );
-            }
-          })
-        : [];
-    }
-
-    return (
-      <Select
-        {...this.props}
-        className={cls}
-        mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}
-        optionLabelProp={optionLabelProp}
-        getInputElement={this.getInputElement}
-        notFoundContent={notFoundContent}
-        ref={this.saveSelect}
-      >
-        {options}
-      </Select>
+  // ============================ Warning ============================
+  React.useEffect(() => {
+    warning(
+      !('dataSource' in props),
+      'AutoComplete',
+      '`dataSource` is deprecated, please use `options` instead.',
    );
-  };

-  render() {
-    return <ConfigConsumer>{this.renderAutoComplete}</ConfigConsumer>;
-  }
-}
+    warning(
+      !customizeInput || !('size' in props),
+      'AutoComplete',
+      'You need to control style self instead of setting `size` when using customize input.',
+    );
+  }, []);
+
+  return (
+    <ConfigConsumer>
+      {({ getPrefixCls }: ConfigConsumerProps) => {
+        const prefixCls = getPrefixCls('select', customizePrefixCls);
+
+        return (
+          <InternalSelect
+            ref={selectRef as any}
+            {...omit(props, ['dataSource'])}
+            prefixCls={prefixCls}
+            className={classNames(className, `${prefixCls}-auto-complete`)}
+            mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
+            getInputElement={getInputElement}
+          >
+            {optionChildren}
+          </InternalSelect>
+        );
+      }}
+    </ConfigConsumer>
+  );
+};
+
+const RefAutoComplete = React.forwardRef<Select, AutoCompleteProps>(AutoComplete);
+
+type RefAutoComplete = typeof RefAutoComplete & {
+  Option: OptionType;
+};
+
+(RefAutoComplete as RefAutoComplete).Option = Option;
+
+export default RefAutoComplete as RefAutoComplete;
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -14,11 +14,6 @@ title: AutoComplete

 ## API

-```jsx
-const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />;
-```
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
@ -26,24 +21,22 @@ const dataSource = ['12345', '23456', '34567'];
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
 | children (自定义输入框) | 自定义输入框 | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` |  |
 | children (自动完成的数据源) | 自动完成的数据源 | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - |  |
-| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] |  |  |
-| dropdownMenuStyle | dropdown 菜单自定义样式 | object |  |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |  |
 | disabled | 是否禁用 | boolean | false |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
-| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | 3.19.4 |
+| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body |  |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |  |
 | placeholder | 输入框提示 | string | - |  |
 | value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |  |
-| onBlur | 失去焦点时的回调 | function() | - | 3.6.5 |
+| onBlur | 失去焦点时的回调 | function() | - |  |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |  |
-| onFocus | 获得焦点时的回调 | function() | - | 3.6.5 |
+| onFocus | 获得焦点时的回调 | function() | - |  |
 | onSearch | 搜索补全项的时候调用 | function(value) | 无 |  |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |  |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - | 3.9.3 |
-| open | 是否展开下拉菜单 | boolean | - | 3.9.3 |
-| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | 3.9.3 |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
+| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |  |

 ## 方法

--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@ -8,85 +8,4 @@

 .@{autocomplete-prefix-cls} {
  .reset-component;
-
-  &.@{select-prefix-cls} {
-    .@{select-prefix-cls} {
-      &-selection {
-        border: 0;
-        box-shadow: none;
-        &__rendered {
-          height: 100%;
-          margin-right: 0;
-          margin-left: 0;
-          line-height: @input-height-base;
-        }
-        &__placeholder {
-          margin-right: (@input-padding-horizontal-base + 1px);
-          margin-left: (@input-padding-horizontal-base + 1px);
-        }
-
-        &--single {
-          height: auto;
-        }
-      }
-    }
-
-    // Fix https://github.com/ant-design/ant-design/issues/7800
-    .@{select-prefix-cls}-search--inline {
-      position: static;
-      float: left;
-    }
-
-    &-allow-clear {
-      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
-        margin-right: 0 !important;
-      }
-    }
-
-    .@{input-prefix-cls} {
-      height: @input-height-base;
-      line-height: @line-height-base;
-      background: transparent;
-      border-width: @border-width-base;
-      &:focus,
-      &:hover {
-        .hover;
-      }
-      &[disabled] {
-        .disabled;
-
-        background-color: transparent;
-      }
-    }
-
-    &-lg {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-lg;
-      }
-      .@{input-prefix-cls} {
-        height: @input-height-lg;
-        padding-top: @input-padding-vertical-lg;
-        padding-bottom: @input-padding-vertical-lg;
-      }
-    }
-
-    &-sm {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-sm;
-      }
-      .@{input-prefix-cls} {
-        height: @input-height-sm;
-        padding-top: @input-padding-vertical-sm;
-        padding-bottom: @input-padding-vertical-sm;
-      }
-    }
-  }
-}
-
-// https://github.com/ant-design/ant-design/issues/14156
-.@{input-prefix-cls}-group > .@{autocomplete-prefix-cls} {
-  .@{select-prefix-cls}-search__field.@{input-prefix-cls}-affix-wrapper {
-    display: inline;
-    float: none;
-  }
 }
--- a/components/auto-complete/style/index.tsx
+++ b/components/auto-complete/style/index.tsx
@ -3,4 +3,3 @@ import './index.less';

 // style dependencies
 import '../../select/style';
-import '../../input/style';
--- a/components/avatar/tests/Avatar.test.js
+++ b/components/avatar/tests/Avatar.test.js
@ -2,9 +2,11 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';

 describe('Avatar Render', () => {
  mountTest(Avatar);
+  rtlTest(Avatar);

  let originOffsetWidth;
  beforeAll(() => {
@ -133,4 +135,15 @@ describe('Avatar Render', () => {
    wrapper.setProps({ children: 'xx' });
    expect(wrapper.state().scale).toBe(0.32);
  });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Avatar size={64} icon="aa" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    mount(<Avatar size={64} icon="user" />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Avatar] \`icon\` is using ReactNode instead of string naming in v4. Please check \`user\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });
--- a/components/avatar/tests/snapshots/Avatar.test.js.snap
+++ b/components/avatar/tests/snapshots/Avatar.test.js.snap
@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar Render rtl render component should be rendered correctly in RTL direction 1`] = `
+<span
+  class="ant-avatar ant-avatar-circle"
+>
+  <span
+    class="ant-avatar-string"
+    style="opacity:0"
+  />
+</span>
+`;
--- a/components/avatar/tests/snapshots/demo.test.js.snap
+++ b/components/avatar/tests/snapshots/demo.test.js.snap
@ -3,7 +3,7 @@
 exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
 <div>
  <span
-    style="margin-right:24px"
+    class="avatar-item"
  >
    <span
      class="ant-badge"
@ -11,9 +11,10 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
      <span
        class="ant-avatar ant-avatar-square ant-avatar-icon"
      >
-        <i
-          aria-label="icon: user"
+        <span
+          aria-label="user"
          class="anticon anticon-user"
+          role="img"
        >
          <svg
            aria-hidden="true"
@ -26,10 +27,10 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
            width="1em"
          >
            <path
-              d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
            />
          </svg>
-        </i>
+        </span>
      </span>
      <sup
        class="ant-scroll-number ant-badge-count"
@ -201,9 +202,10 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
      <span
        class="ant-avatar ant-avatar-square ant-avatar-icon"
      >
-        <i
-          aria-label="icon: user"
+        <span
+          aria-label="user"
          class="anticon anticon-user"
+          role="img"
        >
          <svg
            aria-hidden="true"
@ -216,10 +218,10 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
            width="1em"
          >
            <path
-              d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
            />
          </svg>
-        </i>
+        </span>
      </span>
      <sup
        class="ant-scroll-number ant-badge-dot"
@ -237,9 +239,10 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
      style="width:64px;height:64px;line-height:64px;font-size:32px"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -252,17 +255,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -275,17 +279,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -298,17 +303,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -321,10 +327,10 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
  </div>
  <div>
@ -332,9 +338,10 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
      class="ant-avatar ant-avatar-square ant-avatar-icon"
      style="width:64px;height:64px;line-height:64px;font-size:32px"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -347,17 +354,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -370,17 +378,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-square ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -393,17 +402,18 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -416,10 +426,10 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
    </span>
  </div>
 </div>
@ -532,9 +542,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
  <span
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
  >
-    <i
-      aria-label="icon: user"
+    <span
+      aria-label="user"
      class="anticon anticon-user"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -547,33 +558,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
        />
      </svg>
-    </i>
-  </span>
-  <span
-    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-  >
-    <i
-      aria-label="icon: user"
-      class="anticon anticon-user"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="user"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-        />
-      </svg>
-    </i>
+    </span>
  </span>
  <span
    class="ant-avatar ant-avatar-circle"
@ -617,9 +605,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
    style="background-color:#87d068"
  >
-    <i
-      aria-label="icon: user"
+    <span
+      aria-label="user"
      class="anticon anticon-user"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -632,10 +621,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
        />
      </svg>
-    </i>
+    </span>
  </span>
 </div>
 `;
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@ -15,20 +15,33 @@ Usually used for reminders and notifications.

 ```jsx
 import { Avatar, Badge } from 'antd';
+import { UserOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
-    <span style={{ marginRight: 24 }}>
+    <span className="avatar-item">
      <Badge count={1}>
-        <Avatar shape="square" icon="user" />
+        <Avatar shape="square" icon={<UserOutlined />} />
      </Badge>
    </span>
    <span>
      <Badge dot>
-        <Avatar shape="square" icon="user" />
+        <Avatar shape="square" icon={<UserOutlined />} />
      </Badge>
    </span>
  </div>,
  mountNode,
 );
 ```
+
+```css
+/* tile uploaded pictures */
+.avatar-item {
+  margin-right: 24px;
+}
+
+[class*='-col-rtl'] .avatar-item {
+  margin-right: 0;
+  margin-left: 24px;
+}
+```
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@ -15,20 +15,21 @@ Three sizes and two shapes are available.

 ```jsx
 import { Avatar } from 'antd';
+import { UserOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
    <div>
-      <Avatar size={64} icon="user" />
-      <Avatar size="large" icon="user" />
-      <Avatar icon="user" />
-      <Avatar size="small" icon="user" />
+      <Avatar size={64} icon={<UserOutlined />} />
+      <Avatar size="large" icon={<UserOutlined />} />
+      <Avatar icon={<UserOutlined />} />
+      <Avatar size="small" icon={<UserOutlined />} />
    </div>
    <div>
-      <Avatar shape="square" size={64} icon="user" />
-      <Avatar shape="square" size="large" icon="user" />
-      <Avatar shape="square" icon="user" />
-      <Avatar shape="square" size="small" icon="user" />
+      <Avatar shape="square" size={64} icon={<UserOutlined />} />
+      <Avatar shape="square" size="large" icon={<UserOutlined />} />
+      <Avatar shape="square" icon={<UserOutlined />} />
+      <Avatar shape="square" size="small" icon={<UserOutlined />} />
    </div>
  </div>,
  mountNode,
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@ -14,17 +14,17 @@ title:
 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

 ```jsx
-import { Avatar, Icon } from 'antd';
+import { Avatar } from 'antd';
+import { UserOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
-    <Avatar icon="user" />
-    <Avatar icon={<Icon type="user" />} />
+    <Avatar icon={<UserOutlined />} />
    <Avatar>U</Avatar>
    <Avatar>USER</Avatar>
    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
-    <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
+    <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
  </div>,
  mountNode,
 );
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -10,10 +10,10 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| icon | the `Icon` type for an icon avatar, see `Icon` Component or use ReactNode | string \| ReactNode | - |  |
+| icon | custom icon type for an icon avatar | ReactNode | - |  |
 | shape | the shape of avatar | `circle` \| `square` | `circle` |  |
 | size | the size of the avatar | number \| string: `large` `small` `default` | `default` |  |
 | src | the address of the image for an image avatar | string | - |  |
-| srcSet | a list of sources to use for different screen resolutions | string | - | 3.11.0 |
-| alt | This attribute defines the alternative text describing the image | string | - | 3.7.0 |
-| onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - | 3.8.0 |
+| srcSet | a list of sources to use for different screen resolutions | string | - |  |
+| alt | This attribute defines the alternative text describing the image | string | - |  |
+| onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import Icon from '../icon';
+
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import warning from '../_util/warning';

 export interface AvatarProps {
  /** Shape of avatar, options:`circle`, `square` */
@ -15,8 +16,8 @@ export interface AvatarProps {
  src?: string;
  /** Srcset of image avatar */
  srcSet?: string;
-  /** Type of the Icon to be used in avatar */
-  icon?: string | React.ReactNode;
+  /** icon to be used in avatar */
+  icon?: React.ReactNode;
  style?: React.CSSProperties;
  prefixCls?: string;
  className?: string;
@ -108,6 +109,12 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
      ...others
    } = this.props;

+    warning(
+      !(typeof icon === 'string' && icon.length > 2),
+      'Avatar',
+      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+    );
+
    const { isImgExist, scale, mounted } = this.state;

    const prefixCls = getPrefixCls('avatar', customizePrefixCls);
@ -137,11 +144,7 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
    if (src && isImgExist) {
      children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />;
    } else if (icon) {
-      if (typeof icon === 'string') {
-        children = <Icon type={icon} />;
-      } else {
-        children = icon;
-      }
+      children = icon;
    } else {
      const childrenNode = this.avatarChildren;
      if (childrenNode || scale !== 1) {
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -15,10 +15,10 @@ title: Avatar

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 ReactNode | string \| ReactNode | - |  |
+| icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |  |
 | size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` |  |
 | src | 图片类头像的资源地址 | string | - |  |
-| srcSet | 设置图片类头像响应式资源地址 | string | - | 3.11.0 |
-| alt | 图像无法显示时的替代文本 | string | - | 3.7.0 |
-| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | 3.8.0 |
+| srcSet | 设置图片类头像响应式资源地址 | string | - |  |
+| alt | 图像无法显示时的替代文本 | string | - |  |
+| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
--- a/components/back-top/tests/snapshots/demo.test.js.snap
+++ b/components/back-top/tests/snapshots/demo.test.js.snap
@ -4,7 +4,7 @@ exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
 <div>
  Scroll down to see the bottom-right
  <strong
-    style="color:rgba(64, 64, 64, 0.6)"
+    class="site-back-top-basic"
  >
     gray 
  </strong>
--- a/components/back-top/tests/snapshots/index.test.js.snap
+++ b/components/back-top/tests/snapshots/index.test.js.snap
@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BackTop rtl render component should be rendered correctly in RTL direction 1`] = `null`;
--- a/components/back-top/tests/index.test.js
+++ b/components/back-top/tests/index.test.js
@ -2,10 +2,12 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { sleep } from '../../../tests/utils';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
 import BackTop from '..';

 describe('BackTop', () => {
  mountTest(BackTop);
+  rtlTest(BackTop);

  it('should scroll to top after click it', async () => {
    const wrapper = mount(<BackTop visibilityHeight={-1} />);
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@ -20,9 +20,21 @@ ReactDOM.render(
  <div>
    <BackTop />
    Scroll down to see the bottom-right
-    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
+    <strong className="site-back-top-basic"> gray </strong>
    button.
  </div>,
  mountNode,
 );
 ```
+
+```css
+.site-back-top-basic {
+  color: rgba(64, 64, 64, 0.6);
+}
+```
+
+<style>
+[data-theme="dark"] .site-back-top-basic {
+  color: rgba(255,255,255,.45);
+}
+</style>
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@ -65,10 +65,12 @@ export default class BackTop extends React.Component<BackTopProps, any> {
    });
  };

-  renderBackTop = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderBackTop = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
    const { prefixCls: customizePrefixCls, className = '', children } = this.props;
    const prefixCls = getPrefixCls('back-top', customizePrefixCls);
-    const classString = classNames(prefixCls, className);
+    const classString = classNames(prefixCls, className, {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });

    const defaultElement = (
      <div className={`${prefixCls}-content`}>
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@ -14,6 +14,11 @@
  height: 40px;
  cursor: pointer;

+  &-rtl {
+    right: auto;
+    left: 100px;
+  }
+
  &-content {
    width: 40px;
    height: 40px;
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@ -1,7 +1,6 @@
 import * as React from 'react';
 import omit from 'omit.js';
 import classNames from 'classnames';
-import { polyfill } from 'react-lifecycles-compat';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

 function getNumberArray(num: string | number | undefined | null) {
@ -208,6 +207,4 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
  }
 }

-polyfill(ScrollNumber);
-
 export default ScrollNumber;
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@ -193,9 +193,10 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
      class="head-example"
      href="#"
    />
-    <i
-      aria-label="icon: clock-circle"
+    <span
+      aria-label="clock-circle"
      class="anticon anticon-clock-circle ant-scroll-number-custom-component"
+      role="img"
      style="color:#f5222d"
    >
      <svg
@ -215,7 +216,7 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
          d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
        />
      </svg>
-    </i>
+    </span>
  </span>
 </div>
 `;
@ -399,9 +400,10 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
        class="ant-btn"
        type="button"
      >
-        <i
-          aria-label="icon: minus"
+        <span
+          aria-label="minus"
          class="anticon anticon-minus"
+          role="img"
        >
          <svg
            aria-hidden="true"
@ -417,15 +419,16 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
              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>
-        </i>
+        </span>
      </button>
      <button
        class="ant-btn"
        type="button"
      >
-        <i
-          aria-label="icon: plus"
+        <span
+          aria-label="plus"
          class="anticon anticon-plus"
+          role="img"
        >
          <svg
            aria-hidden="true"
@ -437,6 +440,7 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
            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"
            />
@ -444,7 +448,7 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
              d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
            />
          </svg>
-        </i>
+        </span>
      </button>
    </div>
  </div>
@ -739,9 +743,10 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
  <span
    class="ant-badge"
  >
-    <i
-      aria-label="icon: notification"
+    <span
+      aria-label="notification"
      class="anticon anticon-notification"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -757,7 +762,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
          d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
        />
      </svg>
-    </i>
+    </span>
    <sup
      class="ant-scroll-number ant-badge-dot"
      data-show="true"
@ -766,9 +771,10 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
  <span
    class="ant-badge"
  >
-    <i
-      aria-label="icon: notification"
+    <span
+      aria-label="notification"
      class="anticon anticon-notification"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -784,7 +790,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
          d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
        />
      </svg>
-    </i>
+    </span>
  </span>
  <span
    class="ant-badge"
@ -1300,12 +1306,11 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
    </sup>
  </span>
  <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
  >
    <sup
      class="ant-scroll-number ant-badge-count"
      data-show="true"
-      style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset"
      title="4"
    >
      <span
@ -1466,7 +1471,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
    </sup>
  </span>
  <span
-    class="ant-badge ant-badge-not-a-wrapper"
+    class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
  >
    <sup
      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
--- a/components/badge/tests/snapshots/index.test.js.snap
+++ b/components/badge/tests/snapshots/index.test.js.snap
@ -724,6 +724,12 @@ exports[`Badge render correct with negative number 1`] = `
 </div>
 `;

+exports[`Badge rtl render component should be rendered correctly in RTL direction 1`] = `
+<span
+  class="ant-badge ant-badge-not-a-wrapper ant-badge-rtl"
+/>
+`;
+
 exports[`Badge should be compatible with borderColor style 1`] = `
 <span
  class="ant-badge ant-badge-not-a-wrapper"
--- a/components/badge/tests/index.test.js
+++ b/components/badge/tests/index.test.js
@ -3,9 +3,11 @@ import { mount, render } from 'enzyme';
 import Badge from '../index';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';

 describe('Badge', () => {
  mountTest(Badge);
+  rtlTest(Badge);

  beforeEach(() => {
    jest.useFakeTimers();
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@ -14,7 +14,8 @@ title:
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.

 ```jsx
-import { Badge, Icon } from 'antd';
+import { Badge } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
@ -24,7 +25,7 @@ ReactDOM.render(
    <Badge count={0} showZero>
      <a href="#" className="head-example" />
    </Badge>
-    <Badge count={<Icon type="clock-circle" style={{ color: '#f5222d' }} />}>
+    <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
      <a href="#" className="head-example" />
    </Badge>
  </div>,
@ -36,12 +37,19 @@ ReactDOM.render(
 .ant-badge:not(.ant-badge-not-a-wrapper) {
  margin-right: 20px;
 }
+.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
+  margin-right: 0;
+  margin-left: 20px;
+}
 .head-example {
  width: 42px;
  height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
  background: #eee;
  display: inline-block;
  vertical-align: middle;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@ -14,7 +14,8 @@ title:
 The count will be animated as it changes.

 ```jsx
-import { Badge, Button, Icon, Switch } from 'antd';
+import { Badge, Button, Switch } from 'antd';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

 const ButtonGroup = Button.Group;

@ -50,10 +51,10 @@ class Demo extends React.Component {
          </Badge>
          <ButtonGroup>
            <Button onClick={this.decline}>
-              <Icon type="minus" />
+              <MinusOutlined />
            </Button>
            <Button onClick={this.increase}>
-              <Icon type="plus" />
+              <PlusOutlined />
            </Button>
          </ButtonGroup>
        </div>
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@ -14,15 +14,16 @@ title:
 This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

 ```jsx
-import { Badge, Icon } from 'antd';
+import { Badge } from 'antd';
+import { NotificationOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
    <Badge dot>
-      <Icon type="notification" />
+      <NotificationOutlined />
    </Badge>
    <Badge count={0} dot>
-      <Icon type="notification" />
+      <NotificationOutlined />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@ -21,18 +21,31 @@ import { Badge } from 'antd';
 ReactDOM.render(
  <div>
    <Badge count={25} />
-    <Badge
-      count={4}
-      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
-    />
-    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
+    <Badge count={4} className="site-badge-count-4" />
+    <Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
  </div>,
  mountNode,
 );
 ```

+```css
+.site-badge-count-4 .ant-badge-count {
+  background-color: #fff;
+  color: #999;
+  box-shadow: 0 0 0 1px #d9d9d9 inset;
+}
+```
+
 <style>
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
  margin-right: 8px;
 }
+.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
+  margin-right: 0;
+  margin-left: 20px;
+}
+[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
+  background-color: #141414;
+  box-shadow: 0 0 0 1px #434343 inset;
+}
 </style>
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@ -31,11 +31,20 @@ ReactDOM.render(
 .ant-badge:not(.ant-badge-not-a-wrapper) {
  margin-right: 20px;
 }
+
+.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
+  margin-right: 0;
+  margin-left: 20px;
+}
+
 .head-example {
  width: 42px;
  height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
  background: #eee;
  display: inline-block;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -24,7 +24,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| color | Customize Badge dot color | string | - | 3.16.0 |
+| color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode |  |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
 | offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
@ -32,4 +32,4 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |
 | text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |  |
-| title | Text to show when hovering over the badge | string | `count` | 3.5.0 |
+| title | Text to show when hovering over the badge | string | `count` |  |
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import Animate from 'rc-animate';
 import omit from 'omit.js';
 import classNames from 'classnames';
@ -40,13 +39,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
    overflowCount: 99,
  };

-  static propTypes = {
-    count: PropTypes.node,
-    showZero: PropTypes.bool,
-    dot: PropTypes.bool,
-    overflowCount: PropTypes.number,
-  };
-
  getNumberedDispayCount() {
    const { count, overflowCount } = this.props;
    const displayCount =
@ -82,11 +74,12 @@ export default class Badge extends React.Component<BadgeProps, any> {
      : style;
  }

-  getBadgeClassName(prefixCls: string) {
+  getBadgeClassName(prefixCls: string, direction: string = 'ltr') {
    const { className, children } = this.props;
    return classNames(className, prefixCls, {
      [`${prefixCls}-status`]: this.hasStatus(),
      [`${prefixCls}-not-a-wrapper`]: !children,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
    }) as string;
  }

@ -164,7 +157,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
    );
  }

-  renderBadge = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderBadge = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
    const {
      prefixCls: customizePrefixCls,
      scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
@ -208,7 +201,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
      return (
        <span
          {...omit(restProps, omitArr)}
-          className={this.getBadgeClassName(prefixCls)}
+          className={this.getBadgeClassName(prefixCls, direction)}
          style={styleWithOffset}
        >
          <span className={statusCls} style={statusStyle} />
@ -220,7 +213,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
    }

    return (
-      <span {...omit(restProps, omitArr)} className={this.getBadgeClassName(prefixCls)}>
+      <span {...omit(restProps, omitArr)} className={this.getBadgeClassName(prefixCls, direction)}>
        {children}
        <Animate
          component=""
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -25,7 +25,7 @@ title: Badge

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| color | 自定义小圆点的颜色 | string | - | 3.16.0 |
+| color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
 | offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
@ -33,4 +33,4 @@ title: Badge
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |  |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |  |
-| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | 3.5.0 |
+| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |  |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -12,6 +12,10 @@
  color: unset;
  line-height: 1;

+  &-rtl {
+    direction: rtl;
+  }
+
  &-count {
    z-index: @zindex-badge;
    min-width: @badge-height;
@ -53,6 +57,20 @@
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
+
+    .@{badge-prefix-cls}-rtl & {
+      right: auto;
+      left: 0;
+      transform: translate(-50%, -50%);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  .@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
+    right: auto;
+    left: 0;
+    transform: translate(-50%, -50%);
+    transform-origin: 0% 0%;
  }

  &-status {
@ -111,6 +129,11 @@
      margin-left: 8px;
      color: @text-color;
      font-size: @font-size-base;
+
+      .@{badge-prefix-cls}-rtl & {
+        margin-right: 8px;
+        margin-left: 0;
+      }
    }
  }

@ -118,11 +141,19 @@
  &-zoom-enter {
    animation: antZoomBadgeIn 0.3s @ease-out-back;
    animation-fill-mode: both;
+
+    .@{badge-prefix-cls}-rtl & {
+      animation-name: antZoomBadgeInRtl;
+    }
  }

  &-zoom-leave {
    animation: antZoomBadgeOut 0.3s @ease-in-back;
    animation-fill-mode: both;
+
+    .@{badge-prefix-cls}-rtl & {
+      animation-name: antZoomBadgeOutRtl;
+    }
  }

  &-not-a-wrapper {
@ -189,3 +220,23 @@
    opacity: 0;
  }
 }
+
+@keyframes antZoomBadgeInRtl {
+  0% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+@keyframes antZoomBadgeOutRtl {
+  0% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+  100% {
+    transform: scale(0) translate(-50%, -50%);
+    opacity: 0;
+  }
+}
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import omit from 'omit.js';
@ -68,22 +67,6 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
    separator: '/',
  };

-  static propTypes = {
-    prefixCls: PropTypes.string,
-    separator: PropTypes.node,
-    routes: PropTypes.array,
-  };
-
-  componentDidMount() {
-    const { props } = this;
-    warning(
-      !('linkRender' in props || 'nameRender' in props),
-      'Breadcrumb',
-      '`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
-        'see: https://u.ant.design/item-render.',
-    );
-  }
-
  getPath = (path: string, params: any) => {
    path = (path || '').replace(/^\//, '');
    Object.keys(params).forEach(key => {
@ -115,7 +98,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
        paths.push(path);
      }
      // generated overlay by route.children
-      let overlay = null;
+      let overlay;
      if (route.children && route.children.length) {
        overlay = (
          <Menu>
@ -175,7 +158,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      <div
        className={classNames(className, prefixCls)}
        style={style}
-        {...omit(restProps, ['itemRender', 'params'])}
+        {...omit(restProps, ['itemRender', 'linkRender', 'nameRender', 'params'])}
      >
        {crumbs}
      </div>
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import { DownOutlined } from '@ant-design/icons';
 import omit from 'omit.js';
+
 import DropDown, { DropDownProps } from '../dropdown/dropdown';
-import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

 export interface BreadcrumbItemProps {
@ -20,12 +20,6 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    separator: '/',
  };

-  static propTypes = {
-    prefixCls: PropTypes.string,
-    separator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    href: PropTypes.string,
-  };
-
  renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
    const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
    const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
@ -70,7 +64,7 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
        <DropDown overlay={overlay} placement="bottomCenter">
          <span className={`${prefixCls}-overlay-link`}>
            {breadcrumbItem}
-            <Icon type="down" />
+            <DownOutlined />
          </span>
        </DropDown>
      );
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@ -2,9 +2,11 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';

 describe('Breadcrumb', () => {
  mountTest(Breadcrumb);
+  rtlTest(Breadcrumb);

  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

@ -103,6 +105,21 @@ describe('Breadcrumb', () => {
    expect(wrapper).toMatchSnapshot();
  });

+  it('props#linkRender and props#nameRender do not warn anymore', () => {
+    const linkRender = jest.fn();
+    const nameRender = jest.fn();
+    mount(
+      <Breadcrumb linkRender={linkRender} nameRender={nameRender}>
+        <Breadcrumb.Item />
+        <Breadcrumb.Item>xxx</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+
+    expect(errorSpy.mock.calls.length).toBe(0);
+    expect(linkRender).not.toHaveBeenCalled();
+    expect(nameRender).not.toHaveBeenCalled();
+  });
+
  it('should support custom attribute', () => {
    const wrapper = render(
      <Breadcrumb data-custom="custom">
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@ -32,6 +32,12 @@ exports[`Breadcrumb filter React.Fragment 1`] = `
 </div>
 `;

+exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
+<div
+  class="ant-breadcrumb"
+/>
+`;
+
 exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
 <div
  class="ant-breadcrumb"
@ -115,9 +121,10 @@ exports[`Breadcrumb should render a menu 1`] = `
          first
        </a>
      </span>
-      <i
-        aria-label="icon: down"
+      <span
+        aria-label="down"
        class="anticon anticon-down"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -133,7 +140,7 @@ exports[`Breadcrumb should render a menu 1`] = `
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-breadcrumb-separator"
--- a/components/breadcrumb/tests/snapshots/demo.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/demo.test.js.snap
@ -108,9 +108,10 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
          General
        </a>
      </span>
-      <i
-        aria-label="icon: down"
+      <span
+        aria-label="down"
        class="anticon anticon-down"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -126,7 +127,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
          />
        </svg>
-      </i>
+      </span>
    </span>
    <span
      class="ant-breadcrumb-separator"
@ -267,9 +268,10 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
      class="ant-breadcrumb-link"
      href=""
    >
-      <i
-        aria-label="icon: home"
+      <span
+        aria-label="home"
        class="anticon anticon-home"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -282,10 +284,10 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
+            d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
          />
        </svg>
-      </i>
+      </span>
    </a>
    <span
      class="ant-breadcrumb-separator"
@ -298,9 +300,10 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
      class="ant-breadcrumb-link"
      href=""
    >
-      <i
-        aria-label="icon: user"
+      <span
+        aria-label="user"
        class="anticon anticon-user"
+        role="img"
      >
        <svg
          aria-hidden="true"
@ -313,10 +316,10 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
          width="1em"
        >
          <path
-            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
          />
        </svg>
-      </i>
+      </span>
      <span>
        Application List
      </span>
--- a/components/breadcrumb/tests/snapshots/router.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/router.test.js.snap
@ -80,7 +80,6 @@ exports[`react router react router 3 1`] = `
  >
    <BreadcrumbItem
      key="Home"
-      overlay={null}
      separator="/"
    >
      <span>
@ -102,7 +101,6 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Application List"
-      overlay={null}
      separator="/"
    >
      <span>
@ -124,7 +122,6 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Application:id"
-      overlay={null}
      separator="/"
    >
      <span>
@ -146,7 +143,6 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Detail"
-      overlay={null}
      separator="/"
    >
      <span>
--- a/components/breadcrumb/demo/router-4.md
+++ b/components/breadcrumb/demo/router-4.md
@ -95,3 +95,9 @@ ReactDOM.render(
  margin-top: 16px;
 }
 ```
+
+<style>
+  [data-theme="dark"] .demo-nav {
+    background: #141414;
+  }
+</style>
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@ -74,3 +74,9 @@ ReactDOM.render(
  margin-top: 16px;
 }
 ```
+
+<style>
+  [data-theme="dark"] .demo-nav {
+    background: #141414;
+  }
+</style>
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@ -14,15 +14,16 @@ title:
 The icon should be placed in front of the text.

 ```jsx
-import { Breadcrumb, Icon } from 'antd';
+import { Breadcrumb } from 'antd';
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <Breadcrumb>
    <Breadcrumb.Item href="">
-      <Icon type="home" />
+      <HomeOutlined />
    </Breadcrumb.Item>
    <Breadcrumb.Item href="">
-      <Icon type="user" />
+      <UserOutlined />
      <span>Application List</span>
    </Breadcrumb.Item>
    <Breadcrumb.Item>Application</Breadcrumb.Item>
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -11,16 +11,46 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 - When the system has more than two layers in a hierarchy.
 - When you need to inform the user of where they are.
 - When the user may need to navigate back to a higher level.
- When the application has multi-layer architecture.

 ## API

-| Property | Description | Type | Optional | Default | Version |
-| --- | --- | --- | --- | --- | --- |
-| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode |  | - |  |
-| params | Routing parameters | object |  | - |  |
-| routes | The routing stack information of router | [routes\[\]](#routes) |  | - |  |
-| separator | Custom separator | string\|ReactNode |  | `/` |  |
+### Breadcrumb
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - |  |
+| params | Routing parameters | object | - |  |
+| routes | The routing stack information of router | [routes\[\]](#routes) | - |  |
+| separator | Custom separator | string\|ReactNode | '/' |  |
+
+### Breadcrumb.Item
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| href | Target of hyperlink | string | - |  |
+| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
+| onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
+
+### Breadcrumb.Separator
+
+| Property | Description      | Type              | Default | Version |
+| -------- | ---------------- | ----------------- | ------- | ------- |
+| children | Custom separator | string\|ReactNode | '/'     |         |
+
+> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
+
+### routes
+
+```ts
+interface Route {
+  path: string;
+  breadcrumbName: string;
+  children: Array<{
+    path: string;
+    breadcrumbName: string;
+  }>;
+}
+```

 ### Use with browserHistory

--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -19,24 +19,24 @@ title: Breadcrumb

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | 3.17.0 |
-| params | 路由的参数 | object | - | 3.17.0 |
-| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | 3.17.0 |
-| separator | 分隔符自定义 | string\|ReactNode | '/' | 3.17.0 |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |  |
+| params | 路由的参数 | object | - |  |
+| routes | router 的路由栈信息 | [routes\[\]](#routes) | - |  |
+| separator | 分隔符自定义 | string\|ReactNode | '/' |  |

 ### Breadcrumb.Item

-| 参数    | 参数           | 类型                                   | 默认值 | 版本   |
+| 参数    | 说明           | 类型                                   | 默认值 | 版本   |
 | ------- | -------------- | -------------------------------------- | ------ | ------ |
-| href    | 链接的目的地   | string                                 | -      | 3.17.0 |
-| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      | 3.17.0 |
-| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      | 3.17.0 |
+| href    | 链接的目的地   | string                                 | -      |  |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      |  |
+| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      |  |

-### Breadcrumb.Separator `3.21.0`
+### Breadcrumb.Separator

-| 参数     | 参数           | 类型              | 默认值 | 版本   |
+| 参数     | 说明           | 类型              | 默认值 | 版本   |
 | -------- | -------------- | ----------------- | ------ | ------ |
-| children | 要显示的分隔符 | string\|ReactNode | '/'    | 3.21.0 |
+| children | 要显示的分隔符 | string\|ReactNode | '/'    |  |

 > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。

--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@ -27,13 +27,29 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-danger"
+    class="ant-btn ant-btn-primary ant-btn-dangerous"
    type="button"
  >
    <span>
      Danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Link
+    </span>
+  </button>
  <button
    class="ant-btn ant-btn-link"
    type="button"
@ -72,13 +88,29 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-danger ant-btn-block"
+    class="ant-btn ant-btn-primary ant-btn-block ant-btn-dangerous"
    type="button"
  >
    <span>
      Danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-block ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-block ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Link
+    </span>
+  </button>
  <button
    class="ant-btn ant-btn-link ant-btn-block"
    type="button"
@ -90,264 +122,6 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
-<div>
-  <h4>
-    Basic
-  </h4>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        Cancel
-      </span>
-    </button>
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        OK
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn"
-      disabled=""
-      type="button"
-    >
-      <span>
-        L
-      </span>
-    </button>
-    <button
-      class="ant-btn"
-      disabled=""
-      type="button"
-    >
-      <span>
-        M
-      </span>
-    </button>
-    <button
-      class="ant-btn"
-      disabled=""
-      type="button"
-    >
-      <span>
-        R
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        L
-      </span>
-    </button>
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        M
-      </span>
-    </button>
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        R
-      </span>
-    </button>
-  </div>
-  <h4>
-    With Icon
-  </h4>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <i
-        aria-label="icon: left"
-        class="anticon anticon-left"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </i>
-      <span>
-        Go back
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <span>
-        Go forward
-      </span>
-      <i
-        aria-label="icon: right"
-        class="anticon anticon-right"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
-          />
-        </svg>
-      </i>
-    </button>
-  </div>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn ant-btn-primary ant-btn-icon-only"
-      type="button"
-    >
-      <i
-        aria-label="icon: cloud"
-        class="anticon anticon-cloud"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="cloud"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 0 1-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
-          />
-        </svg>
-      </i>
-    </button>
-    <button
-      class="ant-btn ant-btn-primary ant-btn-icon-only"
-      type="button"
-    >
-      <i
-        aria-label="icon: cloud-download"
-        class="anticon anticon-cloud-download"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="cloud-download"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"
-          />
-          <path
-            d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
-          />
-        </svg>
-      </i>
-    </button>
-  </div>
-  <div
-    class="ant-btn-group"
-  >
-    <button
-      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-      type="button"
-    >
-      <i
-        aria-label="icon: cloud"
-        class="anticon anticon-cloud"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="cloud"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 0 1-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
-          />
-        </svg>
-      </i>
-    </button>
-    <button
-      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
-      type="button"
-    >
-      <i
-        aria-label="icon: cloud-download"
-        class="anticon anticon-cloud-download"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="cloud-download"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"
-          />
-          <path
-            d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
-          />
-        </svg>
-      </i>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 <div>
  <button
@ -421,8 +195,44 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
      Link(disabled)
    </span>
  </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-link ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Link
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-dangerous"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Danger Link(disabled)
+    </span>
+  </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-dangerous"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Danger Default(disabled)
+    </span>
+  </button>
  <div
-    style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
+    class="site-button-ghost-wrapper"
  >
    <button
      class="ant-btn ant-btn-background-ghost"
@ -447,7 +257,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `

 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 <div
-  style="background:rgb(190, 200, 200);padding:26px 16px 16px"
+  class="site-button-ghost-wrapper"
 >
  <button
    class="ant-btn ant-btn-primary ant-btn-background-ghost"
@ -466,21 +276,29 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-dashed ant-btn-background-ghost"
-    type="button"
-  >
-    <span>
-      Dashed
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-danger ant-btn-background-ghost"
+    class="ant-btn ant-btn-primary ant-btn-background-ghost ant-btn-dangerous"
    type="button"
  >
    <span>
      danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-background-ghost ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-background-ghost ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Link
+    </span>
+  </button>
  <button
    class="ant-btn ant-btn-link ant-btn-background-ghost"
    type="button"
@ -498,9 +316,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -513,10 +332,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-circle"
@ -530,9 +349,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    class="ant-btn ant-btn-primary"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -545,10 +365,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
    <span>
      Search
    </span>
@ -557,9 +377,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    class="ant-btn ant-btn-circle ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -572,18 +393,19 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -596,10 +418,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
    <span>
      Search
    </span>
@ -609,9 +431,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    class="ant-btn ant-btn-circle ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -624,18 +447,19 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -648,10 +472,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
    <span>
      Search
    </span>
@ -660,9 +484,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -675,18 +500,19 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn ant-btn-dashed"
    type="button"
  >
-    <i
-      aria-label="icon: search"
+    <span
+      aria-label="search"
      class="anticon anticon-search"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -699,10 +525,10 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+          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>
-    </i>
+    </span>
    <span>
      Search
    </span>
@ -716,9 +542,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
    class="ant-btn ant-btn-primary ant-btn-loading"
    type="button"
  >
-    <i
-      aria-label="icon: loading"
+    <span
+      aria-label="loading"
      class="anticon anticon-loading"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -731,10 +558,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
        />
      </svg>
-    </i>
+    </span>
    <span>
      Loading
    </span>
@ -743,9 +570,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
    class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
    type="button"
  >
-    <i
-      aria-label="icon: loading"
+    <span
+      aria-label="loading"
      class="anticon anticon-loading"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -758,10 +586,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
        />
      </svg>
-    </i>
+    </span>
    <span>
      Loading
    </span>
@ -779,9 +607,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
    class="ant-btn ant-btn-primary"
    type="button"
  >
-    <i
-      aria-label="icon: poweroff"
+    <span
+      aria-label="poweroff"
      class="anticon anticon-poweroff"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -794,87 +623,14 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
+          d="M705.6 124.9a8 8 0 00-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0162.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0127.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 01-76.3 113.3 353.06 353.06 0 01-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 01-113.2-76.4A355.92 355.92 0 01184 650.4a355 355 0 01-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"
        />
      </svg>
-    </i>
+    </span>
    <span>
      Click me!
    </span>
  </button>
-  <br />
-  <button
-    class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
-    type="button"
-  >
-    <i
-      aria-label="icon: loading"
-      class="anticon anticon-loading"
-    >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
-      >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </i>
-  </button>
-  <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only ant-btn-loading"
-    type="button"
-  >
-    <i
-      aria-label="icon: loading"
-      class="anticon anticon-loading"
-    >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
-      >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </i>
-  </button>
-  <button
-    class="ant-btn ant-btn-danger ant-btn-round ant-btn-icon-only ant-btn-loading"
-    type="button"
-  >
-    <i
-      aria-label="icon: loading"
-      class="anticon anticon-loading"
-    >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
-      >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </i>
-  </button>
 </div>
 `;

@ -903,9 +659,10 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
    <span>
      Actions 
    </span>
-    <i
-      aria-label="icon: down"
+    <span
+      aria-label="down"
      class="anticon anticon-down"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -921,7 +678,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
        />
      </svg>
-    </i>
+    </span>
  </button>
 </div>
 `;
@ -1005,7 +762,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    type="button"
  >
    <span>
-      Normal
+      Default
    </span>
  </button>
  <button
@ -1016,14 +773,31 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
      Dashed
    </span>
  </button>
+  <br />
  <button
-    class="ant-btn ant-btn-danger ant-btn-lg"
+    class="ant-btn ant-btn-primary ant-btn-lg ant-btn-dangerous"
    type="button"
  >
    <span>
      Danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-lg ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-lg ant-btn-dangerous"
+    type="button"
+  >
+    <span>
+      Danger Link
+    </span>
+  </button>
  <button
    class="ant-btn ant-btn-link ant-btn-lg"
    type="button"
@ -1037,9 +811,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: download"
+    <span
+      aria-label="download"
      class="anticon anticon-download"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -1052,18 +827,19 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: download"
+    <span
+      aria-label="download"
      class="anticon anticon-download"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -1076,18 +852,19 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
    type="button"
  >
-    <i
-      aria-label="icon: download"
+    <span
+      aria-label="download"
      class="anticon anticon-download"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -1100,18 +877,19 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
    type="button"
  >
-    <i
-      aria-label="icon: download"
+    <span
+      aria-label="download"
      class="anticon anticon-download"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -1124,10 +902,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
    <span>
      Download
    </span>
@ -1136,9 +914,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    class="ant-btn ant-btn-primary ant-btn-lg"
    type="button"
  >
-    <i
-      aria-label="icon: download"
+    <span
+      aria-label="download"
      class="anticon anticon-download"
+      role="img"
    >
      <svg
        aria-hidden="true"
@ -1151,72 +930,13 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        width="1em"
      >
        <path
-          d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+          d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
        />
      </svg>
-    </i>
+    </span>
    <span>
      Download
    </span>
  </button>
-  <br />
-  <div
-    class="ant-btn-group ant-btn-group-lg"
-  >
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <i
-        aria-label="icon: left"
-        class="anticon anticon-left"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </i>
-      <span>
-        Backward
-      </span>
-    </button>
-    <button
-      class="ant-btn ant-btn-primary"
-      type="button"
-    >
-      <span>
-        Forward
-      </span>
-      <i
-        aria-label="icon: right"
-        class="anticon anticon-right"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
-          />
-        </svg>
-      </i>
-    </button>
-  </div>
 </div>
 `;
--- a/components/button/tests/snapshots/index.test.js.snap
+++ b/components/button/tests/snapshots/index.test.js.snap
@ -43,9 +43,10 @@ exports[`Button renders Chinese characters correctly 2`] = `
  class="ant-btn"
  type="button"
 >
-  <i
-    aria-label="icon: search"
+  <span
+    aria-label="search"
    class="anticon anticon-search"
+    role="img"
  >
    <svg
      aria-hidden="true"
@ -58,10 +59,10 @@ exports[`Button renders Chinese characters correctly 2`] = `
      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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+        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>
-  </i>
+  </span>
  <span>
    按钮
  </span>
@ -73,9 +74,10 @@ exports[`Button renders Chinese characters correctly 3`] = `
  class="ant-btn"
  type="button"
 >
-  <i
-    aria-label="icon: search"
+  <span
+    aria-label="search"
    class="anticon anticon-search"
+    role="img"
  >
    <svg
      aria-hidden="true"
@ -88,10 +90,10 @@ exports[`Button renders Chinese characters correctly 3`] = `
      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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+        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>
-  </i>
+  </span>
  <span>
    按钮
  </span>
@ -103,9 +105,10 @@ exports[`Button renders Chinese characters correctly 4`] = `
  class="ant-btn"
  type="button"
 >
-  <i
-    aria-label="icon: search"
+  <span
+    aria-label="search"
    class="anticon anticon-search"
+    role="img"
  >
    <svg
      aria-hidden="true"
@ -118,10 +121,10 @@ exports[`Button renders Chinese characters correctly 4`] = `
      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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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"
+        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>
-  </i>
+  </span>
  <span>
    按钮
  </span>
@ -133,9 +136,10 @@ exports[`Button renders Chinese characters correctly 5`] = `
  class="ant-btn ant-btn-loading"
  type="button"
 >
-  <i
-    aria-label="icon: loading"
+  <span
+    aria-label="loading"
    class="anticon anticon-loading"
+    role="img"
  >
    <svg
      aria-hidden="true"
@ -148,10 +152,10 @@ exports[`Button renders Chinese characters correctly 5`] = `
      width="1em"
    >
      <path
-        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
      />
    </svg>
-  </i>
+  </span>
  <span>
    按钮
  </span>
@ -163,9 +167,10 @@ exports[`Button renders Chinese characters correctly 6`] = `
  class="ant-btn ant-btn-loading"
  type="button"
 >
-  <i
-    aria-label="icon: loading"
+  <span
+    aria-label="loading"
    class="anticon anticon-loading"
+    role="img"
  >
    <svg
      aria-hidden="true"
@ -178,10 +183,10 @@ exports[`Button renders Chinese characters correctly 6`] = `
      width="1em"
    >
      <path
-        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
      />
    </svg>
-  </i>
+  </span>
  <span>
    按 钮
  </span>
@ -210,6 +215,45 @@ exports[`Button renders correctly 1`] = `
 </button>
 `;

+exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = `
+<button
+  class="ant-btn ant-btn-rtl"
+  type="button"
+/>
+`;
+
+exports[`Button rtl render component should be rendered correctly in RTL direction 2`] = `
+<button
+  class="ant-btn ant-btn-lg ant-btn-rtl"
+  type="button"
+/>
+`;
+
+exports[`Button rtl render component should be rendered correctly in RTL direction 3`] = `
+<button
+  class="ant-btn ant-btn-sm ant-btn-rtl"
+  type="button"
+/>
+`;
+
+exports[`Button rtl render component should be rendered correctly in RTL direction 4`] = `
+<div
+  class="ant-btn-group ant-btn-group-rtl"
+/>
+`;
+
+exports[`Button rtl render component should be rendered correctly in RTL direction 5`] = `
+<div
+  class="ant-btn-group ant-btn-group-lg ant-btn-group-rtl"
+/>
+`;
+
+exports[`Button rtl render component should be rendered correctly in RTL direction 6`] = `
+<div
+  class="ant-btn-group ant-btn-group-sm ant-btn-group-rtl"
+/>
+`;
+
 exports[`Button should has click wave effect 1`] = `
 <button
  ant-click-animating-without-extra-node="true"
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { render, mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { SearchOutlined } from '@ant-design/icons';
 import Button from '..';
-import Icon from '../../icon';
 import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep } from '../../../tests/utils';

 describe('Button', () => {
@ -14,15 +15,19 @@ describe('Button', () => {
  mountTest(() => <Button.Group size="large" />);
  mountTest(() => <Button.Group size="small" />);

+  rtlTest(Button);
+  rtlTest(() => <Button size="large" />);
+  rtlTest(() => <Button size="small" />);
+  rtlTest(Button.Group);
+  rtlTest(() => <Button.Group size="large" />);
+  rtlTest(() => <Button.Group size="small" />);
+
  it('renders correctly', () => {
    const wrapper = render(<Button>Follow</Button>);
    expect(wrapper).toMatchSnapshot();
  });

  it('mount correctly', () => {
-    if (process.env.REACT === '15') {
-      return;
-    }
    expect(() => renderer.create(<Button>Follow</Button>)).not.toThrow();
  });

@ -30,22 +35,22 @@ 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={<SearchOutlined />}>按钮</Button>);
    expect(wrapper1).toMatchSnapshot();
    // should not insert space when there is icon
    const wrapper2 = render(
      <Button>
-        <Icon type="search" />
+        <SearchOutlined />
        按钮
      </Button>,
    );
    expect(wrapper2).toMatchSnapshot();
    // should not insert space when there is icon
-    const wrapper3 = render(<Button icon="search">按钮</Button>);
+    const wrapper3 = render(<Button icon={<SearchOutlined />}>按钮</Button>);
    expect(wrapper3).toMatchSnapshot();
    // should not insert space when there is icon while loading
    const wrapper4 = render(
-      <Button icon="search" loading>
+      <Button icon={<SearchOutlined />} loading>
        按钮
      </Button>,
    );
@ -236,4 +241,15 @@ describe('Button', () => {
      wrapper.unmount();
    }).not.toThrow();
  });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Button type="primary" icon="ab" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    mount(<Button type="primary" icon="search" />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Button] \`icon\` is using ReactNode instead of string naming in v4. Please check \`search\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@ -12,7 +12,7 @@ export interface ButtonGroupProps {

 const ButtonGroup: React.SFC<ButtonGroupProps> = props => (
  <ConfigConsumer>
-    {({ getPrefixCls }: ConfigConsumerProps) => {
+    {({ getPrefixCls, direction }: ConfigConsumerProps) => {
      const { prefixCls: customizePrefixCls, size, className, ...others } = props;
      const prefixCls = getPrefixCls('btn-group', customizePrefixCls);

@ -34,6 +34,7 @@ const ButtonGroup: React.SFC<ButtonGroupProps> = props => (
        prefixCls,
        {
          [`${prefixCls}-${sizeCls}`]: sizeCls,
+          [`${prefixCls}-rtl`]: direction === 'rtl',
        },
        className,
      );
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -1,14 +1,14 @@
 /* eslint-disable react/button-has-type */
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { polyfill } from 'react-lifecycles-compat';
+import { LoadingOutlined } from '@ant-design/icons';
 import omit from 'omit.js';
+
 import Group from './button-group';
-import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import Wave from '../_util/wave';
 import { Omit, tuple } from '../_util/type';
+import warning from '../_util/warning';

 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@ -65,23 +65,24 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
 }

 const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
-export type ButtonType = (typeof ButtonTypes)[number];
+export type ButtonType = typeof ButtonTypes[number];
 const ButtonShapes = tuple('circle', 'circle-outline', 'round');
-export type ButtonShape = (typeof ButtonShapes)[number];
+export type ButtonShape = typeof ButtonShapes[number];
 const ButtonSizes = tuple('large', 'default', 'small');
-export type ButtonSize = (typeof ButtonSizes)[number];
+export type ButtonSize = typeof ButtonSizes[number];
 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
-export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number];
+export type ButtonHTMLType = typeof ButtonHTMLTypes[number];

 export interface BaseButtonProps {
  type?: ButtonType;
-  icon?: string;
+  icon?: React.ReactNode;
  shape?: ButtonShape;
  size?: ButtonSize;
  loading?: boolean | { delay?: number };
  prefixCls?: string;
  className?: string;
  ghost?: boolean;
+  danger?: boolean;
  block?: boolean;
  children?: React.ReactNode;
 }
@ -121,19 +122,6 @@ class Button extends React.Component<ButtonProps, ButtonState> {
    htmlType: 'button',
  };

-  static propTypes = {
-    type: PropTypes.string,
-    shape: PropTypes.oneOf(ButtonShapes),
-    size: PropTypes.oneOf(ButtonSizes),
-    htmlType: PropTypes.oneOf(ButtonHTMLTypes),
-    onClick: PropTypes.func,
-    loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    className: PropTypes.string,
-    icon: PropTypes.string,
-    block: PropTypes.bool,
-    title: PropTypes.string,
-  };
-
  private delayTimeout: number;

  private buttonNode: HTMLElement | null;
@ -213,10 +201,11 @@ class Button extends React.Component<ButtonProps, ButtonState> {
    return React.Children.count(children) === 1 && !icon && type !== 'link';
  }

-  renderButton = ({ getPrefixCls, autoInsertSpaceInButton }: ConfigConsumerProps) => {
+  renderButton = ({ getPrefixCls, autoInsertSpaceInButton, direction }: ConfigConsumerProps) => {
    const {
      prefixCls: customizePrefixCls,
      type,
+      danger,
      shape,
      size,
      className,
@ -228,6 +217,12 @@ class Button extends React.Component<ButtonProps, ButtonState> {
    } = this.props;
    const { loading, hasTwoCNChar } = this.state;

+    warning(
+      !(typeof icon === 'string' && icon.length > 2),
+      'Button',
+      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+    );
+
    const prefixCls = getPrefixCls('btn', customizePrefixCls);
    const autoInsertSpace = autoInsertSpaceInButton !== false;

@ -256,9 +251,11 @@ class Button extends React.Component<ButtonProps, ButtonState> {
      [`${prefixCls}-background-ghost`]: ghost,
      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-dangerous`]: !!danger,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
    });

-    const iconNode = iconType ? <Icon type={iconType} /> : null;
+    const iconNode = loading ? <LoadingOutlined /> : icon || null;
    const kids =
      children || children === 0
        ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
@ -307,6 +304,4 @@ class Button extends React.Component<ButtonProps, ButtonState> {
  }
 }

-polyfill(Button);
-
 export default Button;
--- a/Show More
+++ b/Show More