Socket
Socket
Sign inDemoInstall

ike.js

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ike.js

A small, dependency-free library that asynchronously loads SVG sprites and saves them to local storage.


Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

Ike.js

Ike.js on NPM

A small, dependency-free library that asynchronously loads SVG sprites and saves them to local storage.

About

Work with SVG symbol-based icon systems without having to include a bulky SVG file inline. Ike.js improves page loading speeds by retrieving your icon file asynchronously and inserting it into your markup on the fly.

To make the deal even sweeter, Ike.js stores your icons in the client's local storage on the initial download, and will fetch them automatically on subsequent page views. Service workers can handle much of this functionality for you these days, but browser support is still spotty (I'm looking at you, Apple). Ike.js is a great, lightweight service worker alternative or fallback for SVG icon systems.

Usage

To use Ike.js, you'll need a modern JavaScript workflow and build system with ES6 module bundling and transpiling capabilities. Here's a great example.

Install

Install Ike.js via NPM and add to your dependencies:

$ npm install ike.js --save

Initialize

Import the Ike.js module, then instantiate it. The constructor takes the URL of your SVG icon sprite and a revision identifier as arguments.

// import Ike.js
import Ike from 'ike.js'

// create an instance
const Icons = new Ike('/icons/sprite.svg', 14)

The revision identifier is used to control the version of the icons stored in local storage, and can follow any convention you like. If your icons change, just update this revision argument and Ike.js will know to fetch a fresh copy of the file.

Assuming your SVG sprite file contains symbol elements with defined viewBoxes, you can use them in your HTML like so:

<svg class="my-awesome-icons">
  <use xlink:href="#prancing-unicorn" />
</svg>

That's it, you're now equipped with a lightning-fast, non-render blocking icon system. Have a cold one and bask in the glow of your asynchronous magnificence!

License

MIT. © 2016 Donny West

Fo Shizzle

Keywords

FAQs

Package last updated on 29 Mar 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc