Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-svg with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactSvg = require("react-svg")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-svg v4.0.17

A React component that uses SVGInjector to add SVG to the DOM.

react-svg

build status coverage status npm version npm downloads gzip size

A React component that uses SVGInjector to add SVG to the DOM.

Basic Usage

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

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

Live Examples

API

:eyes: 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. 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 () => {}.
  • 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
  path="svg.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')
  }}
/>

Installation

$ npm install react-svg --save

There are also UMD builds available via unpkg:

  • https://unpkg.com/react-svg/umd/ReactSVG.js
  • https://unpkg.com/react-svg/umd/ReactSVG.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:

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free