react-use-svg
v2.0.5
Published
A simple stateless react component for the svg use element
Downloads
2
Maintainers
Readme
This npm
package was forked from react-svg-use.
SVG <Use />
React.js Component
SVG sprites are awesome! This component saves you the time building and maintaining your own react component within your React.js projects.
Installation
npm install react-use-svg --save
How do I ... use it?
First, set up your SVG sprite sheet so you have something similar to this:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="car">
<path d="..."/>
</symbol>
<symbol id="bike">
<path d="..."/>
</symbol>
<symbol id="skateboard">
<path d="..."/>
</symbol>
</svg>
You can use a package like react-svg-sprite to help generate your SVG sprite using react.
Then, simply import and use the icon where you need it
import Icon from 'react-use-svg'
React.createClass({
render() {
return (
<Icon
xlink='car'
fillColor='#D71421'
className='car-icon'
/>
)
}
})
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.
<svg class="car-icon">
<use xlink:href="#car" style="fill:#D71421;"></use>
</svg>