Can't add padding to an SVG image in react-native-CodePudding

I have an SVG image that is working and its styles are also working. However, when I add a padding image just got bigger instead of adding a distance between the border.

Here is my implementation:

import Facebook from '../assets/svgs/social-facebook.svg';
<Facebook style={[iconStyle]} />

styling

iconStyle: {
    borderColor: MERCURY,
    borderWidth: wp(1),
    height: hp(24),
    marginHorizontal: wp(14),
    padding: wp(14),          // <- problem here
    width: wp(24),
}

The problem is padding is not taking effect. Here how it looks

Where I want it to look like this

Any help is appreciated, Thank you.

CodePudding user response：

For this reason I wouldn't apply this specific styles directly to the SVG. I would only add the size to the SVG and anything else to a View wrapping the SVG. Heres a way on how to achieve this:

export const Facebook = ({ size, style }) => (
  <View style={style}>
    <YourSVG style={{ width: size, height: size }} />
  <View/>
)