fix: Button with icon and href align issue (#32373)

This commit is contained in:
afc163 2021-10-02 12:35:50 +08:00 committed by GitHub
parent 72f728be57
commit 6b56af466f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 0 deletions

View File

@ -551,6 +551,30 @@ Array [
Search
</span>
</button>,
<a
class="ant-btn ant-btn-icon-only"
href="https://www.google.com"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
</span>
</a>,
<br />,
<br />,
<button
@ -766,6 +790,30 @@ Array [
Search
</span>
</button>,
<a
class="ant-btn ant-btn-lg ant-btn-icon-only"
href="https://www.google.com"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
</span>
</a>,
]
`;

View File

@ -47,6 +47,7 @@ ReactDOM.render(
<Button type="dashed" icon={<SearchOutlined />}>
Search
</Button>
<Button icon={<SearchOutlined />} href="https://www.google.com" />
<br />
<br />
<Tooltip title="search">
@ -77,6 +78,7 @@ ReactDOM.render(
<Button type="dashed" icon={<SearchOutlined />} size="large">
Search
</Button>
<Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
</>,
mountNode,
);

View File

@ -109,6 +109,15 @@
}
}
// https://github.com/ant-design/ant-design/issues/32365
a&-icon-only {
vertical-align: -1px;
> .@{iconfont-css-prefix} {
display: inline;
}
}
&-round {
.btn-round(@btn-prefix-cls);
&.@{btn-prefix-cls}-icon-only {