Home Bootstrap Bootstrap Themeable Icon Picker In Vanilla JavaScript

Bootstrap Themeable Icon Picker In Vanilla JavaScript

Bootstrap webcodeflow · January 17, 2023 · 0 Comment

Vanilla Icon Picker is a customizable and themeable icon picker that currently supports the latest Font Awesome 5 icon set.

How to make use of it:

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

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

2. Upload a topic of your choice into the document.

<!-- 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 like input or button.

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

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

4. Set icon picker theme.

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

5. Decide if you want to close the icon picker after selecting an icon.

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

6. 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);

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