css - React Native - 如何使用本地 SVG 文件(并为其着色)

Question

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

一个示例是这样的 .svg 图标(在 Chrome 中打开):

我想显示这个文件(以及控制指定它的填充颜色)——在 React Native 中有什么方法可以做到这一点吗？

(我尝试过“react-native-remote-svg”组件，但这并不能让我对着色进行任何控制)

谢谢!

Answer 1

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

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

然后您可以使用 ProfileIcon 作为组件。

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

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