SamHerbert / SVG-Loaders

Loading icons and small animations built with pure SVG.
http://samherbert.net/svg-loaders
MIT License
6.84k stars 4.73k forks source link

Example

All loaders may be previewed at:

http://samherbert.net/svg-loaders

NOTE: Chrome 45 intended to deprecate SMIL icons but has since suspended that deprecation.

Usage

Download or bower install svg-loaders

<img src="https://github.com/SamHerbert/SVG-Loaders/raw/master/svg-loaders/puff.svg" />

An icon's color can be manipulated by changing the fill attribute in the SVG file.

<svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

Note: Not all browsers support SVG, or more specifically, animated SVGs. Check (http://caniuse.com/#feat=svg-smil) to make sure you're good to go. If not, you may want to implement a fallback.

Minify

All SVG files are fairly small in size, but you can make them even smaller by minifying with something like SVGO.

Adaptations

React components by ajwann