Author: | dogukanakkaya |
---|---|
Views Total: | 3,679 views |
Official Page: | Go to website |
Last Update: | July 9, 2021 |
License: | MIT |
Preview:

Description:
A Bootstrap 5 based icon picker that supports any icon libraries like Bootstrap Icons, Font Awesome, etc.
How to use it:
1. Load the latest Bootstrap 5 framework and the iconpicker’s files in the document.
<!-- Bootstrap 5 --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script> <!-- Icon Picker --> <script src="/path/to/dist/iconpicker.js"></script>
2. Or install & import the iconpicker with NPM.
# NPM $ npm i codethereal-iconpicker
import Iconpicker from 'codethereal-iconpicker'
3. Load an icon library in the document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
4. Build the HTML for the icon picker.
<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text h-100 selected-icon"></span> </div> <input type="text" class="form-control iconpicker"> </div>
5. Import icons and then initialize the icon picker. Done.
(async () => { const response = await fetch('/path/to/dist/iconsets/bootstrap5.json') const result = await response.json() const iconpicker = new Iconpicker(document.querySelector(".iconpicker"), { icons: result, showSelectedIn: document.querySelector(".selected-icon"), defaultValue: 'bi-alarm', }); iconpicker.set() // Set as empty iconpicker.set('bi-alarm') // Reset with a value })()
6. Use another icon library (Font Awesome Iconic Font in this example) by overriding the value format as follows:
new Iconpicker(document.querySelector('.iconpicker'), { showSelectedIn: document.querySelector('.selected-icon'), icons: ['fa-times', 'fa-check'], valueFormat: val => `fa ${val}` })
7. All default options:
new Iconpicker(document.querySelector('.iconpicker'), { // hide the icon picker on select hideOnSelect: true, // CSS class added to the selected icon selectedClass: 'selected', // default icon defaultValue: '', // all icons icons: ['bi-alarm-fill', ...], // is searchable? searchable: true, // CSS class added to the container containerClass: '', // element to show selected icon showSelectedIn: '', // enable fade animation fade: false, // custom value format valueFormat: val => `bi ${val}`, })
8. Set icons manually.
// reset iconpicker.set() // or iconpicker.set('') // set an icon iconpicker.set('bi-alarm')
Changelog:
v1.2.1 (07/09/2021)
- icons moved to json files, unnecessary codes removed
v1.1.5 (02/23/2021)
- 47 new icons added
v1.1.4 (02/07/2021)
- reset func -> set func