fix: <Icon component={HomeOutlined} /> align issue

components/icon/__tests__/demo-extend.test.ts

@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('icon');

components/icon/__tests__/demo.test.ts

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('icon');

components/icon/demo/basic.md

@@ -14,6 +14,7 @@ title:
 Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show spinning animation.
 
 ```jsx
+import { Space } from 'antd';
 import {
   HomeOutlined,
   SettingFilled,
@@ -23,25 +24,14 @@ import {
 } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div className="icons-list">
+  <Space>
     <HomeOutlined />
     <SettingFilled />
     <SmileOutlined />
     <SyncOutlined spin />
     <SmileOutlined rotate={180} />
     <LoadingOutlined />
-  </div>,
+  </Space>,
   mountNode,
 );
 ```
-
-<style>
-.icons-list > .anticon {
-  margin-right: 6px;
-  font-size: 24px;
-}
-.ant-row-rtl .icons-list > .anticon {
-  margin-right: 0;
-  margin-left: 6px;
-}
-</style>

components/icon/demo/custom.md

@@ -14,7 +14,8 @@ title:
 Create a reusable React component by using `<Icon component={...} />`. The property `component` takes a React component that renders to `svg` element.
 
 ```jsx
-import Icon from '@ant-design/icons';
+import { Space } from 'antd';
+import Icon, { HomeOutlined } from '@ant-design/icons';
 
 const HeartSvg = () => (
   <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
@@ -72,20 +73,12 @@ const HeartIcon = props => <Icon component={HeartSvg} {...props} />;
 const PandaIcon = props => <Icon component={PandaSvg} {...props} />;
 
 ReactDOM.render(
-  <div className="custom-icons-list">
+  <Space>
     <HeartIcon style={{ color: 'hotpink' }} />
     <PandaIcon style={{ fontSize: '32px' }} />
-  </div>,
+    <Icon component={HomeOutlined} />
+    <HomeOutlined />
+  </Space>,
   mountNode,
 );
 ```
-
-```css
-.custom-icons-list > .anticon {
-  margin-right: 6px;
-}
-.ant-row-rtl .custom-icons-list > .anticon {
-  margin-right: 0;
-  margin-left: 6px;
-}
-```

components/icon/demo/iconfont.md

@@ -14,18 +14,19 @@ title:
 If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
 
 ```jsx
+import { Space } from 'antd';
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
 });
 
 ReactDOM.render(
-  <div className="icons-list">
+  <Space>
     <IconFont type="icon-tuichu" />
     <IconFont type="icon-facebook" />
     <IconFont type="icon-twitter" />
-  </div>,
+  </Space>,
   mountNode,
 );
 ```

components/icon/demo/scriptUrl.md

@@ -14,6 +14,7 @@ title:
 You can use `scriptUrl` as an array after `@ant-design/icons@4.1.0`, manage icons in one `<Icon />` from multiple [iconfont.cn](http://iconfont.cn/) resources. If icon with a duplicate name in resources, it will overrided in array order.
 
 ```jsx
+import { Space } from 'antd';
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
@@ -24,12 +25,12 @@ const IconFont = createFromIconfontCN({
 });
 
 ReactDOM.render(
-  <div className="icons-list">
+  <Space>
     <IconFont type="icon-javascript" />
     <IconFont type="icon-java" />
     <IconFont type="icon-shoppingcart" />
     <IconFont type="icon-python" />
-  </div>,
+  </Space>,
   mountNode,
 );
 ```

components/icon/demo/two-tone.md

@@ -14,14 +14,15 @@ title:
 You can set `twoToneColor` prop to specific primary color for two-tone icons.
 
 ```jsx
+import { Space } from 'antd';
 import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div className="icons-list">
+  <Space>
     <SmileTwoTone />
     <HeartTwoTone twoToneColor="#eb2f96" />
     <CheckCircleTwoTone twoToneColor="#52c41a" />
-  </div>,
+  </Space>,
   mountNode,
 );
 ```

components/style/core/iconfont.less

@@ -4,6 +4,11 @@
 .@{iconfont-css-prefix} {
   .iconfont-mixin();
 
+  // https://github.com/ant-design/ant-design/issues/33703
+  & > & {
+    vertical-align: 0;
+  }
+
   &[tabindex] {
     cursor: pointer;
   }