Themeable Icon Picker In Vanilla JavaScript

Category: Javascript | November 18, 2021
Author:AppoloDev
Views Total:32 views
Official Page:Go to website
Last Update:November 18, 2021
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’.

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

7. API methods.

// open the icon picker
iconPickerDemo.open();

// close the icon picker
iconPickerDemo.hide();

// 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('show', instance => {
  // do something
});

iconPickerDemo.on('hide', instance => {
  // do something
});

Changelog:

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