icones icon indicating copy to clipboard operation
icones copied to clipboard

Ant Design Icons 与 @ant-design/icons-vue 图标大小不一致

Open Mr-Lixiaoqaing opened this issue 2 years ago • 2 comments

Describe the bug

image 第一个是 @ant-design/icons-vue中的图标,后边两个是https://icones.netlify.app/中 antd design icons 集合中的图标 PS:svg的width、height 都等于 1em

第一个svg的path大小 image 第二个svg的path大小 image 如何让他们保持一致?

Reproduction

null

System Info

chorme浏览器

Used Package Manager

npm

Validations

  • [X] Follow our Code of Conduct
  • [X] Read the Contributing Guide.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • [X] The provided reproduction is a minimal reproducible of the bug.

Mr-Lixiaoqaing avatar Dec 09 '22 05:12 Mr-Lixiaoqaing

经排查,是svg的viewbox属性与@ant-design/icons-vue中的viewbox属性不一致导致的,使用图标时,手动调整viewbox,使其保持相同的值,即可解决 image

Mr-Lixiaoqaing avatar Dec 09 '22 06:12 Mr-Lixiaoqaing

Source SVG: https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-svg/svg/outlined/home.svg

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
  <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>

AntdHomeOutlined is rendered correctly. Inconsistency is in Ant Design component that for some reason changed viewBox.

cyberalien avatar Jan 30 '23 10:01 cyberalien

I guess this issue is not related to this project. Closing for now.

antfu avatar Apr 08 '24 13:04 antfu