Universal Icon Picker For Popular Icon libraries

Category: Javascript , Recommended | February 28, 2022
Author:migliori
Views Total:417 views
Official Page:Go to website
Last Update:February 28, 2022
License:MIT

Preview:

Universal Icon Picker For Popular Icon libraries

Description:

A customizable, beautiful icon picker for popular icon libraries like Font Awesome, Material Icons, Bootstrap Icons, and more.

It fetches icon data from JSON and Stylesheet and displays an icon selection popup where users are able to easily and quickly find the icon they need right.

Icon Libraries Supported:

How to use it:

1. Download and load the universal-icon-picker.js library.

<script src="assets/js/universal-icon-picker.min.js"></script>

2. Create an element to trigger the icon picker.

<button id="example">
  Open The Icon Picker
</button>

3. Initialize the UniversalIconPicker and specify the icon libraries to load.

var myIconPicker = new UniversalIconPicker('#example',{
    iconLibraries: [
      'bootstrap-icons.min.json',
      'elegant-icons.min.json',
      'feather-icons.min.json',
      'font-awesome.min.json',
      'foundation-icons.min.json',
      'happy-icons.min.json',
      'icomoon.min.json',
      'material-icons-filled.min.json',
      'material-icons-outlined.min.json',
      'material-icons-round.min.json',
      'material-icons-sharp.min.json',
      'material-icons-two-tone.min.jsonn',
      'open-iconic.min.json',
      'tabler-icons.min.json',
      'weather-icons.min.json',
      'zondicons.min.json',
    ],
    iconLibrariesCss: [
      // from CDN
      'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css',
      'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css',
      // OR from local
      'happy-icons.min.css',
    ],
});

4. Create an element to reset the icon picker.

<button id="clear">
  Reset The Icon Picker
</button>
var myIconPicker = new UniversalIconPicker('#example',{
    resetSelector: '#clear',
    onReset: function() {
      //  do something
    }
});

5. Trigger a function when an icon gets picked.

var myIconPicker = new UniversalIconPicker('#example',{
    onSelect: function(jsonIconData) {
      // jsonIconData.libraryId
      // jsonIconData.libraryName
      // jsonIconData.iconHtml
      // jsonIconData.iconMarkup
      // jsonIconData.iconClass
      // jsonIconData.iconText
  },
});

6. Update options.

myIconPicker.setOptions({
  // new options here
});

You Might Be Interested In:


Leave a Reply