11# react-native-svg-uri
2+
23Render SVG images in React Native from an URL or a static file
34
45This was tested with RN 0.33 and react-native-svg 4.3.1 (depends on this library)
56[ react-native-svg] ( https://github.com/react-native-community/react-native-svg )
67
7-
88Not all the svgs can be rendered, if you find problems fill an issue or a PR in
99order to contemplate all the cases
1010
@@ -22,15 +22,15 @@ react-native link react-native-svg # not react-native-svg-uri !!!
2222
2323## Props
2424
25- | Prop | Type | Default | Note |
26- | ---| ---| ---| ---|
27- | ` source ` | ` ImageSource ` | | Same kind of ` source ` prop that ` <Image /> ` component has
28- | ` svgXmlData ` | ` String ` | | You can pass the SVG as String directly
29- | ` fill ` | ` Color ` | | Overrides all fill attributes of the svg file
25+ | Prop | Type | Default | Note |
26+ | ------------ | ------------- | ------- | --------------------------------------------------------- |
27+ | ` source ` | ` ImageSource ` | | Same kind of ` source ` prop that ` <Image /> ` component has |
28+ | ` svgXmlData ` | ` String ` | | You can pass the SVG as String directly |
29+ | ` fill ` | ` Color ` | | Overrides all fill attributes of the svg file |
3030
3131## Known Bugs
3232
33- - [ ANDROID] There is a problem with static SVG file on Android,
33+ * [ ANDROID] There is a problem with static SVG file on Android,
3434 Works OK in debug mode but fails to load the file in release mode.
3535 At the moment the only workaround is to pass the svg content in the svgXmlData prop.
3636
@@ -39,14 +39,16 @@ react-native link react-native-svg # not react-native-svg-uri !!!
3939Here's a simple example:
4040
4141``` javascript
42- import SvgUri from ' react-native-svg-uri' ;
42+ import SvgUri from " react-native-svg-uri" ;
4343
4444const TestSvgUri = () => (
4545 < View style= {styles .container }>
4646 < SvgUri
4747 width= " 200"
4848 height= " 200"
49- source= {{uri: ' http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg' }}
49+ source= {{
50+ uri: " http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
51+ }}
5052 / >
5153 < / View>
5254);
@@ -55,13 +57,14 @@ const TestSvgUri = () => (
5557or a static file
5658
5759``` javascript
58- < SvgUri width= " 200" height= " 200" source= {require (' ./img/homer.svg' )} / >
60+ < SvgUri width= " 200" height= " 200" source= {require (" ./img/homer.svg" )} / >
5961```
6062
6163This will render:
6264
6365![ Component example] ( ./screenshoots/sample.png )
6466
6567## Testing
66- 1 . Make sure you have installed dependencies with ` npm i `
67- 2 . Run tests with ` npm test `
68+
69+ 1 . Make sure you have installed dependencies with ` npm i `
70+ 2 . Run tests with ` npm test `
0 commit comments