Skip to content

A simple and lightweight React component for loading SVG files so they can be styled with CSS.

License

Notifications You must be signed in to change notification settings

jmshal/react-inline-svg

 
 

Repository files navigation

jacobmarshall-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 XMLHttpRequest
  • Loads each SVG exactly once, and caches them for repeated use
  • Can preload SVGs in advance using InlineSVG.cache

Installation

$ npm i --save jacobmarshall-react-inline-svg

Usage

Include the component:

<script src="https://unpkg.com/[email protected]/dist/react-inline-svg.js"></script>

Or...

import InlineSVG from 'jacobmarshall-react-inline-svg';

Render an inline SVG:

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

Pre-loading SVGs

InlineSVG.cache.load("/path/to/your.svg");

Building from Source

To re-build this after making changes in src, simply run:

$ gulp

About

A simple and lightweight React component for loading SVG files so they can be styled with CSS.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 54.2%
  • JavaScript 45.8%