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

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="class-name"
    wrapperClassName="wrapper-class-name"
  />,
  document.querySelector('.Root')
)

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

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 ''.
• wrapperClassName - Optional Class name to be added to the wrapping div. 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"
  wrapperClassName="example-wrapper-classname"
  evalScript="always"
  style={{ width: 200 }}
/>

Refer to the SVGInjector configuration docs for more information.

$ npm install react-svg --save

There are also UMD builds available via unpkg:

• https://unpkg.com/react-svg/dist/ReactSVG.js
• https://unpkg.com/react-svg/dist/ReactSVG.min.js

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

MIT