react-iconfont-cli icon indicating copy to clipboard operation
react-iconfont-cli copied to clipboard

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

Open GreatAuk opened this issue 5 years ago • 5 comments

image

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

GreatAuk avatar Oct 23 '20 09:10 GreatAuk

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

fwh1990 avatar Oct 27 '20 01:10 fwh1990

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

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

guofei0723 avatar Dec 18 '20 09:12 guofei0723

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

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

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

wu-ctrl avatar Oct 11 '21 11:10 wu-ctrl

针对此情况已添加 pr @fwh1990

Grewer avatar Oct 13 '21 15:10 Grewer

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

Grewer avatar Oct 23 '21 17:10 Grewer