JSPM

react-svg

2.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 222224
  • Score
    100M100P100Q153232F
  • License MIT

A react.js svg component for loading svg files into the dom.

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

npm version npm downloads

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

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import ReactSVG from 'react-svg'

ReactDOM.render(
  <ReactSVG
    path="atomic.svg"
    callback={svg => console.log(svg)}
    className="example"
  />,
  document.querySelector('.Root')
)

There is a working version of the above in the example dir. First run npm start, then point a browser at localhost:8080.

API

Props

  • path - Path to the SVG.
  • callback - Optional Function to call after the SVG is injected. Receives the newly injected SVG DOM element as a parameter. Defaults to null.
  • className - Optional Class name to be added to the SVG. Defaults to ''.
  • evalScripts - Optional Run any script blocks found in the SVG (always, once, or never). Defaults to never.
  • style - Optional Inline styles to be added to the SVG. Defaults to {}.

Example

<ReactSVG
  path="atomic.svg"
  callback={(svg) => console.log(svg)}
  className="example"
  evalScript="always"
  style={{ width: 200 }}
/>

Refer to the SVGInjector configuration docs for more information.

Install

$ npm install react-svg --save

There are also UMD builds available via unpkg:

If you use these, make sure you have already included React as a dependency.

License

MIT