iconly

iconly

^{Iconly is designed to load and cache SVG icons in the browser, using IndexedDB to store the data. It retrieves the icons from a given SVG file, stores them in IndexedDB, and inserts them into the DOM for easy access and use.}

^{1kB gzipped}

Demo

➤ Install

$ yarn add iconly

➤ Import

import Iconly from 'iconly';

➤ Usage

const iconly = new Iconly({
  file: './sprite.svg',
  version: '1.0',
  debug: true,
});

iconly.init().then(() => console.log('Iconly is initialized and icons are loaded.'));

<svg>
  <use href="#icon-name"></use>
</svg>

_{File with icons}

<svg preserveAspectRatio="none" fill="none">
  <symbol id="icon-one" viewBox="0 0 300 300">
    <path ... />
  </symbol>
  <symbol id="icon-two" viewBox="0 0 300 300">
    <path ... />
  </symbol>
  ...
</svg>

➤ Options

Option	Type	Default	Description
file	string	'./icons.svg'	The URL of the SVG file containing the icons.
version	string	'1.0'	The version of the icon set.
debug	boolean	false	If true, debug information and errors will be logged to the console.
container	string | HTMLElement	document.body	The container element where the icons will be injected. Can be a CSS selector string or an HTMLElement.

➤ License

iconly is released under MIT license