react-inline-svg

React Component to load and inline SVG images, allowing you to target and style them using CSS

Usage no npm install needed!

<script type="module">
  import reactInlineSvg from 'https://cdn.skypack.dev/react-inline-svg';
</script>

README

react-inline-svg

React Component to load and inline SVG images, allowing you to target and style SVGs using CSS.

Features

  • Easy to use, just add InlineSVG components
  • Loads SVGs automatically using a jQuery $.ajax request
  • Loads each SVG exactly once, and caches them for repeated use
  • Can preload SVGs in advance using SVGCache

Usage

Include the component:

<script src="/scripts/react-inline-svg.js"></script>

Render an inline SVG:

<InlineSVG src="/path/to/your.svg" className="css-class" />

Pre-loading SVGs

SVGCache.instance.load("/path/to/your.svg");

Building from Source

The compiled/ready-to-use version of react-inline-svg can always be found at dist/react-inline-svg.js. To re-build this after making changes in src, simply run:

$ gulp