Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Icon> component does not render custom SVG well & also mentioned props for custom icon component does not work #17962

Closed
vidushigupta opened this issue Jul 29, 2019 · 11 comments

Comments

@vidushigupta
Copy link

commented Jul 29, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Please check the example of codesandbox.
Step1 - take a custom svg icon.
Step2 - render it in antD component prop. It renders.
Step3 - now use component prop 'type'. The custom SVG does not render anymore.
Step4 - Use the prop 'fill' - this does not effect the color of rendered custom SVG
Step5 - Use the prop 'width'/'height' - this does not effect the width / height of rendered custom SVG

What is expected?

'Type' prop does not override 'component' prop when used both in same time.
The props be working & customizing the rendered custom Icons dynamically

What is actually happening?

Prop 'component' is not overriding prop 'type'
The props are not replicating the effect to SVG. There is no changes in the rendered Icon.

Environment Info
antd 3.20.7
React 16.8.6
System MacOs Mojave
Browser Chrome 75.0

As noticed in the code for component in antD:-

The innerNode is getting overridden by 'type' check
There is an 'i' element wrapping the actual SVG & the props are not propagating to actual SVG element.

@afc163

This comment has been minimized.

Copy link
Member

commented Jul 30, 2019

Don't use type and component together, it is conflicted.

@afc163 afc163 closed this Jul 30, 2019
@vidushigupta

This comment has been minimized.

Copy link
Author

commented Jul 30, 2019

As per the documentation - "The component used for the root node. This will override the type property.". Per this official documentation, it seems that when both the properties used, the component prop will override the type prop. Am I misinterpreting it???? Seems a bug, since ideally the component prop should be given precedence over type prop.
Screen Shot 2019-07-29 at 9 31 47 PM

@afc163 afc163 reopened this Jul 30, 2019
@afc163 afc163 added the 🐛 Bug label Jul 30, 2019
@vidushigupta

This comment has been minimized.

Copy link
Author

commented Jul 30, 2019

Apart from the above issue, the other issue is that if I use the prop 'component', the props mentioned in the documentation does not work :(

Example : In the below snapshot following definition does not effect the custom icon.

<Icon component={MessageSvg} fill={"red"}/>

Screen Shot 2019-07-29 at 9 39 43 PM

-===-=-=-=
So not sure how the fill/width/height are supposed to be used. Also the className is not assigned to the SVG dom element, rather the wrapper element.

Please advise for right usage/expectation of props fill/width/height/className OR mark it to be resolved as bug..

Thanks

@kanweiwei

This comment has been minimized.

Copy link
Contributor

commented Sep 1, 2019

@afc163

const innerSvgProps: CustomIconComponentProps = {
...svgBaseProps,
className: svgClassString,
style: svgStyle,
viewBox,
};

这里component传进去的props都是写死的,中文文档里写的是只读值,英文的是default,这里造成了误解不对。
还有一个viewBox属性没写到文档里。

如果是只读的属性,写到文档里就没什么意义了吧,需要改成可接受外部参数的。

@kanweiwei kanweiwei referenced this issue Sep 1, 2019
5 of 14 tasks complete
@ZengMX

This comment has been minimized.

Copy link

commented Sep 11, 2019

@kanweiwei 我的版本3.1.6的升级到3.20.2,本地图标会显示,用Jenkins升级的就不显示图标了,这中间的版本需要配置吗

3.20.2版本的
image

3.1.6版本的
image

@afc163

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

@ZengMX 请检查是否加载了多份不同版本的 antd 的样式。

@afc163

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

fixed in #18592

@afc163 afc163 closed this Sep 11, 2019
@ZengMX

This comment has been minimized.

Copy link

commented Sep 11, 2019

@afc163 Jenkins上如何检测是否加载多分antd样式

@yoyo837

This comment has been minimized.

Copy link
Collaborator

commented Sep 11, 2019

@ZengMX Jenkins 无关

@ZengMX

This comment has been minimized.

Copy link

commented Sep 11, 2019

@yoyo837 我本地升级的antd版本到20.2是正常显示图标的,没啥问题,主要是Jenkins上升级的antd就会不显示图标,这个图标加载和node版本有关吗

@yoyo837

This comment has been minimized.

Copy link
Collaborator

commented Sep 11, 2019

@ZengMX 不可能依赖node版本的,只能靠你自己调试定位...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.