ianlyons/react-svg

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

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="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 {}.
• alt - Optional Alt text to be added to the SVG. Defaults to ''.

Example

<ReactSVG
  path="atomic.svg"
  callback={(svg) => console.log(svg)}
  className="example"
  evalScript="always"
  alt="Atomic logo"
  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