React Native - 如何使用本地 SVG 文件（并为其着色）

Question

我在本地有一些 .svg 图标，我想在我的 RN 项目中使用它们。

一个示例是这样的 .svg 图标（在 Chrome 中打开）：

我想显示这个文件（以及控制为它指定填充颜色）——有没有办法在 React Native 中做到这一点？

（我尝试过“react-native-remote-svg”组件，但这并不能让我控制着色）

谢谢！

原文由 SpicyClubSauce 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 react-native-svg-transformer 将 svgs 导入到您的代码中。完成设置后，您将能够执行以下操作：

import ProfileIcon from './images/profile.svg'

然后，您可以将 ProfileIcon 用作组件。

要控制颜色，请编辑 svg 文件并将填充或描边属性更改为 "currentColor" （因此 <polygon fill="currentColor" ...> ）。然后，您可以在 svg 元素上设置 color 样式，它将使用该颜色： <ProfileIcon style={{ color: '#f80' }}/>

我正在使用 react-native-svg 9.3.5。

原文由 hrunk 发布，翻译遵循 CC BY-SA 4.0 许可协议