Package Exports

react-inlinesvg

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-inlinesvg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-inlinesvg

One of the reasons SVGs are awesome is because you can style them with CSS. Unfortunately, this winds up not being too useful in practice because the CSS has to be in the same document. This leaves you with two bad options:

Embed the CSS in the SVG document
- Can't use your CSS preprocessors (LESS, SASS)
- Can't target parent elements (button hover, etc.)
- Makes maintenance difficult
Embed the SVG in your HTML
- Bloats your HTML
- SVGs can't be cached by browsers between pages.
- A maintenance nightmare

But there's an alternative that sidesteps these issues: load the SVG with an XHR request and then embed it in the document. That's what this component does.

Usage

var isvg = require('react-inlinesvg');

<isvg src="/path/to/myfile.svg">
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</isvg>

Props

Name	Type	Description
`src`	string	The URL of the SVG file you want to load.
`wrapper`	function	A React class or other function that returns a component instance to be used as the wrapper component. Defaults to `React.DOM.span`.
`preloader`	function	A React class or other function that returns a component instance to be shown while the SVG is loaded.
`onLoad`	function	A callback to be invoked upon successful load.
`onError`	function	A callback to be invoked if loading the SVG fails. This will receive a single argument: an instance of `InlineSVGError`, which has the following properties: `<ul> <li><code>isHttpError</code></li> <li><code>isSupportedBrowser</code></li> <li><code>isConfigurationError</code></li> <li><code>statusCode</code> (present only if <code>isHttpError</code> is true)</li> </ul> </td>`

Browser Support

Any browsers that support inlining SVGs and XHR will work. The component goes out of its way to handle IE9's weird XHR support so, IE9 and up get your SVG; lesser browsers get the fallback.

CORS

If loading SVGs from another domain, you'll need to make sure it allows CORS.

XSS Warning

This component places the loaded file into your DOM, so you need to be careful about XSS attacks. Only load trusted content, and don't use unsanitized user input to generate the src!