A React component that uses SVGInjector to add SVG to the DOM.
To quote the original SVGInjector docs:
There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.
import React from 'react'
import { render } from 'react-dom'
import ReactSVG from 'react-svg'
render(<ReactSVG path="svg.svg" />, document.getElementById('root'))- Basic Usage: Source | Sandbox
- API Usage: Source | Sandbox
- External Stylesheet: Source | Sandbox
- Typescript: Source | Sandbox
- CSS-in-JS: Source | Sandbox
- UMD Build (Development): Source | Sandbox
- UMD Build (Production): Source | Sandbox
Props
path- Path to the SVG.evalScripts- Optional Run any script blocks found in the SVG. One of'always','once', or'never'. Defaults to'never'.onInjected- Optional Function to call after the SVG is injected. Receives the injected SVG DOM element as a parameter. Defaults to() => {}.renumerateIRIElements- Optional Boolean indicating whether the SVG IRI addressable elements should be renumerated. Defaults totrue.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="svg.svg"
evalScripts="always"
onInjected={svg => {
console.log('onInjected', svg)
}}
renumerateIRIElements={false}
svgClassName="svg-class-name"
svgStyle={{ width: 200 }}
className="wrapper-class-name"
onClick={() => {
console.log('wrapper onClick')
}}
/>$ npm install react-svg --save
There are also UMD builds available via unpkg:
- https://unpkg.com/react-svg/umd/react-svg.development.js
- https://unpkg.com/react-svg/umd/react-svg.production.min.js
For the non-minified development version, make sure you have already included:
For the minified production version, make sure you have already included:
- PrototypeAlex for authoring the original versions.
- The Atomic crew for allowing me to take ownership of the repo.
MIT