Universal Icon Picker

Language: Vanilla JS Dependencies: none GitHub file size in bytes GPLv3 license

Nice small Javascript Icon Picker for any icon library

Vanilla JavascriptNo dependency2.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
  • Foundation Icons
  • Happy Icons
  • Icomoon
  • Open-iconic
  • Tabler Icons
  • Weather Icons
  • Zondicons

Installation

Clone / download or install with npm

  npm install @migliori/[email protected]

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
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.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

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

Screenshots

Universal Icon Picker Screenshot

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

License

GNU GPLv3

Credits

Thanks to Sabbir for his Aesthetic Icon Picker, which gave me a clean & strong base code for this project.

GitHub

View Github