Iconpicker for Bootstrap 5 Icons

Iconpicker for Bootstrap 5 (Also you can use it with fontawesome of any other using valueFormat option)

Iconpicker for Bootstrap 5 (Also you can use it with fontawesome of any other using valueFormat option)

Usage

1 - Via cdn (latest)

<script src="http://cdn.codethereal.com/iconpicker/dist/iconpicker.js"></script>

2 - Via npm

npm i codethereal-iconpicker

import Iconpicker from 'codethereal-iconpicker'

3 - Or just download the git repo and get file under dist directory and import it

<script src="/path/to/iconpicker.js"></script>

new Iconpicker(document.querySelector(".iconpicker"));
new Iconpicker(document.querySelector(".iconpicker"), options);
document.querySelectorAll('.iconpicker').forEach(picker => new Iconpicker(picker))

Options

new Iconpicker(document.querySelector(".iconpicker"), {
  //icons: [], // default: all of the icons (icon set if you want to use only some of them)
  showSelectedIn: document.querySelector(".selected-icon"), // default: none (element to show selected icon)
  searchable: true, // default: true (use the input as a search box)
  selectedClass: "selected", // default: true (selected icon class)
  containerClass: "my-picker", // default: (container class of biconpicker)
  hideOnSelect: true, // default true (hides the dropdown on select)
  fade: true, // default: false (fade animation)
  defaultValue: 'bi-alarm', // default: (default value)
  valueFormat: val => `bi ${val}` // default: bi ${val} (format the value instead of prefix in previous versions)
});

Use with font awesome

new Iconpicker(document.querySelector(".iconpicker"), {
  icons: ['fa-times', 'fa-check'],
  valueFormat: val => `fa ${val}`

Download Details:

Author: dogukanakkaya

Source Code: https://github.com/dogukanakkaya/iconpicker

bootstrap javascript

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

In this JavaScript and Bootstrap 5 tutorial, we’ll look at how to add modals with JavaScript and Bootstrap 5. Bootstrap 5 is in alpha when this is written and it’s subject to change. Bootstrap is a popular UI library for any JavaScript apps.

In this Bootstrap 5 tutorial, we’ll look at how to manipulate dropdowns with JavaScript and add content with Bootstrap 5. Bootstrap 5 is in alpha when this is written and it’s subject to change. Bootstrap is a popular UI library for any JavaScript apps.

We will explore how to modify and control Bootstrap components via the JavaScript interface. The Bootstrap framework offers a simple JavaScript interface for implementing interactive, custom components for web applications. Bootstrap is a CSS framework, to create a Bootstrap frontend, all you need is some knowledge of HTML and CSS