@migliori/universal-icon-picker NPM

Universal Icon Picker

Nice small Javascript Icon Picker for any icon library

Vanilla Javascript - No dependency - 2.6ko gzipped

Originally forked from aesthetic-icon-picker

Demo

https://universal-icon-picker.miglisoft.com

Features

Load any icon library from a single JSON file
Load the icon fonts stylesheets from local files or CDNs
Autoload the icon fonts (JSON + stylesheets) or load them only on request
Add as many icon libraries as you like to each instance of the plugin
Create multiple instances and triggers on the same page
Change the icon libraries attached to an instance whenever you want
Group icons of the same family by categories
Load one or more styles from the same icon family individually
Search / Filter icons
Built-in onSelect() and onReset() callback functions
Attach the Icon Picker to any HTML element
Add your favourite icon libraries very easily

Integrated icon libraries

Font Awesome

All
Solid
Regular
Brands

Material Icons

Filled
Outlined
Round
Sharp
Two-tone

Other icon libraries

Bootstrap Icons
Elegant Icons
Feather Icons
Fomantic UI Icons
Foundation Icons
Happy Icons
Icomoon
Open-iconic
Tabler Icons
Weather Icons
Zondicons

Installation

Clone / download or install with npm

  npm install @migliori/universal-icon-picker@1.1.6

Usage/Examples

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <button id="selector" title="Open the icon picker">Click to open</button>
    <script src="universal-icon-picker/assets/js/universal-icon-picker.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function(event) {
            var uip = new UniversalIconPicker('#selector', options);
        });
    </script>

</body>

</html>

Options

option	type	value
allowEmpty	Boolean	Add an empty icon selector in the beginning of each icon list.Default: true
iconLibraries	Array	Array of JSON icon libraries in `assets/icons-libraries`.Default: `null`
iconLibrariesCss	Array	Array of CSS icon libraries in `assets/stylesheets` or from any CDN. Leave empty if your page already loads them.Default: `null`
mode	String	`'autoload'` or `'onrequest'`. Default: `'autoload'`
onReset	Function	Callback function when the user clicks the `reset` button.Default: `null`
onSelect	Function	Callback function when the user clicks the `insert` button.Default: `null`
resetSelector	String	Selector for the HTML reset button on your page.Default: `null`
loadCustomCss	Boolean	If true, universal icon picker does not load its own css allowing for custom css. Default: `false`

Example

const options = {
    iconLibraries: [
        'happy-icons.min.json',
        'font-awesome.min.json'
    ],
    iconLibrariesCss: [
        'happy-icons.min.css',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
    ],
    resetSelector: '#uip-reset-btn',
    onSelect: function(jsonIconData) {
        document.getElementById('output-icon').innerHTML = jsonIconData.iconMarkup;

        console.log(jsonIconData);
        /* will output something like:
        {
            "libraryId": "fa-solid",
            "libraryName": "fontAwesome",
            "iconHtml": "<i class=\"fa-solid fa-oil-can\"></i>",
            "iconMarkup": "&lt;i class=&quot;fa-solid fa-oil-can&quot;&gt;&lt;/i&gt;",
            "iconClass": "fa-solid fa-oil-can",
            "iconText": ""
        }
        */
    },
    onReset: function() {
        document.getElementById('output-icon').innerHTML = '';
    }
}

// Instanciate the Icon Picker
var uip = new UniversalIconPicker('#selector', options);

See the source code of the demo for more examples

Public methods

setOptions(options)

Update the options of an Icon Picker instance

Example:

  // Instanciate the Icon Picker

var uip = new UniversalIconPicker('#selector', options);

// later, change the icon libraries
uip.setOptions({
    iconLibraries: ['weather-icons.min.json'],
    iconLibrariesCss: ['weather-icons.min.css']
});

Live demo: https://universal-icon-picker.miglisoft.com/demo/demo-4.html

Change / Upgrade Fontawesome version & icons

A built-in tool is provided to get the Fontawesome icon list from the Fontawesome API.

To choose the Fontawesome version:

open tools/fontawesome-icons-list.html in your code editor and change the version number:
```
// set the fontawesome version version here
const fontawesomeVersion = '6.0.0';
```
open it in your browser to retrieve the JSON list
save the complete list in assets/icon-libraries/font-awesome.json and each style (brands, regular, solid) in the appropriate json file (assets/icon-libraries/font-awesome-brands.json, ...)
minify the json files to .min.json

Screenshots

Contributing

Contributions are always welcome!

Please contact us for any improvement suggestions or send your pull requests

Changelog

2022/02/23

First release
fix icon selections when changing the icon library programatically with setOptions()
update README

2022/02/26

detect absolute css urls starting without protocol ; ie: '//domain.com/my-font.css'
allow more complex trigger button selectors ; ie: '#div button"name=iconpicker-opener"'
add the "onBeforeOpen" option
add the "onBeforeOpen" demo (demo 5)

2022/11/18