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

为什么为 svg 添加 display: block 的样式? #6

Open
GreatAuk opened this issue Oct 23, 2020 · 5 comments
Open

为什么为 svg 添加 display: block 的样式? #6

GreatAuk opened this issue Oct 23, 2020 · 5 comments
Labels
help wanted Extra attention is needed

Comments

@GreatAuk
Copy link

image

发现组件默认有 display: block 的样式,不是很清楚为什么。
一般图标是当内联元素来使用的,现在display: block的样式,导致图标默认会占用一整行,使用的时候经常要重置样式成 inline-block

@fwh1990
Copy link
Member

fwh1990 commented Oct 27, 2020

一方面是为了与小程序/RN中的表现一致,另一方面是因为内联样式和文字放在一起时对不齐,需要用flex对齐。如果能解决对齐问题,用inline-block也是没问题的

@fwh1990 fwh1990 added the help wanted Extra attention is needed label Oct 27, 2020
@guofei0723
Copy link

一方面是为了与小程序/RN中的表现一致,另一方面是因为内联样式和文字放在一起时对不齐,需要用flex对齐。如果能解决对齐问题,用inline-block也是没问题的

建议在iconfont.json配置文件中增加一个display配置,可以让使用者自己决定。
inline-block与文字在一起时可通过vertical-align调整对齐,但字体字号等因素可能都会对对齐产生影响,所以具体情况交给使用者具体去解决即可。

@wu-ctrl
Copy link

wu-ctrl commented Oct 11, 2021

一方面是为了与小程序/RN中的表现一致,另一方面是因为内联样式和文字放在一起时对不齐,需要用flex对齐。如果能解决对齐问题,用inline-block也是没问题的

建议在iconfont.json配置文件中增加一个display配置,可以让使用者自己决定。 inline-block与文字在一起时可通过vertical-align调整对齐,但字体字号等因素可能都会对对齐产生影响,所以具体情况交给使用者具体去解决即可。

同需要 有没有加上display的打算哇

@Grewer
Copy link

Grewer commented Oct 13, 2021

针对此情况已添加 pr @fwh1990

@Grewer
Copy link

Grewer commented Oct 23, 2021

如果急需, 可使用 @grewer/react-iconfont-cli 代替

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

5 participants