Render SVG images in Expo app from an URL or a static file
npm install --save expo-svg-uri
OR
yarn add expo-svg-uri| Prop | Type | Default | Note |
|---|---|---|---|
source |
ImageSource |
Same kind of source prop that <Image /> component has |
|
svgXmlData |
String |
You can pass the SVG as String directly | |
fill |
Color |
Overrides all fill attributes of the svg file | |
stroke |
Color |
Overrides all stroke attributes of the svg file | |
fillAll |
Boolean |
Adds the fill color to the entire svg object |
Here's a simple example:
import SvgUri from "expo-svg-uri";
const TestSvgUri = () => (
<View style={styles.container}>
<SvgUri
width="200"
height="200"
source={{
uri: "http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
}}
/>
</View>
);or a static file
<SvgUri width="200" height="200" source={require("./img/homer-simpson.svg")} />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent