Themeable Icon Picker In Vanilla JavaScript

Preview:

Description:

A customizable, themeable icon picker that supports popular icon libraries like Font Awesome 5, Material Design Icons, and much more.

How to use it:

1. Load the main script icon-picker.min.js at the end of the document.

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

2. Load a theme of your choice in the document. The library currently comes with 2 themes:

• Default
• Bootstrap 5

<!-- Default Theme -->
<link rel="stylesheet" href="dist/themes/default.min.css">

<!-- Bootstrap 5 Theme (Requires Bootstrap 5 Stylesheet) -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="dist/themes/bootstrap-5.min.css">

3. Attach the icon picker to a trigger element like input or button.

<input type="text" id="icon-picker">

const iconPickerDemo = new IconPicker('input', {
      // options here
});

4. Set the theme of the icon picker.

const iconPickerDemo = new IconPicker('input', {
      theme: 'bootstrap-5',
});

5. Determine whether to close the icon picker after an icon has been selected. Default: true.

const iconPickerDemo = new IconPicker('input', {
      closeOnSelect: false,
});

6. Add more icon libraries to the icon picker. ‘FontAwesome Brands 5’ | ‘FontAwesome Solid 5’ | ‘FontAwesome Regular 5’ | ‘Material Design Icons’ | ‘Iconoir’, or a custom JSON path.

const iconPickerDemo = new IconPicker('input', {
      iconSource: [],
});

const iconPickerDemo = new IconPicker('input', { 
      iconSource: [
      {
        key: 'academicons',
        prefix: 'ai ai-',
        url: 'https://raw.githubusercontent.com/iconify/icon-sets/master/json/academicons.json'
      }], 
});

7. API methods.

// open the icon picker
iconPickerDemo.open();
// close the icon picker
iconPickerDemo.hide();
// clear the icon
iconPickerDemo.clear();
// check if the icon picker is opened
iconPickerDemo.isOpen();
// destroy the instance
iconPickerDemo.destroy(deleteInstance);

8. Event handlers.

iconPickerDemo.on('select', (icon) => {
  // do something
});
iconPickerDemo.on('save', (icon) => {
  // do something
});
iconPickerDemo.on('clear', (icon) => {
  // do something
});
iconPickerDemo.on('show', instance => {
  // do something
});
iconPickerDemo.on('hide', instance => {
  // do something
});

Changelog:

v1.2.1 (10/03/2023)

• Update

v1.2.0 (07/22/2023)

• Add clear() method
• Allow setting of ‘iconFormat’ in icon json so we can improve performance

v1.1.3 (04/01/2022)

• Update dependencies and resolve deprecated webpack’s plugin
• fix: Accessibility improvement

v1.1.2 (03/31/2022)

• Updated dependencies

v1.1.0 (03/11/2022)

• Add custom json path
• Fix z-index problem

v1.0.0 (11/18/2021)

• Add possibility to add more icons library
• Set default value for input target

11/15/2021

• fix: Add missing ‘!default’ and add variables