mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-24 15:38:45 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

use ant design icons 4.0 (#18217)

Browse Source 
* feat: use @ant-design/icons@4.0

* feat: use createFromIconfontCN to make site works

* feat: update doc for Icon

* feat: use icon in component Alert

* feat: use icon in component Avatar

* feat: use icon in component Breadcrumb

* feat: use icon in component Button

* feat: use icon in component Cascader

* feat: use icon in component Collapse

* feat: use icon in component Datepicker

* feat: use icon in component Dropdown

* feat: use icon in component Form

* feat: use icon in component Input

* feat: use icon in component InputNumber

* feat: use icon in component Layout

* feat: use icon in component Mention

* feat: use icon in component Message

* feat: use icon in component Modal

* feat: use icon in component Notification

* feat: use icon in component PageHeader

* feat: use icon in component Pagination

* feat: use icon in component Popconfirm

* feat: use icon in component Progress

* feat: use icon in component Rate

* feat: use icon in component Result

* feat: use icon in component Select

* feat: use icon in component Step

* feat: use icon in component Switch

* feat: use icon in component Table

* feat: use icon in component Tab

* feat: use icon in component Tag

* feat: handle rest component which using Icon

* fix: remove unused vars

* feat: use latest alpha ant design icons

* fix: failed test in uploadlist.test.js

* test: update snapshot for icons

* doc: add Icon for site

* doc: use @ant-design/icons in site

* chore: use latest icons

* fix: tslint issue

* fix: test cases

* fix: types for react

* fix: lint rules for import orders

* fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render

* fix: eslint error in demo/**.md

* inject antd icons

* update snapshot

* fix site

* doc: update docs

* fix: code snippets icon in site

* feat: use latest @ant-design/icons

* fix: icon props in message
This commit is contained in:
vagusX 2019-08-13 14:07:17 +08:00 committed by GitHub
parent 2d7059cd51
commit 149729e524
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
272 changed files with 9549 additions and 11321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/__tests__/__snapshots__/index.test.js.snap
View File

@ -27,7 +27,6 @@ Array [
"Drawer",
"Empty",
"Form",
"Icon",
"Input",
"InputNumber",
"Layout",

207
components/alert/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,9 +6,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
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 +22,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 +40,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 +56,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 +73,10 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -86,10 +89,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>
</span>
</div>
<br />
@ -111,9 +114,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 +130,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 +181,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -192,10 +197,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>
</span>
</div>
<div
@ -217,9 +222,10 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -232,10 +238,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>
</span>
</div>
</div>
@ -287,9 +293,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 +309,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 +326,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 +342,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 +359,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 +375,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 +392,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 +408,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 +425,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 +441,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 +460,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 +476,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 +495,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 +511,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 +530,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 +546,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 +635,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 +651,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 +668,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 +684,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 +701,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 +717,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 +734,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 +750,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 +767,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 +783,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 +805,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 +824,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 +843,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 +862,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 +881,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 +897,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 +937,10 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -930,10 +953,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>
</span>
</div>
<p>

15
components/alert/__tests__/index.test.js
View File

@ -49,19 +49,4 @@ describe('Alert', () => {
expect(input.getAttribute('role')).toBe('status');
});
});
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"
/>,
);
expect(warnSpy).toHaveBeenCalledWith(
'Warning: [antd: Alert] `iconType` is deprecated. Please use `icon` instead.',
);
warnSpy.mockRestore();
});
});

5
components/alert/demo/custom-icon.md
View File

@ -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 { Smile } from '@ant-design/icons';
const icon = <Icon type="smile" />;
const icon = <Smile />;
ReactDOM.render(
<div>

105
components/alert/index.tsx
View File

@ -1,11 +1,21 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
Close,
CheckCircle,
ExclamationCircle,
InfoCircle,
CloseCircle,
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';
function noop() {}
@ -28,7 +38,6 @@ export interface AlertProps {
afterClose?: () => void;
/** Whether to show icon */
showIcon?: boolean;
iconType?: string;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
@ -41,21 +50,25 @@ export interface AlertState {
closed: boolean;
}
const iconMapFilled = {
success: CheckCircleFilled,
info: InfoCircleFilled,
error: CloseCircleFilled,
warning: ExclamationCircleFilled,
};
const iconMapOutlined = {
success: CheckCircle,
info: InfoCircle,
error: CloseCircle,
warning: ExclamationCircle,
};
export default class Alert extends React.Component<AlertProps, AlertState> {
constructor(props: AlertProps) {
super(props);
warning(
!('iconType' in props),
'Alert',
'`iconType` is deprecated. Please use `icon` instead.',
);
this.state = {
closing: true,
closed: false,
};
}
state = {
closing: true,
closed: false,
};
handleClose = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
@ -90,7 +103,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 prefixCls = getPrefixCls('alert', customizePrefixCls);
@ -99,30 +112,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) {
@ -149,27 +140,25 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
className={`${prefixCls}-close-icon`}
tabIndex={0}
>
{closeText ? (
<span className={`${prefixCls}-close-text`}>{closeText}</span>
) : (
<Icon type="close" />
)}
{closeText ? <span className={`${prefixCls}-close-text`}>{closeText}</span> : <Close />}
</span>
) : null;
const dataOrAriaProps = getDataOrAriaProps(this.props);
const iconNode = (icon &&
(React.isValidElement<{ className?: string }>(icon) ? (
React.cloneElement(icon, {
className: classNames({
[icon.props.className as string]: icon.props.className,
[`${prefixCls}-icon`]: true,
}),
})
) : (
<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({
[icon.props.className as string]: icon.props.className,
[`${prefixCls}-icon`]: true,
}),
})
) : (
<span className={`${prefixCls}-icon`}>{icon}</span>
))) ||
React.createElement(iconType, { className: `${prefixCls}-icon` });
return this.state.closed ? null : (
<Animate

60
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -50,9 +50,10 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -68,7 +69,7 @@ exports[`renders ./components/auto-complete/demo/basic.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>
</div>
</div>
@ -120,9 +121,10 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
<span
class="ant-input-suffix"
>
<i
aria-label="icon: search"
<span
aria-label="search"
class="anticon anticon-search certain-category-icon"
role="img"
>
<svg
aria-hidden="true"
@ -135,10 +137,10 @@ exports[`renders ./components/auto-complete/demo/certain-category.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>
</span>
<span
@ -155,9 +157,10 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -173,7 +176,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.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>
</div>
</div>
@ -223,9 +226,10 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -241,7 +245,7 @@ exports[`renders ./components/auto-complete/demo/custom.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>
</div>
</div>
@ -297,9 +301,10 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -315,7 +320,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
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>
</div>
</div>
@ -371,9 +376,10 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -389,7 +395,7 @@ exports[`renders ./components/auto-complete/demo/options.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>
</div>
</div>
@ -446,9 +452,10 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
style="margin-right:-12px"
type="button"
>
<i
aria-label="icon: search"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
@ -461,10 +468,10 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
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>
</span>
</span>
@ -482,9 +489,10 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -500,7 +508,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
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>
</div>
</div>

5
components/auto-complete/demo/certain-category.md
View File

@ -14,7 +14,8 @@ title:
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
```jsx
import { Icon, Input, AutoComplete } from 'antd';
import { Input, AutoComplete } from 'antd';
import { Search } from '@ant-design/icons';
const { Option, OptGroup } = AutoComplete;
@ -105,7 +106,7 @@ function Complete() {
placeholder="input here"
optionLabelProp="value"
>
<Input suffix={<Icon type="search" className="certain-category-icon" />} />
<Input suffix={<Search className="certain-category-icon" />} />
</AutoComplete>
</div>
);

5
components/auto-complete/demo/uncertain-category.md
View File

@ -14,7 +14,8 @@ title:
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
```jsx
import { Icon, Button, Input, AutoComplete } from 'antd';
import { Button, Input, AutoComplete } from 'antd';
import { Search } from '@ant-design/icons';
const { Option } = AutoComplete;
@ -90,7 +91,7 @@ class Complete extends React.Component {
size="large"
type="primary"
>
<Icon type="search" />
<Search />
</Button>
}
/>

108
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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>
@ -529,9 +539,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"
@ -544,10 +555,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>
<span
class="ant-avatar ant-avatar-circle"
@ -588,9 +599,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"
@ -603,10 +615,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>
`;

5
components/avatar/demo/badge.md
View File

@ -15,17 +15,18 @@ Usually used for reminders and notifications.
```jsx
import { Avatar, Badge } from 'antd';
import { User } from '@ant-design/icons';
ReactDOM.render(
<div>
<span style={{ marginRight: 24 }}>
<Badge count={1}>
<Avatar shape="square" icon="user" />
<Avatar shape="square" icon={<User />} />
</Badge>
</span>
<span>
<Badge dot>
<Avatar shape="square" icon="user" />
<Avatar shape="square" icon={<User />} />
</Badge>
</span>
</div>,

17
components/avatar/demo/basic.md
View File

@ -15,20 +15,21 @@ Three sizes and two shapes are available.
```jsx
import { Avatar } from 'antd';
import { User } 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={<User />} />
<Avatar size="large" icon={<User />} />
<Avatar icon={<User />} />
<Avatar size="small" icon={<User />} />
</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={<User />} />
<Avatar shape="square" size="large" icon={<User />} />
<Avatar shape="square" icon={<User />} />
<Avatar shape="square" size="small" icon={<User />} />
</div>
</div>,
mountNode,

5
components/avatar/demo/type.md
View File

@ -15,15 +15,16 @@ Image, Icon and letter are supported, and the latter two kinds of avatar can hav
```jsx
import { Avatar } from 'antd';
import { User } from '@ant-design/icons';
ReactDOM.render(
<div>
<Avatar icon="user" />
<Avatar icon={<User />} />
<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={<User />} />
</div>,
mountNode,
);

2
components/avatar/index.en-US.md
View File

@ -10,7 +10,7 @@ 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 | string | - | |
| 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 | - | |

8
components/avatar/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface AvatarProps {
@ -15,8 +15,8 @@ export interface AvatarProps {
src?: string;
/** Srcset of image avatar */
srcSet?: string;
/** Type of the Icon to be used in avatar */
icon?: string;
/** icon to be used in avatar */
icon?: React.ReactNode;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
@ -134,7 +134,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) {
children = <Icon type={icon} />;
children = icon;
} else {
const childrenNode = this.avatarChildren;
if (childrenNode || scale !== 1) {

2
components/avatar/index.zh-CN.md
View File

@ -15,7 +15,7 @@ title: Avatar
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - | |
| icon | 设置头像的自定义图标 | ReactNode | - | |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` | |
| size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` | |
| src | 图片类头像的资源地址 | string | - | |

36
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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"

5
components/badge/demo/basic.md
View File

@ -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 { ClockCircle } 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={<ClockCircle style={{ color: '#f5222d' }} />}>
<a href="#" className="head-example" />
</Badge>
</div>,

7
components/badge/demo/change.md
View File

@ -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 { Minus, Plus } 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" />
<Minus />
</Button>
<Button onClick={this.increase}>
<Icon type="plus" />
<Plus />
</Button>
</ButtonGroup>
</div>

7
components/badge/demo/dot.md
View File

@ -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 { Notification as IconNotification } from '@ant-design/icons';
ReactDOM.render(
<div>
<Badge dot>
<Icon type="notification" />
<IconNotification />
</Badge>
<Badge count={0} dot>
<Icon type="notification" />
<IconNotification />
</Badge>
<Badge dot>
<a href="#">Link something</a>

5
components/breadcrumb/BreadcrumbItem.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Down } 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 {
@ -70,7 +71,7 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
<DropDown overlay={overlay} placement="bottomCenter">
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<Icon type="down" />
<Down />
</span>
</DropDown>
);

7
components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View File

@ -83,9 +83,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"
@ -101,7 +102,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"

25
components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View File

@ -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>

7
components/breadcrumb/demo/withIcon.md
View File

@ -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 { Home, User } from '@ant-design/icons';
ReactDOM.render(
<Breadcrumb>
<Breadcrumb.Item href="">
<Icon type="home" />
<Home />
</Breadcrumb.Item>
<Breadcrumb.Item href="">
<Icon type="user" />
<User />
<span>Application List</span>
</Breadcrumb.Item>
<Breadcrumb.Item>Application</Breadcrumb.Item>

241
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -184,9 +184,10 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
class="ant-btn ant-btn-primary"
type="button"
>
<i
aria-label="icon: left"
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
@ -199,10 +200,10 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
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"
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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>
<span>
Go back
</span>
@ -214,9 +215,10 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
<span>
Go forward
</span>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -229,10 +231,10 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</button>
</div>
<div
@ -242,52 +244,13 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
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>
cloud
</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>
cloud-download
</button>
</div>
</div>
@ -443,9 +406,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"
@ -458,18 +422,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-primary"
type="button"
>
<i
aria-label="icon: search"
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
@ -482,10 +447,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>
@ -494,9 +459,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"
@ -509,18 +475,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"
@ -533,10 +500,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>
@ -546,9 +513,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"
@ -561,18 +529,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"
@ -585,10 +554,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>
@ -597,9 +566,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"
@ -612,18 +582,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"
@ -636,10 +607,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>
@ -653,9 +624,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"
@ -668,10 +640,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>
@ -680,9 +652,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"
@ -695,10 +668,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>
@ -716,25 +689,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
class="ant-btn ant-btn-primary"
type="button"
>
<i
aria-label="icon: poweroff"
class="anticon anticon-poweroff"
>
<svg
aria-hidden="true"
class=""
data-icon="poweroff"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
poweroff
<span>
Click me!
</span>
@ -744,9 +699,10 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
class="ant-btn ant-btn-circle ant-btn-loading"
type="button"
>
<i
aria-label="icon: loading"
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
@ -759,18 +715,19 @@ 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>
</button>
<button
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"
type="button"
>
<i
aria-label="icon: loading"
<span
aria-label="loading"
class="anticon anticon-loading"
role="img"
>
<svg
aria-hidden="true"
@ -783,10 +740,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>
</button>
</div>
`;
@ -816,9 +773,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"
@ -834,7 +792,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>
`;
@ -950,9 +908,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
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"
@ -965,18 +924,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"
@ -989,10 +949,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>
@ -1001,9 +961,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"
@ -1016,10 +977,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>
@ -1032,9 +993,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
class="ant-btn ant-btn-primary"
type="button"
>
<i
aria-label="icon: left"
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
@ -1047,10 +1009,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
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"
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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>
<span>
Backward
</span>
@ -1062,9 +1024,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
<span>
Forward
</span>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -1077,10 +1040,10 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</button>
</div>
</div>

67
components/button/__tests__/__snapshots__/index.test.js.snap
View File

@ -43,25 +43,7 @@ exports[`Button renders Chinese characters correctly 2`] = `
class="ant-btn"
type="button"
>
<i
aria-label="icon: search"
class="anticon anticon-search"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 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"
/>
</svg>
</i>
search
<span>
按钮
</span>
@ -73,9 +55,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 +71,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,25 +86,7 @@ exports[`Button renders Chinese characters correctly 4`] = `
class="ant-btn"
type="button"
>
<i
aria-label="icon: search"
class="anticon anticon-search"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 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"
/>
</svg>
</i>
search
<span>
按钮
</span>
@ -133,9 +98,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 +114,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 +129,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 +145,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>

4
components/button/__tests__/index.test.js
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { render, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { Search } from '@ant-design/icons';
import Button from '..';
import Icon from '../../icon';
describe('Button', () => {
it('renders correctly', () => {
@ -23,7 +23,7 @@ describe('Button', () => {
// should not insert space when there is icon
const wrapper2 = render(
<Button>
<Icon type="search" />
<Search />
按钮
</Button>,
);

10
components/button/button.tsx
View File

@ -2,10 +2,11 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import { Loading } from '@ant-design/icons';
import { polyfill } from 'react-lifecycles-compat';
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';
@ -75,7 +76,7 @@ export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number];
export interface BaseButtonProps {
type?: ButtonType;
icon?: string;
icon?: React.ReactNode;
shape?: ButtonShape;
size?: ButtonSize;
loading?: boolean | { delay?: number };
@ -129,7 +130,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
onClick: PropTypes.func,
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
className: PropTypes.string,
icon: PropTypes.string,
icon: PropTypes.node,
block: PropTypes.bool,
title: PropTypes.string,
};
@ -264,8 +265,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
[`${prefixCls}-block`]: block,
});
const iconType = loading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const iconNode = loading ? <Loading /> : icon || null;
const kids =
children || children === 0
? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)

7
components/button/demo/button-group.md
View File

@ -18,7 +18,8 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr
The `size` can be set to `large`, `small` or left unset resulting in a default size.
```jsx
import { Button, Icon } from 'antd';
import { Button } from 'antd';
import { Left, Right } from '@ant-design/icons';
const ButtonGroup = Button.Group;
@ -43,12 +44,12 @@ ReactDOM.render(
<h4>With Icon</h4>
<ButtonGroup>
<Button type="primary">
<Icon type="left" />
<Left />
Go back
</Button>
<Button type="primary">
Go forward
<Icon type="right" />
<Right />
</Button>
</ButtonGroup>
<ButtonGroup>

17
components/button/demo/icon.md
View File

@ -19,20 +19,21 @@ If you want specific control over the positioning and placement of the `Icon`, t
```jsx
import { Button } from 'antd';
import { Search as IconSearch } from '@ant-design/icons';
ReactDOM.render(
<div>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">
<Button type="primary" shape="circle" icon={<IconSearch />} />
<Button type="primary" icon={<IconSearch />}>
Search
</Button>
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button shape="circle" icon={<IconSearch />} />
<Button icon={<IconSearch />}>Search</Button>
<br />
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">
<Button shape="circle" icon={<IconSearch />} />
<Button icon={<IconSearch />}>Search</Button>
<Button type="dashed" shape="circle" icon={<IconSearch />} />
<Button type="dashed" icon={<IconSearch />}>
Search
</Button>
</div>,

5
components/button/demo/multiple.md
View File

@ -14,7 +14,8 @@ title:
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
```jsx
import { Button, Menu, Dropdown, Icon } from 'antd';
import { Button, Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
function handleMenuClick(e) {
console.log('click', e);
@ -34,7 +35,7 @@ ReactDOM.render(
<Button>secondary</Button>
<Dropdown overlay={menu}>
<Button>
Actions <Icon type="down" />
Actions <Down />
</Button>
</Dropdown>
</div>,

13
components/button/demo/size.md
View File

@ -18,7 +18,8 @@ Ant Design supports a default button size as well as a large and small size.
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
```jsx
import { Button, Radio, Icon } from 'antd';
import { Button, Radio } from 'antd';
import { Download, Left, Right } from '@ant-design/icons';
class ButtonSize extends React.Component {
state = {
@ -54,22 +55,22 @@ class ButtonSize extends React.Component {
Link
</Button>
<br />
<Button type="primary" shape="circle" icon="download" size={size} />
<Button type="primary" shape="round" icon="download" size={size}>
<Button type="primary" shape="circle" icon={<Download />} size={size} />
<Button type="primary" shape="round" icon={<Download />} size={size}>
Download
</Button>
<Button type="primary" icon="download" size={size}>
<Button type="primary" icon={<Download />} size={size}>
Download
</Button>
<br />
<Button.Group size={size}>
<Button type="primary">
<Icon type="left" />
<Left />
Backward
</Button>
<Button type="primary">
Forward
<Icon type="right" />
<Right />
</Button>
</Button.Group>
</div>

2
components/button/index.en-US.md
View File

@ -20,7 +20,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` | |
| href | redirect url of link button | string | - | |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | set the icon of button, see: Icon component | string | - | |
| icon | set the icon component of button | ReactNode | - | |
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
| shape | can be set to `circle`, `round` or omitted | string | - | |
| size | can be set to `small` `large` or omitted | string | `default` | |

2
components/button/index.zh-CN.md
View File

@ -23,7 +23,7 @@ subtitle: 按钮
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | 设置按钮的图标类型 | string | - | |
| icon | 设置按钮的图标组件 | ReactNode | - | |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | |

70
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -36,9 +36,10 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -54,7 +55,7 @@ exports[`renders ./components/calendar/demo/basic.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>
</div>
</div>
@ -87,9 +88,10 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -105,7 +107,7 @@ exports[`renders ./components/calendar/demo/basic.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>
</div>
</div>
@ -1083,9 +1085,10 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1101,7 +1104,7 @@ exports[`renders ./components/calendar/demo/card.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>
</div>
</div>
@ -1134,9 +1137,10 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1152,7 +1156,7 @@ exports[`renders ./components/calendar/demo/card.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>
</div>
</div>
@ -2189,9 +2193,10 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -2207,7 +2212,7 @@ exports[`renders ./components/calendar/demo/customize-header.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>
</div>
</div>
@ -2244,9 +2249,10 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -2262,7 +2268,7 @@ exports[`renders ./components/calendar/demo/customize-header.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>
</div>
</div>
@ -3197,9 +3203,10 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -3215,7 +3222,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.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>
</div>
</div>
@ -3248,9 +3255,10 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -3266,7 +3274,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.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>
</div>
</div>
@ -4652,9 +4660,10 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -4670,7 +4679,7 @@ exports[`renders ./components/calendar/demo/select.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>
</div>
</div>
@ -4703,9 +4712,10 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -4721,7 +4731,7 @@ exports[`renders ./components/calendar/demo/select.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>
</div>
</div>

14
components/calendar/__tests__/__snapshots__/index.test.js.snap
View File

@ -36,9 +36,10 @@ exports[`Calendar Calendar should support locale 1`] = `
style="user-select: none;"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -54,7 +55,7 @@ exports[`Calendar Calendar should support locale 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>
</div>
</div>
@ -87,9 +88,10 @@ exports[`Calendar Calendar should support locale 1`] = `
style="user-select: none;"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -105,7 +107,7 @@ exports[`Calendar Calendar should support locale 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>
</div>
</div>

90
components/card/__tests__/__snapshots__/demo.test.js.snap
View File

@ -582,9 +582,10 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: setting"
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
>
<svg
aria-hidden="true"
@ -597,19 +598,20 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: edit"
<span
aria-label="edit"
class="anticon anticon-edit"
role="img"
>
<svg
aria-hidden="true"
@ -622,19 +624,20 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: ellipsis"
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
@ -647,10 +650,10 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
width="1em"
>
<path
d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -711,9 +714,10 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: setting"
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
>
<svg
aria-hidden="true"
@ -726,19 +730,20 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: edit"
<span
aria-label="edit"
class="anticon anticon-edit"
role="img"
>
<svg
aria-hidden="true"
@ -751,19 +756,20 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
width="1em"
>
<path
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
style="width:33.333333333333336%"
>
<span>
<i
aria-label="icon: ellipsis"
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
@ -776,10 +782,10 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
width="1em"
>
<path
d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -852,9 +858,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<span
class="ant-tabs-tab-prev-icon"
>
<i
aria-label="icon: left"
<span
aria-label="left"
class="anticon anticon-left ant-tabs-tab-prev-icon-target"
role="img"
>
<svg
aria-hidden="true"
@ -867,10 +874,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
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"
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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>
</span>
</span>
<span
@ -880,9 +887,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<span
class="ant-tabs-tab-next-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-tabs-tab-next-icon-target"
role="img"
>
<svg
aria-hidden="true"
@ -895,10 +903,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</span>
<div
@ -1012,9 +1020,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<span
class="ant-tabs-tab-prev-icon"
>
<i
aria-label="icon: left"
<span
aria-label="left"
class="anticon anticon-left ant-tabs-tab-prev-icon-target"
role="img"
>
<svg
aria-hidden="true"
@ -1027,10 +1036,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
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"
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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>
</span>
</span>
<span
@ -1040,9 +1049,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
<span
class="ant-tabs-tab-next-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-tabs-tab-next-icon-target"
role="img"
>
<svg
aria-hidden="true"
@ -1055,10 +1065,10 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</span>
<div

9
components/card/demo/loading.md
View File

@ -14,7 +14,8 @@ title:
Shows a loading indicator while the contents of the card is being fetched.
```jsx
import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
import { Skeleton, Switch, Card, Avatar } from 'antd';
import { Edit, Ellipsis, Setting } from '@ant-design/icons';
const { Meta } = Card;
@ -46,11 +47,7 @@ class App extends React.Component {
<Card
style={{ width: 300, marginTop: 16 }}
actions={[
<Icon type="setting" key="setting" />,
<Icon type="edit" key="edit" />,
<Icon type="ellipsis" key="ellipsis" />,
]}
actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
>
<Skeleton loading={loading} avatar active>
<Meta

9
components/card/demo/meta.md
View File

@ -14,7 +14,8 @@ title:
A Card that supports `cover`, `avatar`, `title` and `description`.
```jsx
import { Card, Icon, Avatar } from 'antd';
import { Card, Avatar } from 'antd';
import { Edit, Ellipsis, Setting } from '@ant-design/icons';
const { Meta } = Card;
@ -27,11 +28,7 @@ ReactDOM.render(
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[
<Icon type="setting" key="setting" />,
<Icon type="edit" key="edit" />,
<Icon type="ellipsis" key="ellipsis" />,
]}
actions={[<Setting key="setting" />, <Edit key="edit" />, <Ellipsis key="ellipsis" />]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}

111
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -17,9 +17,10 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -35,7 +36,7 @@ exports[`renders ./components/cascader/demo/basic.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>
`;
@ -56,9 +57,10 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -74,7 +76,7 @@ exports[`renders ./components/cascader/demo/change-on-select.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>
`;
@ -109,9 +111,10 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-cascader-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -125,13 +128,14 @@ exports[`renders ./components/cascader/demo/custom-render.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>
<i
aria-label="icon: down"
</span>
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -147,7 +151,7 @@ exports[`renders ./components/cascader/demo/custom-render.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>
`;
@ -181,9 +185,10 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-cascader-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -197,13 +202,14 @@ exports[`renders ./components/cascader/demo/default-value.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>
<i
aria-label="icon: down"
</span>
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -219,7 +225,7 @@ exports[`renders ./components/cascader/demo/default-value.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>
`;
@ -240,9 +246,10 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -258,7 +265,7 @@ exports[`renders ./components/cascader/demo/disabled-option.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>
`;
@ -279,9 +286,10 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -297,7 +305,7 @@ exports[`renders ./components/cascader/demo/fields-name.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>
`;
@ -318,9 +326,10 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -336,7 +345,7 @@ exports[`renders ./components/cascader/demo/hover.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>
`;
@ -357,9 +366,10 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -375,7 +385,7 @@ exports[`renders ./components/cascader/demo/lazy.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>
`;
@ -395,9 +405,10 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -413,7 +424,7 @@ exports[`renders ./components/cascader/demo/search.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>
`;
@ -435,9 +446,10 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -453,7 +465,7 @@ exports[`renders ./components/cascader/demo/size.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>
<br />
<br />
@ -473,9 +485,10 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -491,7 +504,7 @@ exports[`renders ./components/cascader/demo/size.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>
<br />
<br />
@ -511,9 +524,10 @@ exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -529,7 +543,7 @@ exports[`renders ./components/cascader/demo/size.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>
<br />
<br />
@ -554,9 +568,10 @@ exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: smile"
<span
aria-label="smile"
class="anticon anticon-smile ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -569,10 +584,10 @@ exports[`renders ./components/cascader/demo/suffix.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>
<span
class="ant-cascader-picker"

169
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -18,9 +18,10 @@ exports[`Cascader can be selected 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -33,10 +34,10 @@ exports[`Cascader can be selected 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
@ -48,9 +49,10 @@ exports[`Cascader can be selected 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -63,10 +65,10 @@ exports[`Cascader can be selected 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -82,9 +84,10 @@ exports[`Cascader can be selected 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -97,10 +100,10 @@ exports[`Cascader can be selected 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -127,9 +130,10 @@ exports[`Cascader can be selected 2`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -142,10 +146,10 @@ exports[`Cascader can be selected 2`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
@ -157,9 +161,10 @@ exports[`Cascader can be selected 2`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -172,10 +177,10 @@ exports[`Cascader can be selected 2`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -191,9 +196,10 @@ exports[`Cascader can be selected 2`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -206,10 +212,10 @@ exports[`Cascader can be selected 2`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -247,9 +253,10 @@ exports[`Cascader can be selected 3`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -262,10 +269,10 @@ exports[`Cascader can be selected 3`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
@ -277,9 +284,10 @@ exports[`Cascader can be selected 3`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -292,10 +300,10 @@ exports[`Cascader can be selected 3`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -311,9 +319,10 @@ exports[`Cascader can be selected 3`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -326,10 +335,10 @@ exports[`Cascader can be selected 3`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -377,9 +386,10 @@ exports[`Cascader popup correctly when panel is open 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -392,10 +402,10 @@ exports[`Cascader popup correctly when panel is open 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
@ -407,9 +417,10 @@ exports[`Cascader popup correctly when panel is open 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -422,10 +433,10 @@ exports[`Cascader popup correctly when panel is open 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -452,9 +463,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -467,10 +479,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
<li
@ -482,9 +494,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -497,10 +510,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -516,9 +529,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
<span
class="ant-cascader-menu-item-expand-icon"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
@ -531,10 +545,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
</span>
</li>
</ul>
@ -739,11 +753,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
"width": 0,
}
}
expandIcon={
<Icon
type="right"
/>
}
expandIcon={<Right />}
expandTrigger="click"
fieldNames={
Object {
@ -756,9 +766,8 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
<span
className="ant-cascader-menu-item-loading-icon"
>
<Icon
<Redo
spin={true}
type="redo"
/>
</span>
}
@ -1144,11 +1153,7 @@ exports[`Cascader should render not found content 1`] = `
"width": 0,
}
}
expandIcon={
<Icon
type="right"
/>
}
expandIcon={<Right />}
expandTrigger="click"
fieldNames={
Object {
@ -1161,9 +1166,8 @@ exports[`Cascader should render not found content 1`] = `
<span
className="ant-cascader-menu-item-loading-icon"
>
<Icon
<Redo
spin={true}
type="redo"
/>
</span>
}
@ -1472,11 +1476,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
"width": 0,
}
}
expandIcon={
<Icon
type="right"
/>
}
expandIcon={<Right />}
expandTrigger="click"
fieldNames={
Object {
@ -1489,9 +1489,8 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
<span
className="ant-cascader-menu-item-loading-icon"
>
<Icon
<Redo
spin={true}
type="redo"
/>
</span>
}
@ -1627,9 +1626,10 @@ exports[`Cascader support controlled mode 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-cascader-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -1643,13 +1643,14 @@ exports[`Cascader support controlled mode 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>
<i
aria-label="icon: down"
</span>
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -1665,6 +1666,6 @@ exports[`Cascader support controlled mode 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>
`;

5
components/cascader/demo/suffix.md
View File

@ -15,7 +15,8 @@ title:
Cascade selection box for selecting province/city/district.
```jsx
import { Cascader, Icon } from 'antd';
import { Cascader } from 'antd';
import { Smile } from '@ant-design/icons';
const options = [
{
@ -59,7 +60,7 @@ function onChange(value) {
ReactDOM.render(
<div>
<Cascader
suffixIcon={<Icon type="smile" />}
suffixIcon={<Smile />}
options={options}
onChange={onChange}
placeholder="Please select"

16
components/cascader/index.tsx
View File

@ -5,8 +5,9 @@ import classNames from 'classnames';
import omit from 'omit.js';
import KeyCode from 'rc-util/lib/KeyCode';
import { polyfill } from 'react-lifecycles-compat';
import { CloseCircleFilled, Down, Right, Redo } from '@ant-design/icons';
import Input from '../input';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import warning from '../_util/warning';
@ -453,12 +454,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
});
const clearIcon =
(allowClear && !disabled && value.length > 0) || state.inputValue ? (
<Icon
type="close-circle"
theme="filled"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
<CloseCircleFilled className={`${prefixCls}-picker-clear`} onClick={this.clearSelection} />
) : null;
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
@ -539,7 +535,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
})
) : (
<span className={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>
))) || <Icon type="down" className={arrowCls} />;
))) || <Down className={arrowCls} />;
const input = children || (
<span style={style} className={pickerCls}>
@ -565,11 +561,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
</span>
);
const expandIcon = <Icon type="right" />;
const expandIcon = <Right />;
const loadingIcon = (
<span className={`${prefixCls}-menu-item-loading-icon`}>
<Icon type="redo" spin />
<Redo spin />
</span>
);

5
components/collapse/Collapse.tsx
View File

@ -1,8 +1,9 @@
import * as React from 'react';
import RcCollapse from 'rc-collapse';
import classNames from 'classnames';
import { Right } from '@ant-design/icons';
import CollapsePanel from './CollapsePanel';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import animation from '../_util/openAnimation';
@ -48,7 +49,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
const icon = expandIcon ? (
expandIcon(panelProps)
) : (
<Icon type="right" rotate={panelProps.isActive ? 90 : undefined} />
<Right rotate={panelProps.isActive ? 90 : undefined} />
);
return React.isValidElement(icon)
? React.cloneElement(icon as any, {

199
components/collapse/__tests__/__snapshots__/demo.test.js.snap
View File

@ -14,9 +14,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -29,10 +30,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 1
</div>
</div>
@ -45,9 +46,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -60,10 +62,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 2
</div>
</div>
@ -76,9 +78,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
role="tab"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -91,10 +94,10 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 3
</div>
</div>
@ -114,9 +117,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -130,10 +134,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 1
</div>
<div
@ -161,9 +165,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -176,10 +181,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 2
</div>
</div>
@ -192,9 +197,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
role="button"
tabindex="-1"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -207,10 +213,10 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 3
</div>
</div>
@ -230,9 +236,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -246,10 +253,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 1
</div>
<div
@ -275,9 +282,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -290,10 +298,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 2
</div>
</div>
@ -306,9 +314,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -321,10 +330,10 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 3
</div>
</div>
@ -345,9 +354,10 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: caret-right"
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -364,7 +374,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
/>
</svg>
</i>
</span>
This is panel header 1
</div>
<div
@ -393,9 +403,10 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: caret-right"
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -411,7 +422,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
/>
</svg>
</i>
</span>
This is panel header 2
</div>
</div>
@ -425,9 +436,10 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: caret-right"
<span
aria-label="caret-right"
class="anticon anticon-caret-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -443,7 +455,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
/>
</svg>
</i>
</span>
This is panel header 3
</div>
</div>
@ -464,9 +476,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -480,17 +493,18 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 1
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
tabindex="-1"
>
<svg
@ -504,10 +518,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</span>
</div>
</div>
<div
@ -535,9 +549,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -550,17 +565,18 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 2
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
tabindex="-1"
>
<svg
@ -574,10 +590,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</span>
</div>
</div>
</div>
@ -590,9 +606,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -605,17 +622,18 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 3
<div
class="ant-collapse-extra"
>
<i
aria-label="icon: setting"
<span
aria-label="setting"
class="anticon anticon-setting"
role="img"
tabindex="-1"
>
<svg
@ -629,10 +647,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
</span>
</div>
</div>
</div>
@ -668,9 +686,10 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -686,7 +705,7 @@ exports[`renders ./components/collapse/demo/extra.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>
</div>
</div>
@ -706,9 +725,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -721,10 +741,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 1
</div>
</div>
@ -737,9 +757,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -752,10 +773,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 2
</div>
</div>
@ -768,9 +789,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -783,10 +805,10 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header 3
</div>
</div>
@ -806,9 +828,10 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -822,10 +845,10 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
This is panel header with arrow icon
</div>
<div

18
components/collapse/__tests__/__snapshots__/index.test.js.snap
View File

@ -13,9 +13,10 @@ exports[`Collapse should render extra node of panel 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -28,10 +29,10 @@ exports[`Collapse should render extra node of panel 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
header
<div
class="ant-collapse-extra"
@ -53,9 +54,10 @@ exports[`Collapse should render extra node of panel 1`] = `
role="button"
tabindex="0"
>
<i
aria-label="icon: right"
<span
aria-label="right"
class="anticon anticon-right ant-collapse-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -68,10 +70,10 @@ exports[`Collapse should render extra node of panel 1`] = `
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"
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 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 000-50.4z"
/>
</svg>
</i>
</span>
header
<div
class="ant-collapse-extra"

5
components/collapse/demo/custom.md
View File

@ -14,7 +14,8 @@ title:
Customize the background, border, margin styles and icon for each panel.
```jsx
import { Collapse, Icon } from 'antd';
import { Collapse } from 'antd';
import { CaretRight } from '@ant-design/icons';
const { Panel } = Collapse;
@ -36,7 +37,7 @@ ReactDOM.render(
<Collapse
bordered={false}
defaultActiveKey={['1']}
expandIcon={({ isActive }) => <Icon type="caret-right" rotate={isActive ? 90 : 0} />}
expandIcon={({ isActive }) => <CaretRight rotate={isActive ? 90 : 0} />}
>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<p>{text}</p>

6
components/collapse/demo/extra.md
View File

@ -14,7 +14,8 @@ title:
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
```jsx
import { Collapse, Icon, Select } from 'antd';
import { Collapse, Select } from 'antd';
import { Setting } from '@ant-design/icons';
const { Panel } = Collapse;
const { Option } = Select;
@ -30,8 +31,7 @@ const text = `
`;
const genExtra = () => (
<Icon
type="setting"
<Setting
onClick={event => {
// If you don't want click extra trigger collapse, you can prevent this:
event.stopPropagation();

18
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -52,9 +52,10 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
>
<li>
<span>
<i
aria-label="icon: like"
<span
aria-label="like"
class="anticon anticon-like"
role="img"
tabindex="-1"
>
<svg
@ -68,10 +69,10 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
width="1em"
>
<path
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
/>
</svg>
</i>
</span>
<span
style="padding-left:8px;cursor:auto"
>
@ -81,9 +82,10 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
</li>
<li>
<span>
<i
aria-label="icon: dislike"
<span
aria-label="dislike"
class="anticon anticon-dislike"
role="img"
tabindex="-1"
>
<svg
@ -97,10 +99,10 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
width="1em"
>
<path
d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"
d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 00-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 01-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0133.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0119.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0119.6 43c0 19.1-11 37.5-28.8 48.4z"
/>
</svg>
</i>
</span>
<span
style="padding-left:8px;cursor:auto"
>

19
components/comment/demo/basic.md
View File

@ -14,8 +14,9 @@ title:
A basic comment with author, avatar, time and actions.
```jsx
import { Comment, Icon, Tooltip, Avatar } from 'antd';
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { Dislike, Like, DislikeFilled, LikeFilled } from '@ant-design/icons';
class App extends React.Component {
state = {
@ -46,21 +47,17 @@ class App extends React.Component {
const actions = [
<span key="comment-basic-like">
<Tooltip title="Like">
<Icon
type="like"
theme={action === 'liked' ? 'filled' : 'outlined'}
onClick={this.like}
/>
{React.createElement(action === 'liked' ? LikeFilled : Like, {
onClick: this.like,
})}
</Tooltip>
<span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes}</span>
</span>,
<span key=' key="comment-basic-dislike"'>
<Tooltip title="Dislike">
<Icon
type="dislike"
theme={action === 'disliked' ? 'filled' : 'outlined'}
onClick={this.dislike}
/>
{React.createElement(action === 'liked' ? DislikeFilled : Dislike, {
onClick: this.dislike,
})}
</Tooltip>
<span style={{ paddingLeft: 8, cursor: 'auto' }}>{dislikes}</span>
</span>,

1200
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

File diff suppressed because it is too large Load Diff

4
components/date-picker/InputIcon.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { Calendar } from '@ant-design/icons';
export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCls: string }) {
const { suffixIcon, prefixCls } = props;
@ -15,6 +15,6 @@ export default function InputIcon(props: { suffixIcon: React.ReactNode; prefixCl
})
) : (
<span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />
))) || <Calendar className={`${prefixCls}-picker-icon`} />
);
}

10
components/date-picker/RangePicker.tsx
View File

@ -6,7 +6,8 @@ import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import shallowequal from 'shallowequal';
import Icon from '../icon';
import { CloseCircleFilled } from '@ant-design/icons';
import Tag from '../tag';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
@ -365,12 +366,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
const [startValue, endValue] = value as RangePickerValue;
const clearIcon =
!props.disabled && props.allowClear && value && (startValue || endValue) ? (
<Icon
type="close-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
theme="filled"
/>
<CloseCircleFilled className={`${prefixCls}-picker-clear`} onClick={this.clearSelection} />
) : null;
const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;

10
components/date-picker/WeekPicker.tsx
View File

@ -4,7 +4,8 @@ import { polyfill } from 'react-lifecycles-compat';
import Calendar from 'rc-calendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
import { CloseCircleFilled } from '@ant-design/icons';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import interopDefault from '../_util/interopDefault';
import InputIcon from './InputIcon';
@ -174,12 +175,7 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
);
const clearIcon =
!disabled && allowClear && this.state.value ? (
<Icon
type="close-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
theme="filled"
/>
<CloseCircleFilled className={`${prefixCls}-picker-clear`} onClick={this.clearSelection} />
) : null;
const inputIcon = <InputIcon suffixIcon={suffixIcon} prefixCls={prefixCls} />;

23
components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View File

@ -11,9 +11,10 @@ exports[`DatePicker disabled date 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -29,7 +30,7 @@ exports[`DatePicker disabled date 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
`;
@ -47,9 +48,10 @@ exports[`DatePicker prop locale should works 1`] = `
readonly=""
value="2000-01-01"
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -63,13 +65,14 @@ exports[`DatePicker prop locale should works 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>
<i
aria-label="icon: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -85,7 +88,7 @@ exports[`DatePicker prop locale should works 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
<div>
<div

7
components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap
View File

@ -27,9 +27,10 @@ exports[`RangePicker customize separator 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -45,7 +46,7 @@ exports[`RangePicker customize separator 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
`;

7
components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap
View File

@ -800,9 +800,10 @@ exports[`WeekPicker should support style prop 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -818,7 +819,7 @@ exports[`WeekPicker should support style prop 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
`;

303
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -12,9 +12,10 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -30,7 +31,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -44,9 +45,10 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -62,7 +64,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -92,9 +94,10 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -110,7 +113,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
<br />
@ -126,9 +129,10 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -144,7 +148,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -162,9 +166,10 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -180,7 +185,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<span
@ -209,9 +214,10 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -227,7 +233,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -246,9 +252,10 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
readonly=""
value="2015-06-06"
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -264,7 +271,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -279,9 +286,10 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
readonly=""
value="2015-06"
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -297,7 +305,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -329,9 +337,10 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
tabindex="-1"
value="2015-06-06"
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -347,7 +356,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -366,9 +375,10 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -384,7 +394,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -398,9 +408,10 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -416,7 +427,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -447,9 +458,10 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -465,7 +477,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -483,9 +495,10 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -501,7 +514,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<span
@ -515,9 +528,10 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -533,7 +547,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<span
@ -562,9 +576,10 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -580,7 +595,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
<span
@ -610,9 +625,10 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -628,7 +644,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
<span
@ -641,9 +657,10 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -659,7 +676,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
</div>
@ -677,9 +694,10 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
readonly=""
value="2015/01/01"
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -693,13 +711,14 @@ exports[`renders ./components/date-picker/demo/format.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>
<i
aria-label="icon: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -715,7 +734,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -729,9 +748,10 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
readonly=""
value="01/01/2015"
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -745,13 +765,14 @@ exports[`renders ./components/date-picker/demo/format.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>
<i
aria-label="icon: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -767,7 +788,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -781,9 +802,10 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
readonly=""
value="2015/01"
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -797,13 +819,14 @@ exports[`renders ./components/date-picker/demo/format.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>
<i
aria-label="icon: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -819,7 +842,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -849,9 +872,10 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
tabindex="-1"
value="2015/01/01"
/>
<i
aria-label="icon: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -865,13 +889,14 @@ exports[`renders ./components/date-picker/demo/format.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>
<i
aria-label="icon: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -887,7 +912,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -906,9 +931,10 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -924,7 +950,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -954,9 +980,10 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -972,7 +999,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -1006,9 +1033,10 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1024,7 +1052,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
<br />
@ -1055,9 +1083,10 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1073,7 +1102,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -1155,9 +1184,10 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1173,7 +1203,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -1187,9 +1217,10 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1205,7 +1236,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -1235,9 +1266,10 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1253,7 +1285,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
<br />
@ -1269,9 +1301,10 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1287,7 +1320,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>
@ -1306,9 +1339,10 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1324,7 +1358,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<span
@ -1338,9 +1372,10 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1356,7 +1391,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
</div>
@ -1374,9 +1409,10 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: smile"
<span
aria-label="smile"
class="anticon anticon-smile ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1389,10 +1425,10 @@ exports[`renders ./components/date-picker/demo/suffix.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>
</div>
</span>
<br />
@ -1406,9 +1442,10 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: smile"
<span
aria-label="smile"
class="anticon anticon-smile ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1421,10 +1458,10 @@ exports[`renders ./components/date-picker/demo/suffix.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>
</div>
</span>
<br />
@ -1454,9 +1491,10 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: smile"
<span
aria-label="smile"
class="anticon anticon-smile ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1469,10 +1507,10 @@ exports[`renders ./components/date-picker/demo/suffix.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>
</span>
<br />
@ -1488,9 +1526,10 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: smile"
<span
aria-label="smile"
class="anticon anticon-smile ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1503,10 +1542,10 @@ exports[`renders ./components/date-picker/demo/suffix.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>
</span>
<br />
@ -1615,9 +1654,10 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
readonly=""
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1633,7 +1673,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
<br />
@ -1664,9 +1704,10 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
tabindex="-1"
value=""
/>
<i
aria-label="icon: calendar"
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1682,7 +1723,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
</div>

64
components/date-picker/__tests__/__snapshots__/other.test.js.snap
View File

@ -985,9 +985,10 @@ exports[`Picker format by locale date 1`] = `
readonly=""
value="2000 年 1 月 1 日"
/>
<i
aria-label="图标: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -1001,13 +1002,14 @@ exports[`Picker format by locale date 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>
<i
aria-label="图标: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1023,7 +1025,7 @@ exports[`Picker format by locale date 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
`;
@ -1040,9 +1042,10 @@ exports[`Picker format by locale dateTime 1`] = `
readonly=""
value="2000 年 1 月 1 日 0 时 0 分 0 秒"
/>
<i
aria-label="图标: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -1056,13 +1059,14 @@ exports[`Picker format by locale dateTime 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>
<i
aria-label="图标: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1078,7 +1082,7 @@ exports[`Picker format by locale dateTime 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
`;
@ -1094,9 +1098,10 @@ exports[`Picker format by locale month 1`] = `
readonly=""
value="2000 年 1 月"
/>
<i
aria-label="图标: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -1110,13 +1115,14 @@ exports[`Picker format by locale month 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>
<i
aria-label="图标: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1132,7 +1138,7 @@ exports[`Picker format by locale month 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</div>
</span>
`;
@ -1150,9 +1156,10 @@ exports[`Picker format by locale week 1`] = `
readonly=""
value="2000 年 52 周"
/>
<i
aria-label="图标: close-circle"
<span
aria-label="close-circle"
class="anticon anticon-close-circle ant-calendar-picker-clear"
role="img"
tabindex="-1"
>
<svg
@ -1166,13 +1173,14 @@ exports[`Picker format by locale week 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>
<i
aria-label="图标: calendar"
</span>
<span
aria-label="calendar"
class="anticon anticon-calendar ant-calendar-picker-icon"
role="img"
>
<svg
aria-hidden="true"
@ -1188,7 +1196,7 @@ exports[`Picker format by locale week 1`] = `
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</i>
</span>
</span>
</span>
`;

8
components/date-picker/createPicker.tsx
View File

@ -5,7 +5,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import omit from 'omit.js';
import Icon from '../icon';
import { CloseCircleFilled, Calendar } from '@ant-design/icons';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
@ -202,11 +202,9 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
const clearIcon =
!props.disabled && props.allowClear && value ? (
<Icon
type="close-circle"
<CloseCircleFilled
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
theme="filled"
/>
) : null;
@ -220,7 +218,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
})
) : (
<span className={`${prefixCls}-picker-icon`}>{suffixIcon}</span>
))) || <Icon type="calendar" className={`${prefixCls}-picker-icon`} />;
))) || <Calendar className={`${prefixCls}-picker-icon`} />;
const dataOrAriaProps = getDataOrAriaProps(props);
const input = ({ value: inputValue }: { value: moment.Moment | null }) => (

5
components/date-picker/demo/suffix.md
View File

@ -15,9 +15,10 @@ title:
Basic use case. Users can select or input a date in panel.
```jsx
import { DatePicker, Icon } from 'antd';
import { DatePicker } from 'antd';
import { Smile } from '@ant-design/icons';
const smileIcon = <Icon type="smile" />;
const smileIcon = <Smile />;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
function onChange(date, dateString) {

45
components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
View File

@ -29,9 +29,10 @@ exports[`Drawer className is test_drawer 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -44,10 +45,10 @@ exports[`Drawer className is test_drawer 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
@ -125,9 +126,10 @@ exports[`Drawer destroyOnClose is true 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -140,10 +142,10 @@ exports[`Drawer destroyOnClose is true 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
@ -192,9 +194,10 @@ exports[`Drawer have a title 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -207,10 +210,10 @@ exports[`Drawer have a title 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
@ -254,9 +257,10 @@ exports[`Drawer render correctly 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -269,10 +273,10 @@ exports[`Drawer render 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
@ -315,9 +319,10 @@ exports[`Drawer render top drawer 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -330,10 +335,10 @@ exports[`Drawer render top drawer 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

9
components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
View File

@ -38,9 +38,10 @@ exports[`Drawer render correctly 1`] = `
aria-label="Close"
class="ant-drawer-close"
>
<i
aria-label="icon: close"
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
@ -53,10 +54,10 @@ exports[`Drawer render 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

8
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -19,9 +19,10 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
class="ant-btn ant-btn-primary"
type="button"
>
<i
aria-label="icon: plus"
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
@ -33,6 +34,7 @@ exports[`renders ./components/drawer/demo/form-in-drawer.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"
/>
@ -40,7 +42,7 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</i>
</span>
<span>
New account
</span>

5
components/drawer/demo/form-in-drawer.md
View File

@ -14,7 +14,8 @@ title:
Use a form in Drawer with a submit button.
```jsx
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon } from 'antd';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
import { Plus } from '@ant-design/icons';
const { Option } = Select;
@ -37,7 +38,7 @@ class DrawerForm extends React.Component {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
<Icon type="plus" /> New account
<Plus /> New account
</Button>
<Drawer
title="Create a new account"

5
components/drawer/index.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import RcDrawer from 'rc-drawer';
import createReactContext from '@ant-design/create-react-context';
import { Close } from '@ant-design/icons';
import classNames from 'classnames';
import omit from 'omit.js';
import warning from '../_util/warning';
import Icon from '../icon';
import { withConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { tuple } from '../_util/type';
@ -162,7 +163,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
closable && (
// eslint-disable-next-line react/button-has-type
<button onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
<Icon type="close" />
<Close />
</button>
)
);

76
components/dropdown/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,9 +6,10 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
href="#"
>
Hover me
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -24,7 +25,7 @@ exports[`renders ./components/dropdown/demo/basic.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>
</a>
`;
@ -56,9 +57,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
aria-label="icon: ellipsis"
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
@ -71,10 +73,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
width="1em"
>
<path
d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</i>
</span>
</button>
</div>
<div
@ -92,9 +94,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
aria-label="icon: user"
<span
aria-label="user"
class="anticon anticon-user"
role="img"
>
<svg
aria-hidden="true"
@ -107,10 +110,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.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>
</button>
</div>
<div
@ -130,9 +133,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
disabled=""
type="button"
>
<i
aria-label="icon: ellipsis"
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
@ -145,10 +149,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
width="1em"
>
<path
d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</i>
</span>
</button>
</div>
<button
@ -158,9 +162,10 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
<span>
Button
</span>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -176,7 +181,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.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>
`;
@ -187,9 +192,10 @@ exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
href="#"
>
Hover me, Click menu item
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -205,7 +211,7 @@ exports[`renders ./components/dropdown/demo/event.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>
</a>
`;
@ -215,9 +221,10 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
href="#"
>
Hover me
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -233,7 +240,7 @@ exports[`renders ./components/dropdown/demo/item.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>
</a>
`;
@ -243,9 +250,10 @@ exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
href="#"
>
Hover me
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -261,7 +269,7 @@ exports[`renders ./components/dropdown/demo/overlay-visible.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>
</a>
`;
@ -325,9 +333,10 @@ exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
href="#"
>
Cascading menu
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -343,7 +352,7 @@ exports[`renders ./components/dropdown/demo/sub-menu.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>
</a>
`;
@ -353,9 +362,10 @@ exports[`renders ./components/dropdown/demo/trigger.md correctly 1`] = `
href="#"
>
Click me
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down"
role="img"
>
<svg
aria-hidden="true"
@ -371,6 +381,6 @@ exports[`renders ./components/dropdown/demo/trigger.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>
</a>
`;

9
components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
View File

@ -12,9 +12,10 @@ exports[`DropdownButton should support href like Button 1`] = `
class="ant-btn ant-dropdown-trigger ant-btn-default"
type="button"
>
<i
aria-label="icon: ellipsis"
<span
aria-label="ellipsis"
class="anticon anticon-ellipsis"
role="img"
>
<svg
aria-hidden="true"
@ -27,10 +28,10 @@ exports[`DropdownButton should support href like Button 1`] = `
width="1em"
>
<path
d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</i>
</span>
</button>
</div>
`;

5
components/dropdown/demo/basic.md
View File

@ -14,7 +14,8 @@ title:
The most basic dropdown menu.
```jsx
import { Menu, Dropdown, Icon } from 'antd';
import { Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
const menu = (
<Menu>
@ -39,7 +40,7 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
Hover me <Down />
</a>
</Dropdown>,
mountNode,

13
components/dropdown/demo/dropdown-button.md
View File

@ -14,7 +14,8 @@ title:
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
```jsx
import { Menu, Dropdown, Button, Icon, message } from 'antd';
import { Menu, Dropdown, Button, message } from 'antd';
import { Down, User } from '@ant-design/icons';
function handleButtonClick(e) {
message.info('Click on left button.');
@ -29,15 +30,15 @@ function handleMenuClick(e) {
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">
<Icon type="user" />
<User />
1st menu item
</Menu.Item>
<Menu.Item key="2">
<Icon type="user" />
<User />
2nd menu item
</Menu.Item>
<Menu.Item key="3">
<Icon type="user" />
<User />
3rd item
</Menu.Item>
</Menu>
@ -48,7 +49,7 @@ ReactDOM.render(
<Dropdown.Button onClick={handleButtonClick} overlay={menu}>
Dropdown
</Dropdown.Button>
<Dropdown.Button overlay={menu} icon={<Icon type="user" />}>
<Dropdown.Button overlay={menu} icon={<User />}>
Dropdown
</Dropdown.Button>
<Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
@ -56,7 +57,7 @@ ReactDOM.render(
</Dropdown.Button>
<Dropdown overlay={menu}>
<Button>
Button <Icon type="down" />
Button <Down />
</Button>
</Dropdown>
</div>,

5
components/dropdown/demo/event.md
View File

@ -14,7 +14,8 @@ title:
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
```jsx
import { Menu, Dropdown, Icon, message } from 'antd';
import { Menu, Dropdown, message } from 'antd';
import { Down } from '@ant-design/icons';
const onClick = ({ key }) => {
message.info(`Click on item ${key}`);
@ -31,7 +32,7 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me, Click menu item <Icon type="down" />
Hover me, Click menu item <Down />
</a>
</Dropdown>,
mountNode,

5
components/dropdown/demo/item.md
View File

@ -14,7 +14,8 @@ title:
Divider and disabled menu item.
```jsx
import { Menu, Dropdown, Icon } from 'antd';
import { Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
const menu = (
<Menu>
@ -38,7 +39,7 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
Hover me <Down />
</a>
</Dropdown>,
mountNode,

5
components/dropdown/demo/overlay-visible.md
View File

@ -14,7 +14,8 @@ title:
The default is to close the menu when you click on menu items, this feature can be turned off.
```jsx
import { Menu, Dropdown, Icon } from 'antd';
import { Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
class OverlayVisible extends React.Component {
state = {
@ -46,7 +47,7 @@ class OverlayVisible extends React.Component {
visible={this.state.visible}
>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
Hover me <Down />
</a>
</Dropdown>
);

5
components/dropdown/demo/sub-menu.md
View File

@ -14,7 +14,8 @@ title:
The menu has multiple levels.
```jsx
import { Menu, Dropdown, Icon } from 'antd';
import { Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
const { SubMenu } = Menu;
@ -36,7 +37,7 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Cascading menu <Icon type="down" />
Cascading menu <Down />
</a>
</Dropdown>,
mountNode,

5
components/dropdown/demo/trigger.md
View File

@ -14,7 +14,8 @@ title:
The default trigger mode is `hover`, you can change it to `click`.
```jsx
import { Menu, Dropdown, Icon } from 'antd';
import { Menu, Dropdown } from 'antd';
import { Down } from '@ant-design/icons';
const menu = (
<Menu>
@ -32,7 +33,7 @@ const menu = (
ReactDOM.render(
<Dropdown overlay={menu} trigger={['click']}>
<a className="ant-dropdown-link" href="#">
Click me <Icon type="down" />
Click me <Down />
</a>
</Dropdown>,
mountNode,

5
components/dropdown/dropdown-button.tsx
View File

@ -1,11 +1,12 @@
import * as React from 'react';
import classNames from 'classnames';
import { Ellipsis } from '@ant-design/icons';
import Button from '../button';
import { ButtonHTMLType } from '../button/button';
import { ButtonGroupProps } from '../button/button-group';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import Dropdown, { DropDownProps } from './dropdown';
import Icon from '../icon';
const ButtonGroup = Button.Group;
@ -51,7 +52,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
placement,
getPopupContainer,
href,
icon = <Icon type="ellipsis" />,
icon = <Ellipsis />,
title,
...restProps
} = this.props;

5
components/dropdown/dropdown.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import RcDropdown from 'rc-dropdown';
import classNames from 'classnames';
import { Right } from '@ant-design/icons';
import DropdownButton from './dropdown-button';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
import Icon from '../icon';
import { tuple } from '../_util/type';
const Placements = tuple(
@ -100,7 +101,7 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
const expandIcon = (
<span className={`${prefixCls}-menu-submenu-arrow`}>
<Icon type="right" className={`${prefixCls}-menu-submenu-arrow-icon`} />
<Right className={`${prefixCls}-menu-submenu-arrow-icon`} />
</span>
);

61
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -121,9 +121,10 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -139,7 +140,7 @@ exports[`renders ./components/empty/demo/config-provider.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>
</div>
</div>
@ -167,9 +168,10 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
class="ant-select-arrow"
style="outline:none"
>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-select-arrow-icon"
role="img"
>
<svg
aria-hidden="true"
@ -185,7 +187,7 @@ exports[`renders ./components/empty/demo/config-provider.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>
</span>
@ -208,9 +210,10 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
type="text"
value=""
/>
<i
aria-label="icon: down"
<span
aria-label="down"
class="anticon anticon-down ant-cascader-picker-arrow"
role="img"
>
<svg
aria-hidden="true"
@ -226,7 +229,7 @@ exports[`renders ./components/empty/demo/config-provider.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>
<h3>
Transfer
@ -328,50 +331,14 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
disabled=""
type="button"
>
<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>
right
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled=""
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>
left
</button>
</div>
<div

4
components/empty/demo/config-provider.md
View File

@ -18,7 +18,6 @@ import {
ConfigProvider,
Switch,
Divider,
Icon,
TreeSelect,
Select,
Cascader,
@ -26,10 +25,11 @@ import {
Table,
List,
} from 'antd';
import { Smile } from '@ant-design/icons';
const customizeRenderEmpty = () => (
<div style={{ textAlign: 'center' }}>
<Icon type="smile" style={{ fontSize: 20 }} />
<Smile style={{ fontSize: 20 }} />
<p>Data Not Found</p>
</div>
);

28
components/form/FormItemInput.tsx
View File

@ -1,7 +1,8 @@
import * as React from 'react';
import classNames from 'classnames';
import { Loading, CloseCircleFilled, CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons';
import CSSMotion from 'rc-animate/lib/CSSMotion';
import Icon from '../icon';
import Col, { ColProps } from '../grid/col';
import { ValidateStatus } from './FormItem';
import { FormContext } from './context';
@ -24,19 +25,11 @@ export interface FormItemInputProps {
extra?: React.ReactNode;
}
function getIconType(validateStatus?: ValidateStatus) {
switch (validateStatus) {
case 'success':
return 'check-circle';
case 'warning':
return 'exclamation-circle';
case 'error':
return 'close-circle';
case 'validating':
return 'loading';
default:
return '';
}
const iconMap: { [key: string]: any } = {
success: CheckCircleFilled,
warning: ExclamationCircleFilled,
error: CloseCircleFilled,
validating: Loading,
}
const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
@ -64,11 +57,12 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
});
// Should provides additional icon if `hasFeedback`
const iconType = getIconType(validateStatus);
// const iconType = getIconType(validateStatus);
const iconNode = validateStatus && iconMap[validateStatus];
const icon =
hasFeedback && iconType ? (
hasFeedback && iconNode ? (
<span className={`${baseClassName}-children-icon`}>
<Icon type={iconType} theme={iconType === 'loading' ? 'outlined' : 'filled'} />
{iconNode}
</span>
) : null;

607
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

5
components/form/demo/advanced-search.md
View File

@ -18,7 +18,8 @@ Three columns layout is often used for advanced searching of data table.
Because the width of label is not fixed, you may need to adjust it by customizing its style.
```tsx
import { Form, Row, Col, Input, Button, Icon } from 'antd';
import { Form, Row, Col, Input, Button } from 'antd';
import { Down, Up } from '@ant-design/icons';
const AdvancedSearchForm = () => {
const [expand, setExpand] = React.useState(false);
@ -79,7 +80,7 @@ const AdvancedSearchForm = () => {
setExpand(!expand);
}}
>
Collapse <Icon type={expand ? 'up' : 'down'} />
Collapse {expand ? <Up /> : <Down />}
</a>
</Col>
</Row>

8
components/form/demo/dynamic-form-item.md
View File

@ -14,7 +14,8 @@ title:
Add or remove form items dynamically.
```jsx
import { Form, Input, Icon, Button } from 'antd';
import { Form, Input, Button } from 'antd';
import { MinusCircle, Plus } from '@ant-design/icons';
const formItemLayout = {
labelCol: {
@ -66,9 +67,8 @@ const DynamicFieldSet = () => {
<Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
</Form.Item>
{fields.length > 1 ? (
<Icon
<MinusCircle
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => {
remove(field.name);
}}
@ -84,7 +84,7 @@ const DynamicFieldSet = () => {
}}
style={{ width: '60%' }}
>
<Icon type="plus" /> Add field
<Plus /> Add field
</Button>
</Form.Item>
</div>

5
components/form/demo/form-context.md
View File

@ -14,7 +14,8 @@ title:
Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
```tsx
import { Form, Input, InputNumber, Modal, Icon, Button, Avatar, Typography } from 'antd';
import { Form, Input, InputNumber, Modal, Button, Avatar, Typography } from 'antd';
import { Smile } from '@ant-design/icons';
const layout = {
labelCol: { span: 8 },
@ -102,7 +103,7 @@ const Demo = () => {
</ul>
) : (
<Typography.Text className="ant-form-text" type="secondary">
( <Icon type="smile" /> No user yet. )
( <Smile /> No user yet. )
</Typography.Text>
);
}}

10
components/form/demo/inline-login.md
View File

@ -14,7 +14,8 @@ title:
Inline login form is often used in navigation bar.
```tsx
import { Form, Icon, Input, Button } from 'antd';
import { Form, Input, Button } from 'antd';
import { User, Lock } from '@ant-design/icons';
const HorizontalLoginForm = () => {
const [form] = Form.useForm();
@ -35,17 +36,14 @@ const HorizontalLoginForm = () => {
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>
<Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>

10
components/form/demo/normal-login.md
View File

@ -14,7 +14,8 @@ title:
Normal login form which can contain more elements.
```tsx
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { Form, Input, Button, Checkbox } from 'antd';
import { User, Lock } from '@ant-design/icons';
const NormalLoginForm = () => {
const onFinish = values => {
@ -32,17 +33,14 @@ const NormalLoginForm = () => {
name="username"
rules={[{ required: true, message: 'Please input your Username!' }]}
>
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="Username"
/>
<Input prefix={<User style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
>
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
prefix={<Lock style={{ color: 'rgba(0,0,0,.25)' }} />}
type="password"
placeholder="Password"
/>

4
components/form/demo/register.md
View File

@ -18,7 +18,6 @@ import {
Form,
Input,
Tooltip,
Icon,
Cascader,
Select,
Row,
@ -27,6 +26,7 @@ import {
Button,
AutoComplete,
} from 'antd';
import { QuestionCircle } from '@ant-design/icons';
const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;
@ -195,7 +195,7 @@ const RegistrationForm = () => {
<span>
Nickname&nbsp;
<Tooltip title="What do you want others to call you?">
<Icon type="question-circle-o" />
<QuestionCircle />
</Tooltip>
</span>
}

6
components/form/demo/validate-other.md
View File

@ -23,12 +23,12 @@ import {
Slider,
Button,
Upload,
Icon,
Rate,
Checkbox,
Row,
Col,
} from 'antd';
import { Upload as IconUpload, Inbox } from '@ant-design/icons';
const { Option } = Select;
@ -165,7 +165,7 @@ const Demo = () => {
>
<Upload name="logo" action="/upload.do" listType="picture">
<Button>
<Icon type="upload" /> Click to upload
<IconUpload /> Click to upload
</Button>
</Upload>
</Form.Item>
@ -175,7 +175,7 @@ const Demo = () => {
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
<Upload.Dragger name="files" action="/upload.do">
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
<Inbox />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">Support for a single or bulk upload.</p>

56
components/icon/IconFont.tsx
View File

@ -1,56 +0,0 @@
import * as React from 'react';
import Icon, { IconProps } from './index';
const customCache = new Set<string>();
export interface CustomIconOptions {
scriptUrl?: string;
extraCommonProps?: { [key: string]: any };
}
export default function create(options: CustomIconOptions = {}): React.SFC<IconProps> {
const { scriptUrl, extraCommonProps = {} } = options;
/**
* DOM API required.
* Make sure in browser environment.
* The Custom Icon will create a <script/>
* that loads SVG symbols and insert the SVG Element into the document body.
*/
if (
typeof document !== 'undefined' &&
typeof window !== 'undefined' &&
typeof document.createElement === 'function' &&
typeof scriptUrl === 'string' &&
scriptUrl.length &&
!customCache.has(scriptUrl)
) {
const script = document.createElement('script');
script.setAttribute('src', scriptUrl);
script.setAttribute('data-namespace', scriptUrl);
customCache.add(scriptUrl);
document.body.appendChild(script);
}
const Iconfont: React.SFC<IconProps> = props => {
const { type, children, ...restProps } = props;
// component > children > type
let content = null;
if (props.type) {
content = <use xlinkHref={`#${type}`} />;
}
if (children) {
content = children;
}
return (
<Icon {...restProps} {...extraCommonProps}>
{content}
</Icon>
);
};
Iconfont.displayName = 'Iconfont';
return Iconfont;
}

410
components/icon/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,410 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon \`component\` prop can access to svg defs if has children 1`] = `
<i
class="anticon my-home-icon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
width="1em"
>
<title>
Cool Home
</title>
<path
d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'"
/>
</svg>
</i>
`;
exports[`Icon should give warning and render <i>{null}</i> 1`] = `
<i
class="anticon"
/>
`;
exports[`Icon should render to a <i class="xxx"><svg>...</svg></i> 1`] = `
<i
aria-label="icon: message"
class="anticon anticon-message my-icon-classname"
>
<svg
aria-hidden="true"
class=""
data-icon="message"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"
/>
</svg>
</i>
`;
exports[`Icon should support basic usage 1`] = `
<div>
<i
aria-label="icon: home"
class="anticon anticon-home"
>
<svg
aria-hidden="true"
class=""
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
<i
aria-label="icon: setting"
class="anticon anticon-setting"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512.5 390.6c-29.9 0-57.9 11.6-79.1 32.8-21.1 21.2-32.8 49.2-32.8 79.1 0 29.9 11.7 57.9 32.8 79.1 21.2 21.1 49.2 32.8 79.1 32.8 29.9 0 57.9-11.7 79.1-32.8 21.1-21.2 32.8-49.2 32.8-79.1 0-29.9-11.7-57.9-32.8-79.1a110.96 110.96 0 0 0-79.1-32.8zm412.3 235.5l-65.4-55.9c3.1-19 4.7-38.4 4.7-57.7s-1.6-38.8-4.7-57.7l65.4-55.9a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a442.5 442.5 0 0 0-79.6-137.7l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.2 28.9c-30-24.6-63.4-44-99.6-57.5l-15.7-84.9a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52-9.4-106.8-9.4-158.8 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.3a353.44 353.44 0 0 0-98.9 57.3l-81.8-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a445.93 445.93 0 0 0-79.6 137.7l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.2 56.5c-3.1 18.8-4.6 38-4.6 57 0 19.2 1.5 38.4 4.6 57l-66 56.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.3 44.8 96.8 79.6 137.7l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.8-29.1c29.8 24.5 63 43.9 98.9 57.3l15.8 85.3a32.05 32.05 0 0 0 25.8 25.7l2.7.5a448.27 448.27 0 0 0 158.8 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-84.9c36.2-13.6 69.6-32.9 99.6-57.5l81.2 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.5-87.4 79.6-137.7l.9-2.6c4.3-12.4.6-26.3-9.5-35zm-412.3 52.2c-97.1 0-175.8-78.7-175.8-175.8s78.7-175.8 175.8-175.8 175.8 78.7 175.8 175.8-78.7 175.8-175.8 175.8z"
/>
</svg>
</i>
<i
aria-label="icon: smile"
class="anticon anticon-smile"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
<i
aria-label="icon: sync"
class="anticon anticon-sync"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="sync"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2z"
/>
</svg>
</i>
<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>
</div>
`;
exports[`Icon should support config global two-tone primary color 1`] = `
<i
aria-label="icon: check-circle"
class="anticon anticon-check-circle"
>
<svg
aria-hidden="true"
class=""
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="#1890ff"
/>
<path
d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm193.4 225.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.3 0 19.9 5 25.9 13.3l71.2 98.8 157.2-218c6-8.4 15.7-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.4 12.7z"
fill="#e6f7ff"
/>
<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"
fill="#1890ff"
/>
</svg>
</i>
`;
exports[`Icon should support older usage 1`] = `
<div>
<i
aria-label="icon: home-o"
class="anticon anticon-home-o"
>
<svg
aria-hidden="true"
class=""
data-icon="home"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
<i
aria-label="icon: setting-fill"
class="anticon anticon-setting-fill"
>
<svg
aria-hidden="true"
class=""
data-icon="setting"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
/>
</svg>
</i>
<i
aria-label="icon: smile-o"
class="anticon anticon-smile-o"
>
<svg
aria-hidden="true"
class=""
data-icon="smile"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
</svg>
</i>
<i
aria-label="icon: check-circle-twotone"
class="anticon anticon-check-circle-twotone"
>
<svg
aria-hidden="true"
class=""
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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"
/>
<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>
</div>
`;
exports[`Icon should support pass svg paths as children 1`] = `
<i
class="anticon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 24 24"
width="1em"
>
<title>
Cool Home
</title>
<path
d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
/>
</svg>
</i>
`;
exports[`Icon should support svg react component 1`] = `
<i
class="anticon my-home-icon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
width="1em"
>
<title>
Cool Home
</title>
<path
d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'"
/>
</svg>
</i>
`;
exports[`Icon should support two-tone icon 1`] = `
<i
aria-label="icon: check-circle"
class="anticon anticon-check-circle"
>
<svg
aria-hidden="true"
class=""
data-icon="check-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="#f5222d"
/>
<path
d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm193.4 225.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.3 0 19.9 5 25.9 13.3l71.2 98.8 157.2-218c6-8.4 15.7-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.4 12.7z"
fill="#fff1f0"
/>
<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"
fill="#f5222d"
/>
</svg>
</i>
`;
exports[`Icon support render svg as component 1`] = `
<i
class="anticon"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
/>
</i>
`;
exports[`Icon.createFromIconfontCN() should support iconfont.cn 1`] = `
<div
class="icons-list"
>
<i
class="anticon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
width="1em"
>
<use
href="#icon-tuichu"
/>
</svg>
</i>
<i
class="anticon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
width="1em"
>
<use
href="#icon-facebook"
/>
</svg>
</i>
<i
class="anticon"
>
<svg
aria-hidden="true"
class=""
fill="currentColor"
focusable="false"
height="1em"
width="1em"
>
<use
href="#icon-twitter"
/>
</svg>
</i>
</div>
`;

251
components/icon/__tests__/index.test.js
View File

@ -1,251 +0,0 @@
import React from 'react';
import { render, mount } from 'enzyme';
import ReactIcon from '@ant-design/icons-react';
import Icon from '..';
import Tooltip from '../../tooltip';
import { getThemeFromTypeName, withThemeSuffix } from '../utils';
describe('Icon', () => {
it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
const wrapper = render(<Icon type="message" className="my-icon-classname" />);
expect(wrapper).toMatchSnapshot();
});
it('should support basic usage', () => {
const wrapper = render(
<div>
<Icon type="home" />
<Icon type="setting" theme="filled" />
<Icon type="smile" theme="outlined" />
<Icon type="sync" spin />
<Icon type="loading" />
</div>,
);
expect(wrapper).toMatchSnapshot();
});
it('should support older usage', () => {
const wrapper = render(
<div>
<Icon type="home-o" />
<Icon type="setting-fill" />
<Icon type="smile-o" />
<Icon type="check-circle-twotone" />
</div>,
);
expect(wrapper).toMatchSnapshot();
});
it('should support two-tone icon', () => {
const wrapper = render(<Icon type="check-circle" theme="twoTone" twoToneColor="#f5222d" />);
expect(wrapper).toMatchSnapshot();
});
it('should support config global two-tone primary color', () => {
const colors = ReactIcon.getTwoToneColors();
Icon.setTwoToneColor('#1890ff');
expect(Icon.getTwoToneColor()).toBe('#1890ff');
const wrapper = render(<Icon type="check-circle" theme="twoTone" />);
expect(wrapper).toMatchSnapshot();
ReactIcon.setTwoToneColors(colors);
});
it('should support pass svg paths as children', () => {
const wrapper = render(
<Icon viewBox="0 0 24 24">
<title>Cool Home</title>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</Icon>,
);
expect(wrapper).toMatchSnapshot();
});
it('should give warning and render <i>{null}</i>', () => {
const wrapper = render(<Icon viewBox="0 0 24 24" />);
expect(wrapper).toMatchSnapshot();
});
it('should support wrapped by Tooltip', () => {
const onVisibleChange = jest.fn();
const wrapper = mount(
<Tooltip
title="xxxxx"
mouseEnterDelay={0}
mouseLeaveDelay={0}
onVisibleChange={onVisibleChange}
>
<Icon type="home" />
</Tooltip>,
);
expect(wrapper.find('i')).toHaveLength(1);
const icon = wrapper.find('i').at(0);
icon.simulate('mouseenter');
expect(onVisibleChange).toHaveBeenCalledWith(true);
expect(wrapper.instance().tooltip.props.visible).toBe(true);
icon.simulate('mouseleave');
expect(onVisibleChange).toHaveBeenCalledWith(false);
expect(wrapper.instance().tooltip.props.visible).toBe(false);
});
it('should support custom usage of children', () => {
expect(() => {
render(<Icon type="custom">&E648</Icon>);
}).not.toThrow();
});
it('support render svg as component', () => {
const renderSvg = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" />
);
const SvgIcon = props => <Icon component={renderSvg} {...props} />;
expect(mount(<SvgIcon />).render()).toMatchSnapshot();
});
describe('warning on conflicting theme', () => {
let errorSpy;
beforeEach(() => {
errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
});
afterEach(() => {
errorSpy.mockRestore();
});
it('does not warn', () => {
mount(<Icon type="clock-circle-o" theme="outlined" />);
expect(errorSpy).not.toHaveBeenCalled();
});
it('warns', () => {
mount(<Icon type="clock-circle-o" theme="filled" />);
expect(errorSpy).toHaveBeenCalledWith(
"Warning: [antd: Icon] The icon name 'clock-circle-o' already specify a theme 'outlined', the 'theme' prop 'filled' will be ignored.",
);
});
});
describe('`component` prop', () => {
it('can access to svg defs if has children', () => {
const wrapper = render(
<Icon
className="my-home-icon"
component={svgProps => (
<svg {...svgProps}>
<defs>
<linearGradient id="gradient">
<stop offset="20%" stopColor="#39F" />
<stop offset="90%" stopColor="#F3F" />
</linearGradient>
</defs>
{React.Children.map(svgProps.children, child =>
React.cloneElement(
child,
child.type === 'path' ? { fill: 'scriptUrl(#gradient)' } : {},
),
)}
</svg>
)}
>
<title>Cool Home</title>
<path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
</Icon>,
);
expect(wrapper).toMatchSnapshot();
});
});
it('should support svg react component', () => {
const SvgComponent = props => (
<svg viewBox="0 0 24 24" {...props}>
<title>Cool Home</title>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
);
const wrapper = render(
<Icon className="my-home-icon" component={SvgComponent}>
<title>Cool Home</title>
<path d="'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'" />
</Icon>,
);
expect(wrapper).toMatchSnapshot();
});
});
describe('Icon.createFromIconfontCN()', () => {
const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
it('should support iconfont.cn', () => {
const wrapper = render(
<div className="icons-list">
<IconFont type="icon-tuichu" />
<IconFont type="icon-facebook" />
<IconFont type="icon-twitter" />
</div>,
);
expect(wrapper).toMatchSnapshot();
});
});
describe('utils', () => {
it('getThemeFromTypeName() should work', () => {
const testCases = [
'check-circle',
'check-circle-o',
'check-circle-fill',
'check-circle-twotone',
];
const result = testCases.map(type => getThemeFromTypeName(type));
expect(result).toEqual([null, 'outlined', 'filled', 'twoTone']);
});
it('withThemeSuffix() should work', () => {
const testCases = [
{ type: 'home', theme: 'filled' },
{ type: 'home', theme: 'outlined' },
{ type: 'home', theme: 'twoTone' },
{ type: 'home', theme: 'This-is-the-secret' },
{ type: 'home-o', theme: 'filled' },
{ type: 'home-fill', theme: 'outlined' },
{ type: 'home-o', theme: 'twoTone' },
{ type: 'home-o', theme: 'This-is-the-secret' },
];
const result = testCases.map(({ type, theme }) => withThemeSuffix(type, theme));
expect(result).toEqual([
'home-fill',
'home-o',
'home-twotone',
'home',
'home-o-fill',
'home-fill-o',
'home-o-twotone',
'home-o',
]);
});
it('should report an error when there are deprecated typos in icon names', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Icon type="interation" />);
expect(errorSpy).toHaveBeenLastCalledWith(
"Warning: [antd: Icon] Icon 'interation' was a typo and is now deprecated, please use 'interaction' instead.",
);
render(<Icon type="cross" />);
expect(errorSpy).toHaveBeenLastCalledWith(
"Warning: [antd: Icon] Icon 'cross' was a typo and is now deprecated, please use 'close' instead.",
);
render(<Icon type="canlendar" theme="twoTone" />);
expect(errorSpy).toHaveBeenLastCalledWith(
"Warning: [antd: Icon] Icon 'canlendar' was a typo and is now deprecated, please use 'calendar' instead.",
);
render(<Icon type="colum-height" />);
expect(errorSpy).toHaveBeenLastCalledWith(
"Warning: [antd: Icon] Icon 'colum-height' was a typo and is now deprecated, please use 'column-height' instead.",
);
expect(errorSpy).toHaveBeenCalledTimes(4);
errorSpy.mockRestore();
});
});

18
components/icon/demo/basic.md
View File

@ -7,23 +7,23 @@ title:
## zh-CN
使用 `<Icon />` 标签声明组件，指定图标对应的 `type` 属性。可以通过 `theme` 属性来设置不同的主题风格的图标，也可以通过设置 `spin` 属性来实现动画旋转效果。
通过 `@ant-design/icons` 引用 Icon 组件，不同主题的 Icon 组件名为图标名加主题做为后缀，也可以通过设置 `spin` 属性来实现动画旋转效果。
## en-US
Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specific the `spin` property to show spinning animation and the `theme` property to switch different themes.
Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specific the `spin` property to show spinning animation.
```jsx
import { Icon } from 'antd';
import { Home, SettingFilled, Smile, Sync, Loading } from '@ant-design/icons';
ReactDOM.render(
<div className="icons-list">
<Icon type="home" />
<Icon type="setting" theme="filled" />
<Icon type="smile" theme="outlined" />
<Icon type="sync" spin />
<Icon type="smile" rotate={180} />
<Icon type="loading" />
<Home />
<SettingFilled />
<Smile />
<Sync spin />
<Smile rotate={180} />
<Loading />
</div>,
mountNode,
);

2
components/icon/demo/custom.md
View File

@ -14,7 +14,7 @@ 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 'antd';
import Icon from '@ant-design/icons';
const HeartSvg = () => (
<svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">

4
components/icon/demo/iconfont.md
View File

@ -14,9 +14,9 @@ title:
If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
```jsx
import { Icon } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
const IconFont = Icon.createFromIconfontCN({
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

319
components/icon/demo/old-icons.md
View File

@ -1,319 +0,0 @@
---
order: 10
debug: true
title:
zh-CN: 老版图标
en-US: Test old icons
---
## zh-CN
测试 3.9.0 之前的老图标。
## en-US
Test old icons before `3.9.0`.
```jsx
import { Icon } from 'antd';
const icons = [
'step-backward',
'step-forward',
'fast-backward',
'fast-forward',
'shrink',
'arrows-alt',
'down',
'up',
'left',
'right',
'caret-up',
'caret-down',
'caret-left',
'caret-right',
'up-circle',
'down-circle',
'left-circle',
'right-circle',
'up-circle-o',
'down-circle-o',
'right-circle-o',
'left-circle-o',
'double-right',
'double-left',
'verticle-left',
'verticle-right',
'forward',
'backward',
'rollback',
'enter',
'retweet',
'swap',
'swap-left',
'swap-right',
'arrow-up',
'arrow-down',
'arrow-left',
'arrow-right',
'play-circle',
'play-circle-o',
'up-square',
'down-square',
'left-square',
'right-square',
'up-square-o',
'down-square-o',
'left-square-o',
'right-square-o',
'login',
'logout',
'menu-fold',
'menu-unfold',
'question',
'question-circle-o',
'question-circle',
'plus',
'plus-circle-o',
'plus-circle',
'pause',
'pause-circle-o',
'pause-circle',
'minus',
'minus-circle-o',
'minus-circle',
'plus-square',
'plus-square-o',
'minus-square',
'minus-square-o',
'info',
'info-circle-o',
'info-circle',
'exclamation',
'exclamation-circle-o',
'exclamation-circle',
'close',
'cross',
'close-circle',
'close-circle-o',
'close-square',
'close-square-o',
'check',
'check-circle',
'check-circle-o',
'check-square',
'check-square-o',
'clock-circle-o',
'clock-circle',
'warning',
'lock',
'unlock',
'area-chart',
'pie-chart',
'bar-chart',
'dot-chart',
'bars',
'book',
'calendar',
'cloud',
'cloud-download',
'code',
'code-o',
'copy',
'credit-card',
'delete',
'desktop',
'download',
'edit',
'ellipsis',
'file',
'file-text',
'file-unknown',
'file-pdf',
'file-word',
'file-excel',
'file-jpg',
'file-ppt',
'file-markdown',
'file-add',
'folder',
'folder-open',
'folder-add',
'hdd',
'frown',
'frown-o',
'meh',
'meh-o',
'smile',
'smile-o',
'inbox',
'laptop',
'appstore-o',
'appstore',
'line-chart',
'link',
'mail',
'mobile',
'notification',
'paper-clip',
'picture',
'poweroff',
'reload',
'search',
'setting',
'share-alt',
'shopping-cart',
'tablet',
'tag',
'tag-o',
'tags',
'tags-o',
'to-top',
'upload',
'user',
'video-camera',
'home',
'loading',
'loading-3-quarters',
'cloud-upload-o',
'cloud-download-o',
'cloud-upload',
'cloud-o',
'star-o',
'star',
'heart-o',
'heart',
'environment',
'environment-o',
'eye',
'eye-o',
'camera',
'camera-o',
'save',
'team',
'solution',
'phone',
'filter',
'exception',
'export',
'customer-service',
'qrcode',
'scan',
'like',
'like-o',
'dislike',
'dislike-o',
'message',
'pay-circle',
'pay-circle-o',
'calculator',
'pushpin',
'pushpin-o',
'bulb',
'select',
'switcher',
'rocket',
'bell',
'disconnect',
'database',
'compass',
'barcode',
'hourglass',
'key',
'flag',
'layout',
'printer',
'sound',
'usb',
'skin',
'tool',
'sync',
'wifi',
'car',
'schedule',
'user-add',
'user-delete',
'usergroup-add',
'usergroup-delete',
'man',
'woman',
'shop',
'gift',
'idcard',
'medicine-box',
'red-envelope',
'coffee',
'copyright',
'trademark',
'safety',
'wallet',
'bank',
'trophy',
'contacts',
'global',
'shake',
'api',
'fork',
'dashboard',
'form',
'table',
'profile',
'android',
'android-o',
'apple',
'apple-o',
'windows',
'windows-o',
'ie',
'chrome',
'github',
'aliwangwang',
'aliwangwang-o',
'dingding',
'dingding-o',
'weibo-square',
'weibo-circle',
'taobao-circle',
'html5',
'weibo',
'twitter',
'wechat',
'youtube',
'alipay-circle',
'taobao',
'skype',
'qq',
'medium-workmark',
'gitlab',
'medium',
'linkedin',
'google-plus',
'dropbox',
'facebook',
'codepen',
'amazon',
'google',
'codepen-circle',
'alipay',
'ant-design',
'aliyun',
'zhihu',
'slack',
'slack-square',
'behance',
'behance-square',
'dribbble',
'dribbble-square',
'instagram',
'yuque',
];
ReactDOM.render(
<div>
{icons.map(icon => (
<Icon key={icon} type={icon} />
))}
</div>,
mountNode,
);
```

12
components/icon/demo/two-tone.md
View File

@ -7,20 +7,20 @@ title:
## zh-CN
可以通过设置 `theme` 属性为 `twoTone` 来渲染双色图标，并且可以设置主题色。
双色图标可以通过 `twoToneColor` 属性设置主题色。
## en-US
Specific them property `theme` to `twoTone` to render two-tone icons. You can also set the primary color.
You can set `twoToneColor` prop to specific primary color for two-tone icons.
```jsx
import { Icon } from 'antd';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
ReactDOM.render(
<div className="icons-list">
<Icon type="smile" theme="twoTone" />
<Icon type="heart" theme="twoTone" twoToneColor="#eb2f96" />
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<SmileTwoTone />
<HeartTwoTone twoToneColor="#eb2f96" />
<CheckCircleTwoTone twoToneColor="#52c41a" />
</div>,
mountNode,
);

46
components/icon/index.en-US.md
View File

@ -16,17 +16,35 @@ ReactDOM.render(<IconDisplay />, mountNode);
## API
### Common Icon
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| type | Type of the ant design icon | string | - | |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| theme | Theme of the ant design icon | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' | 3.9.0 |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - | 3.9.0 |
### SVG icons
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
```jsx
import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
<Star />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />
```
### Custom Icon
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
| component | The component used for the root node. | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
### About SVG icons
We introduced SVG icons in `3.9.0` version replacing font icons which brings benefits below:
@ -44,7 +62,9 @@ More discussion of SVG icon reference to [#10353](https://github.com/ant-design/
The properties `theme`, `component` and `twoToneColor` are added in `3.9.0`. The best practice is to pass the property `theme` to every `<Icon />` components.
```jsx
<Icon type="star" theme="filled" />
import { Message } from '@ant-design/icons';
<Message style={{ fontSize: '16px', color: '#08c' }} />;
```
All the icons will render to `<svg>`. You can still set `style` and `className` for size and color of icons.
@ -55,11 +75,13 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
### Set TwoTone Color
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color.
```jsx
Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96
import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96
```
### Custom Font Icon
@ -69,8 +91,10 @@ We added a `createFromIconfontCN` function to help developer using their own ico
> This method is specified for [iconfont.cn](http://iconfont.cn/).
```js
const MyIcon = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
@ -113,7 +137,7 @@ You can import SVG icon as an react component by using `webpack` and [`@svgr/web
```
```jsx
import { Icon } from 'antd';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
ReactDOM.render(<Icon component={MessageSvg} />, mountNode);

222
components/icon/index.tsx
View File

@ -1,224 +1,8 @@
/* eslint-disable camelcase */
import * as React from 'react';
import classNames from 'classnames';
import * as allIcons from '@ant-design/icons/lib/dist';
import ReactIcon from '@ant-design/icons-react';
import createFromIconfontCN from './IconFont';
import {
svgBaseProps,
withThemeSuffix,
removeTypeTheme,
getThemeFromTypeName,
alias,
} from './utils';
import warning from '../_util/warning';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
// Initial setting
ReactIcon.add(...Object.keys(allIcons).map(key => (allIcons as any)[key]));
setTwoToneColor('#1890ff');
let defaultTheme: ThemeType = 'outlined';
let dangerousTheme: ThemeType | undefined;
function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
warning(
false,
'Icon',
`You are using the unstable method 'Icon.unstable_ChangeThemeOfAllIconsDangerously', ` +
`make sure that all the icons with theme '${theme}' display correctly.`,
);
dangerousTheme = theme;
}
function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
warning(
false,
'Icon',
`You are using the unstable method 'Icon.unstable_ChangeDefaultThemeOfIcons', ` +
`make sure that all the icons with theme '${theme}' display correctly.`,
);
defaultTheme = theme;
}
export interface TransferLocale {
icon: string;
}
export interface CustomIconComponentProps {
width: string | number;
height: string | number;
fill: string;
viewBox?: string;
className?: string;
style?: React.CSSProperties;
spin?: boolean;
rotate?: number;
['aria-hidden']?: React.AriaAttributes['aria-hidden'];
}
export type ThemeType = 'filled' | 'outlined' | 'twoTone';
export interface IconProps {
tabIndex?: number;
type?: string;
className?: string;
theme?: ThemeType;
title?: string;
onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
onClick?: React.MouseEventHandler<HTMLElement>;
component?: React.ComponentType<CustomIconComponentProps>;
twoToneColor?: string;
viewBox?: string;
spin?: boolean;
rotate?: number;
style?: React.CSSProperties;
prefixCls?: string;
role?: string;
}
export interface IconComponent<P> extends React.SFC<P> {
createFromIconfontCN: typeof createFromIconfontCN;
getTwoToneColor: typeof getTwoToneColor;
setTwoToneColor: typeof setTwoToneColor;
unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
}
const Icon: IconComponent<IconProps> = props => {
const {
// affect outter <i>...</i>
className,
// affect inner <svg>...</svg>
type,
component: Component,
viewBox,
spin,
rotate,
tabIndex,
onClick,
// children
children,
// other
theme, // default to outlined
twoToneColor,
...restProps
} = props;
warning(
Boolean(type || Component || children),
'Icon',
'Should have `type` prop or `component` prop or `children`.',
);
const classString = classNames(
{
[`anticon`]: true,
[`anticon-${type}`]: Boolean(type),
},
className,
);
const svgClassString = classNames({
[`anticon-spin`]: !!spin || type === 'loading',
});
let innerNode: React.ReactNode;
const svgStyle = rotate
? {
msTransform: `rotate(${rotate}deg)`,
transform: `rotate(${rotate}deg)`,
}
: undefined;
const innerSvgProps: CustomIconComponentProps = {
...svgBaseProps,
className: svgClassString,
style: svgStyle,
viewBox,
};
if (!viewBox) {
delete innerSvgProps.viewBox;
}
// component > children > type
if (Component) {
innerNode = <Component {...innerSvgProps}>{children}</Component>;
}
if (children) {
warning(
Boolean(viewBox) ||
(React.Children.count(children) === 1 &&
React.isValidElement(children) &&
React.Children.only(children).type === 'use'),
'Icon',
'Make sure that you provide correct `viewBox`' +
' prop (default `0 0 1024 1024`) to the icon.',
);
innerNode = (
<svg {...innerSvgProps} viewBox={viewBox}>
{children}
</svg>
);
}
if (typeof type === 'string') {
let computedType = type;
if (theme) {
const themeInName = getThemeFromTypeName(type);
warning(
!themeInName || theme === themeInName,
'Icon',
`The icon name '${type}' already specify a theme '${themeInName}',` +
` the 'theme' prop '${theme}' will be ignored.`,
);
}
computedType = withThemeSuffix(
removeTypeTheme(alias(computedType)),
dangerousTheme || theme || defaultTheme,
);
innerNode = (
<ReactIcon
className={svgClassString}
type={computedType}
primaryColor={twoToneColor}
style={svgStyle}
/>
);
}
let iconTabIndex = tabIndex;
if (iconTabIndex === undefined && onClick) {
iconTabIndex = -1;
}
return (
<LocaleReceiver componentName="Icon">
{(locale: TransferLocale) => (
<i
aria-label={type && `${locale.icon}: ${type}`}
{...restProps}
tabIndex={iconTabIndex}
onClick={onClick}
className={classString}
>
{innerNode}
</i>
)}
</LocaleReceiver>
);
const Icon = () => {
warning(false, 'Icon', 'Empty Icon');
return null;
};
Icon.createFromIconfontCN = createFromIconfontCN;
Icon.getTwoToneColor = getTwoToneColor;
Icon.setTwoToneColor = setTwoToneColor;
export default Icon;

56
components/icon/index.zh-CN.md
View File

@ -21,17 +21,37 @@ ReactDOM.render(<IconDisplay />, mountNode);
## API
从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 `@ant-design/icons`。
### 通用图标
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| type | 图标类型。遵循图标的命名规范 | string | - | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' | 3.9.0 |
| spin | 是否有旋转动画 | boolean | false | |
| rotate | 图标旋转角度（3.13.0 后新增，IE9 无效） | number | - | 3.13.0 |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | 3.9.0 |
### SVG 图标
其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
```jsx
import { Star, StarFilled, StarTwoTone } from '@ant-design/icons';
<Star />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />
```
### 自定义 Icon/Custom Icon
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| spin | 是否有旋转动画 | boolean | false | |
| rotate | 图标旋转角度（3.13.0 后新增，IE9 无效） | number | - | 3.13.0 |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件 | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
### 关于 SVG 图标
在 `3.9.0` 之后，我们使用了 SVG 图标替换了原先的 font 图标，从而带来了以下优势：
@ -42,29 +62,23 @@ ReactDOM.render(<IconDisplay />, mountNode);
更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
> ⚠️ 3.9.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。
>
> 在此之前，你可以通过来自社区同学的 [webpack 插件](https://github.com/Beven91/webpack-ant-icon-loader)将图标文件拆分。
其中 `theme`, `component`, `twoToneColor` 是 `3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
```jsx
<Icon type="star" theme="filled" />
```
所有的图标都会以 `<svg>` 标签渲染，可以使用 `style` 和 `className` 设置图标的大小和单色图标的颜色。例如：
```jsx
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
import { Message } from '@ant-design/icons';
<Message style={{ fontSize: '16px', color: '#08c' }} />;
```
### 双色图标主色
对于双色图标，可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
对于双色图标，可以通过使用 `getTwoToneColor()` 和 `setTwoToneColor(colorString)` 来全局设置图标主色。
```jsx
Icon.setTwoToneColor('#eb2f96');
Icon.getTwoToneColor(); // #eb2f96
import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96
```
### 自定义 font 图标
@ -72,7 +86,9 @@ Icon.getTwoToneColor(); // #eb2f96
在 `3.9.0` 之后，我们提供了一个 `createFromIconfontCN` 方法，方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
```js
const MyIcon = Icon.createFromIconfontCN({
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
@ -116,7 +132,7 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
```
```jsx
import { Icon } from 'antd';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
ReactDOM.render(<Icon component={MessageSvg} />, mountNode);

12
components/icon/twoTonePrimaryColor.ts
View File

@ -1,12 +0,0 @@
import ReactIcon from '@ant-design/icons-react';
export function setTwoToneColor(primaryColor: string): void {
return ReactIcon.setTwoToneColors({
primaryColor,
});
}
export function getTwoToneColor(): string {
const colors = ReactIcon.getTwoToneColors();
return colors.primaryColor;
}

2
components/index.tsx
View File

@ -65,8 +65,6 @@ export { default as Empty } from './empty';
export { default as Form } from './form';
export { default as Icon } from './icon';
export { default as Input } from './input';
export { default as InputNumber } from './input-number';

Some files were not shown because too many files have changed in this diff Show More