Cross-browser normalization and polyfills to mitigate SVG inconsistencies and quirks.

Usage

To get started, include iconic.js on your page.

<script src="iconic.min.js"></script>

By doing that a few things happen automatically for you:

Any img tag with the iconic class and an SVG file src will be replaced with the full SVG markup inline. The async loaded SVG is also cached so multiple uses of an icon only requires one server request.

Development tip: The dynamic injection process uses AJAX calls to load SVG. If you are developing locally without running a local webserver, be aware that default browser security settings may block these calls.

The JavaScript in any Smart Icons you use will be extracted, cached, initialized and connected to the icons making their APIs available for use.

Per-element PNG fallback

Since you might be using a single SVG styled in multiple ways, you can also define per-element fallbacks by adding a data-fallback or data-png attribute to your img tags to define a unique PNG for each context.

Methods

Inject

inject ([selector|element|array of elements], options, callback)

After your page loads you might also want to inject some SVGs. This is a common case when building single-page applications and using front-end libraries and frameworks like Angular, Backbone and Ember, or when making calls like jQuery.load(), that make DOM changes and add icons after the initial automatic injection occurs.

When you add new img tags, you can call inject() to pick those up and trigger the injection.

If you are dynamically adding an icon you've already served on your page or app, the iconic.js cache will already have it and save you a network call and parsing cost too.

You can pass inject a selector string, a single icon DOM element or array of DOM elements.

options - object

{
each: [function]
}

each - function

A function to call after each SVG is injected. Receives the newly injected SVG DOM element as a parameter.

callback - function

A function to call once all the requested SVG elements have been injected. Receives a count of the total SVGs injected as a parameter.