Skip to content

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

License

Notifications You must be signed in to change notification settings

kody-liu/react-inline-svg

 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 59.2%
  • HTML 40.8%