Package Exports

react-svg

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-svg

A React component that injects SVG into the DOM.

Background

Let's say you have an SVG and you'd like to inject it into the DOM because reasons. This module will do the heavy lifting for you by delegating the process to SVGInjector, which will make an AJAX request for the SVG and then swap in the SVG markup inline. The async loaded SVG is also cached so multiple uses of an SVG only require a single server request.

Basic Usage

import React from 'react'
import { render } from 'react-dom'
import ReactSVG from 'react-svg'

render(<ReactSVG src="svg.svg" />, document.getElementById('root'))

Live Examples

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

API

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 to true.
svgClassName - Optional Class name to be added to the injected SVG DOM element. Defaults to null.
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')
  }}
/>

Installation

$ npm install react-svg --save

There are also UMD builds available via unpkg:

For the non-minified development version, make sure you have already included:

For the minified production version, make sure you have already included:

Credits

Thanks to the author(s) of the original SVGInjector, without which none of this would have been possible 👏

License

MIT