无法在 react-native 中向 SVG 图像添加填充

Question

我有一个 SVG 图像可以正常工作，它的样式也可以正常工作。但是，当我添加填充图像时，它只是变大了，而不是在边框之间增加了距离。

这是我的实现：

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

造型

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

问题是填充没有生效。这是它的样子

我希望它看起来像这样

感谢任何帮助，谢谢。

Answer 1

因此，我不会将此特定样式直接应用于 SVG。我只会将大小添加到 SVG，将其他任何内容添加到包装 SVG 的视图。这是实现此目标的方法：

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

无法在 react-native 中向 SVG 图像添加填充

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

css

react-native