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="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
.
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 tonull
.className
- Optional Class name to be added to the SVG. Defaults to''
.evalScripts
- Optional Run any script blocks found in the SVG (always
,once
, ornever
). Defaults tonever
.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.
$ npm install react-svg --save
There are also UMD builds available via unpkg:
If you use these, make sure you have already included React as a dependency.
MIT