chore: infer SVG size from style #2742
Conversation
AmitShwarts
force-pushed
the
chore/infer-svg-size-from-style-on-mobile
branch
from
b1c065d to
64046f2
Compare
AmitShwarts
force-pushed
the
chore/infer-svg-size-from-style-on-mobile
branch
from
64046f2 to
9920c2b
Compare
src/components/svgImage/index.tsx
Outdated
| @@ -28,7 +30,12 @@ function SvgImage(props: SvgImageProps) { | |||
| if (isSvgUri(data)) { | |||
| return <SvgCssUri {...others} uri={data.uri}/>; | |||
| } else if (typeof data === 'string') { | |||
| return <SvgXml xml={data} {...others}/>; | |||
| const flattenStyle = StyleSheet.flatten(props.style) as Record<string, any>; | |||
There was a problem hiding this comment.
We use flatten very rarely, why is this required here?
There was a problem hiding this comment.
to extract the width and height from the provided styles.
do you have suggestion how to do it differently?
There was a problem hiding this comment.
are we sure its coming with more than one style object ?
if not, and we always have just single style object (and not as array).?
we can remove that.
There was a problem hiding this comment.
yes i'm sure. we can't remove it
There was a problem hiding this comment.
Can you please provide the scenario this is used in?
There was a problem hiding this comment.
Yes, for example when using Button with SVG Icon, we're passing iconStyle with width & height.
in this case it's been passed to the SVG component, and without this PR the height and width is not respected.
There was a problem hiding this comment.
<Button
id={id}
testID={TestIds.buttonElement}
style={style}
color={color}
iconSource={iconSource}
iconStyle={{width: Spacings.s6, height: Spacings.s6}}
round
size={Button.sizes.large}
/>
There was a problem hiding this comment.
As discussed, lets allow passing iconProps to the Button instead, which will allow sending width and height
Description
Button- support passingiconPropsChangelog
Button- support passingiconPropsAdditional info