react-svg

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="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.

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 ''.
• 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.

Install

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

License

MIT