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 => (
<Svg
width=”48px”
height=”1px”
viewBox=”0 0 48 1"
version={1.1}
xmlnsXlink=”http://www.w3.org/1999/xlink"
{…props}
>
<Defs />
<G id=”Page-1" stroke=”none” strokeWidth={1} fill=”none” fillRule=”evenodd”>
<G
id=”19-Separator”
transform=”translate(-129.000000, -156.000000)”
fill=”#063855"
>
<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} />
</G>
</G>
</G>
</G>
</G>
</G>
</Svg>
)
export default SvgComponent
import SvgFile from '../asset/mysvgfile.js'
class MyComponent implements React.Component{
render(){
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
myObject={
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