npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

react-svg-use

2.1.0 • Public • Published

npm version

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.

Enable SVG <use /> in React.js

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:

<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>

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.

<svg>
  <use xlink:href="#car" style="fill:#D71421;"></use>
</svg>

install

npm i react-svg-use

Downloadsweekly downloads

190

version

2.1.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability