Universal Icon Picker For Popular Icon libraries

Preview:

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:

• Font Awesome (All, Solid, Regular, Brands)
• Material Icons (Filled, Outlined, Round, Sharp, Two-tone)
• Bootstrap Icons
• Elegant Icons
• Feather Icons
• Foundation Icons
• Icomoon
• Open-iconic
• Tabler Icons
• Weather Icons
• Zondicons
• Fomantic UI icons

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
});

Changelog:

v1.1.6 (03/31/2023)

• update

v1.1.5 (02/09/2023)

• add Fomantic UI icons