Author: | AppoloDev |
---|---|
Views Total: | 53 views |
Official Page: | Go to website |
Last Update: | October 2, 2023 |
License: | MIT |
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