如何在 React Native 中使用 svg 图像路径显示 svg 图标？

Question

我想显示 SVG 图标，但我找不到显示方式。我尝试使用 react-native-svg 的 Image 和 Use 组件，但它们不起作用。我试图用原生方式做到这一点，但只显示 SVG 图标真的很困难。

示例代码：

<Svg width="80" height="80">
 <Image href={require('./svg/1f604.svg')} />
</Svg>

Answer 1

最初，当我的机器中有 SVG 图标或保存在 Web URL 中时，我遇到了同样的问题。

我探索了react-native-svg库，但它不允许您包含已创建的 SVG 图标源。我们只能使用该库创建新图标。

后来我发现react-native-svg-uri确实允许我们使用给定的图标路径。

你可以这样使用它：

import SvgUri from 'react-native-svg-uri';

<SvgUri
    width="200"
    height="200"
    source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
/>