ICONPICKER

Vanilla Javascript Icon Picker (made with Typescript)

>>> Demo <<<

Features

• Vanilla Javascript
• Fully customizable (custom iconset, custom style)
• Dark/Light mode
• Lightweight (24 KB gzipped)

Installation

Via NPM

npm i @davicotico/iconpicker

Usage

Using a div element (inline)

<div style="250px" id="element-id"></div>

Or using a button (open a popover)

<button id="element-id" class="btn btn-primary"></button>

import { IconPicker } from "@davicotico/iconpicker";
import '@davicotico/iconpicker/css/styles.css';
import '@davicotico/iconpicker/css/themes/dark.css';
import '@davicotico/iconpicker/css/themes/light.css';
import { bi } from '@davicotico/iconpicker/iconsets/bi'; /* bootstrap iconset */
// or
/*const iconset = ['fa-solid fa-home', 'fa-solid fa-star',...]; */
const iconPicker = new IconPicker('element-id', bi, 20, { iconButtonClass: 'btn btn-secondary' });
iconPicker.onChange((params) => {
  console.log(params.icon);
});
iconPicker.mount();

Options

{
  iconButtonClass: string;
  selectedIconButtonClass: string;
  navButtonClass: string;
  inputPlaceholder: string;
  inputClass: string;
  arrowPrevIconClass: string;
  arrowNextIconClass: string;
  templateFooter: string;
  placement: PopOverPlacement; // 'bottom' | 'top' | 'left' | 'right'
  popoverTheme: string;
}

Methods

constructor(id: string, iconset: string[], pageSize: number, options: Options)

//const iconset = ['fa-solid fa-home', 'fa-solid fa-star',...];
var iconPicker = new IconPicker('element-id', iconset, 30, {});

setSelected(icon: string): void

iconPicker.setSelected('fa-solid fa-home');

setPopoverTheme(theme: string): void

Only when the icon picker is a button

iconPicker.setPopoverTheme('dark'); // 'dark' | 'light'

mount(): void

Build and renderize the icon picker

iconPicker.mount();

Events

onChange(listener: (param: { icon: string, button: HTMLButtonElement} => void): void

iconPicker.onChange((params) => {
  console.log('Icon: ' + params.icon);
});

License

MIT

Changelog

v1.0.2

• fix: styles path

v1.0.1

• fix: iconsets path, styles path

v1.0.0

• First release

Contact