Since React v15.0 this package is no longer needed
React v15.0 brought support for all of the SVG attributes so if you're using that version, this addon is no longer necessary.
<use />
in React.js
Enable SVG SVG sprites are awesome, but they don't work out of the box with React.js, because xlink:href
is not a standardly-supported SVG attribute. This component works around that limitation.
Installation
npm i react-svg-use -S
How do I ... use it?
First, set up your SVG sprite sheet so you have something simmilar to this:
Then, simply import and use the icon where you need it
import Icon from 'react-svg-use' React.createClass({ render() { return ( <Icon id='car' color='#D71421' /> ) }})
The above snippet generates markup looking like this. Any additional props
passed to the component will be added to the wrapping SVG element. For instance className
, id
etc.