How do I pass a stylesheet to a Local SVG Vector Image in React Native?

Asked Mar 03 '21 at 20:14

Active Mar 03 '21 at 20:14

Viewed 467 times

I can determine the width and height inline

<WithLocalSvg width={50} height={50} asset={require("./assets/logo.svg")} />

But if I try to pass a width and height using a stylesheet then the width and height aren't inherited

const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
    },
    tinyLogo: {
        width: 50,
        height: 50,
    },
    logo: {
        width: 66,
        height: 58,
    },
});

<WithLocalSvg style={styles.tinyLogo} asset={require("./assets/logo.svg")} />

I'm currently testing the iOS version

asked Mar 03 '21 at 20:14

kwaalaateimaa

Width and height are attributes, not styles. You must specify them explicitly for the SVG element and can not put them in CSS – Michael Rovinsky Mar 04 '21 at 07:42
Is there a way to pass them to WithLocalSvg? – kwaalaateimaa Mar 04 '21 at 09:32
yes you can: width={50} height={50} – Michael Rovinsky Mar 05 '21 at 10:17
Of course, but I mean in a way that defines the variables outside of the inline, so that I don't have the const value littered everywhere. – kwaalaateimaa Mar 05 '21 at 15:23

How do I pass a stylesheet to a Local SVG Vector Image in React Native?

0 Answers0