A React component that uses SVGInjector to add SVG to the DOM.
JavaScript HTML
Latest commit ff7f003 Jan 19, 2017 @tanem tanem Release v2.1.18

README.md

react-svg

build status coverage status npm version npm downloads

A React component that uses SVGInjector to add SVG to the DOM.

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import ReactSVG from 'react-svg'

ReactDOM.render(
  <ReactSVG
    path="atomic.svg"
    callback={svg => console.log(svg)}
    className="example"
  />,
  document.querySelector('.Root')
)

There is a working version of the above in the example dir. First run npm start, then point a browser at localhost:8080.

API

Props

  • path - Path to the SVG.
  • callback - Optional Function to call after the SVG is injected. Receives the newly injected SVG DOM element as a parameter. Defaults to null.
  • className - Optional Class name to be added to the SVG. Defaults to ''.
  • evalScripts - Optional Run any script blocks found in the SVG (always, once, or never). Defaults to never.
  • style - Optional Inline styles to be added to the SVG. Defaults to {}.

Example

<ReactSVG
  path="atomic.svg"
  callback={(svg) => console.log(svg)}
  className="example"
  evalScript="always"
  style={{ width: 200 }}
/>

Refer to the SVGInjector configuration docs for more information.

Install

$ npm install react-svg --save

There are also UMD builds available via unpkg:

If you use these, make sure you have already included React and ReactDOMServer as dependencies.

License

MIT