A React component that injects SVG into the DOM.
Let's say you have an SVG available at some URL, and you'd like to inject it into the DOM because reasons. This module does the heavy lifting for you by delegating the process to SVGInjector, which makes an AJAX request for the SVG and then swaps in the SVG markup inline. The async loaded SVG is also cached, so multiple uses of an SVG only require a single server request.
import React from 'react'
import { render } from 'react-dom'
import ReactSVG from 'react-svg'
render(<ReactSVG src="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
src- The SVG URL.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
src="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
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:
Thanks to the author(s) of the original SVGInjector, without which none of this would have been possible 👏
MIT