Using SVG as Component in React Native 0.57

import React from ‘react’
import Svg, { Defs, G, Rect } from ‘react-native-svg’
// SVGR has dropped some elements not supported by react-native-svg: title, desc
const SvgComponent = props => (
viewBox=”0 0 48 1"
<Defs />
<G id=”Page-1" stroke=”none” strokeWidth={1} fill=”none” fillRule=”evenodd”>
transform=”translate(-129.000000, -156.000000)”
<G id=”Controls/Settings” transform=”translate(80.000000, 0.000000)”>
<G id=”Content” transform=”translate(0.000000, 64.000000)”>
<G id=”Group” transform=”translate(24.000000, 56.000000)”>
<G id=”Group-2">
<Rect id=”Rectangle-5" x={25} y={36} width={48} height={1} />
export default SvgComponent
import SvgFile from '../asset/mysvgfile.js'
class MyComponent implements React.Component{
return (
<SvgFile height={20} width={20} fill="#FFFFFF"/>
Wherever you find fill="#231231" which you want to change!
Replace it with fill={props.fill}
// First import the Library with rules described above.
// Then assign it to an object as shown below
icon : SvgFile // from step 5
<this.props.myObject.icon height={23} width={14} fill="#FFFF11" />



Tech Enthusiast, Technopreneur and loves to code

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store