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"
onInjected={svg => {
console.log('onInjected', svg)
}}
svgClassName="svg-class-name"
className="wrapper-class-name"
onClick={() => {
console.log('wrapper onClick')
}}
/>,
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.
👀 See MIGRATING.md for moving between major versions of this component.
Props
path- Path to the SVG.evalScripts- Optional Run any script blocks found in the SVG (always,once, ornever). Defaults tonever.onInjected- Optional Function to call after the SVG is injected. Receives the injected SVG DOM element as a parameter. Defaults tonull.svgClassName- Optional Class name to be added to the injected SVG DOM element. Defaults tonull.svgStyle- Optional Inline styles to be added to the injected SVG DOM element. Defaults to{}.
Other non-documented properties are applied to the wrapper element.
Example
<ReactSVG
path="atomic.svg"
evalScripts="always"
onInjected={svg => {
console.log('onInjected', svg)
}}
svgClassName="svg-class-name"
svgStyle={{ width: 200 }}
className="wrapper-class-name"
onClick={() => {
console.log('wrapper onClick')
}}
/>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 and ReactDOMServer as dependencies.
MIT