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>