diff --git a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000000..108c38519edf --- /dev/null +++ b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,562 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] = ` +
+
+ + + + + +
+
+ + + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/two-tone.md extend context correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; diff --git a/components/icon/__tests__/__snapshots__/demo.test.ts.snap b/components/icon/__tests__/__snapshots__/demo.test.ts.snap new file mode 100644 index 000000000000..210f74757994 --- /dev/null +++ b/components/icon/__tests__/__snapshots__/demo.test.ts.snap @@ -0,0 +1,562 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/icon/demo/basic.md correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/custom.md correctly 1`] = ` +
+
+ + + + + +
+
+ + + + + + + + + + + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; + +exports[`renders ./components/icon/demo/two-tone.md correctly 1`] = ` +
+
+ + + +
+
+ + + +
+
+ + + +
+
+`; diff --git a/components/icon/__tests__/demo-extend.test.ts b/components/icon/__tests__/demo-extend.test.ts new file mode 100644 index 000000000000..0b8861616de7 --- /dev/null +++ b/components/icon/__tests__/demo-extend.test.ts @@ -0,0 +1,3 @@ +import { extendTest } from '../../../tests/shared/demoTest'; + +extendTest('icon'); diff --git a/components/icon/__tests__/demo.test.ts b/components/icon/__tests__/demo.test.ts new file mode 100644 index 000000000000..1a1dbb7efd21 --- /dev/null +++ b/components/icon/__tests__/demo.test.ts @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('icon'); diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md index 2b3879038cc8..02557876b400 100644 --- a/components/icon/demo/basic.md +++ b/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( -
+ -
, + , mountNode, ); ``` - - diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md index 054ee0776306..27a46a161d64 100644 --- a/components/icon/demo/custom.md +++ b/components/icon/demo/custom.md @@ -14,7 +14,8 @@ title: Create a reusable React component by using ``. 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 = () => ( @@ -72,20 +73,12 @@ const HeartIcon = props => ; const PandaIcon = props => ; ReactDOM.render( -
+ -
, + + + , mountNode, ); ``` - -```css -.custom-icons-list > .anticon { - margin-right: 6px; -} -.ant-row-rtl .custom-icons-list > .anticon { - margin-right: 0; - margin-left: 6px; -} -``` diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md index a83f7a2d9b4d..8ee6500dd3a7 100644 --- a/components/icon/demo/iconfont.md +++ b/components/icon/demo/iconfont.md @@ -14,6 +14,7 @@ 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({ @@ -21,11 +22,11 @@ const IconFont = createFromIconfontCN({ }); ReactDOM.render( -
+ -
, + , mountNode, ); ``` diff --git a/components/icon/demo/scriptUrl.md b/components/icon/demo/scriptUrl.md index 5087be798397..369efc9562fa 100644 --- a/components/icon/demo/scriptUrl.md +++ b/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 `` 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( -
+ -
, + , mountNode, ); ``` diff --git a/components/icon/demo/two-tone.md b/components/icon/demo/two-tone.md index 7efd9815abee..0129093e57d1 100644 --- a/components/icon/demo/two-tone.md +++ b/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( -
+ -
, + , mountNode, ); ``` diff --git a/components/style/core/iconfont.less b/components/style/core/iconfont.less index 5276148c22a9..09d84ba1d5d0 100644 --- a/components/style/core/iconfont.less +++ b/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; }