Menu
I want to use SVG image react-native. Earlier it was not supported. But by looking into source code of react-native, it seems that it is now supported.
Here is my sample code:
class SVGImageSample extends Component {
render() {
return (
<Image source={require("./Mysvg.svg")} style={{height:40,width:40}}/>
);
}
}
Here is my svg image
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" height="100" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{display:none;fill:#E0E0E0;}
.st1{display:none;}
.st2{display:inline;fill:#848484;}
.st3{display:none;fill:#FFFFFF;}
.st4{fill:#C22227;}
</style>
<rect id="XMLID_8_" x="-221.1" y="-49" class="st0" width="860" height="596.7"/>
<g id="XMLID_4_" class="st1">
<rect id="XMLID_2_" x="-38.8" class="st2" width="577.5" height="10"/>
<rect id="XMLID_5_" x="-38.8" y="490" class="st2" width="577.5" height="10"/>
<rect id="XMLID_18_" x="0" y="-38.8" class="st2" width="10" height="577.5"/>
<rect id="XMLID_19_" x="490" y="-38.8" class="st2" width="10" height="577.5"/>
</g>
<image style="display:none;overflow:visible;" width="1242" height="2208" id="XMLID_1_" xlink:href="login_profile.png" transform="matrix(0.3068 0 0 0.3068 -214.041 -274.2382)">
</image>
<circle id="XMLID_3_" class="st3" cx="250" cy="250" r="240"/>
<path id="XMLID_13_" class="st4" d="M348.3,249.4l-84.5-84.8l-18,18l49.7,50.1c1.9,1.9,0.5,5.1-2.1,5.1H151.7v25.4l141.5-0.1
c2.7,0,4,3.2,2.1,5.1l-49,49.1l18,18l84-85.8V249.4L348.3,249.4z"/>
</svg>
It does not show anything.
Any help would be appreciated.
666
Does React Native support SVGs? Rendering SVGs in mobile apps is not as simple as on the web, where you can use SVG directly as an image source or paste the SVG code into your HTML file. This is because there isn't a built-in React Native component that can render SVGs directly.
Creating SVG in React Native js in the root directory and paste the code below into the file. import * as React from "react"; import Svg, { Path } from "react-native-svg"; const Loader = (props) => ( <Svg width={118} height={107} fill="none" xmlns="http://www.w3.org/2000/svg" {... props} > <Path d="M32. 333 6C17.
Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat. import YourSvg from "/path/to/image.
Or also you can try this solution: https://github.com/necinc/msvgc
It makes reusable react components from plain svg files via command line.
Works for react-native
117
As far as I know React Native currently (3/2016) doesn't support SVGs. On the other hand, there is a library called react-native-svg which should help you with that.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
