Themeable Icon Picker In Vanilla JavaScript

Category: Javascript | October 2, 2023
Author:AppoloDev
Views Total:53 views
Official Page:Go to website
Last Update:October 2, 2023
License:MIT

Preview:

Themeable Icon Picker In Vanilla JavaScript

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

You Might Be Interested In:


Leave a Reply