2 - Via npm npm" /> 2 - Via npm npm" /> 2 - Via npm npm"/>

Iconpicker for Bootstrap 5 icons

Overview

Iconpicker for Bootstrap 5

Usage

1 - Via cdn

<script src="https://unpkg.com/[email protected]/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

(async () => {
    const response = await fetch('https://unpkg.com/[email protected]/dist/iconsets/bootstrap5.json')
    const result = await response.json()

    const iconpicker = new Iconpicker(document.querySelector(".iconpicker"), {
        icons: result,
        showSelectedIn: document.querySelector(".selected-icon"),
        searchable: true,
        selectedClass: "selected",
        containerClass: "my-picker",
        hideOnSelect: true,
        fade: true,
        defaultValue: 'bi-alarm',
        valueFormat: val => `bi ${val}`
    });

    iconpicker.set() // Set as empty
    iconpicker.set('bi-alarm') // Reset with a value
})()

Use with font awesome

(async () => {
  const response = await fetch('https://unpkg.com/[email protected]/dist/iconsets/fontawesome4.json')
  const result = await response.json()

  new Iconpicker(document.querySelector(".iconpicker"), {
    icons: result,
    valueFormat: val => `fa ${val}`
  })
})()
You might also like...

Add icons to the AtCoder standings table according to ratings.

Add icons to the AtCoder standings table according to ratings.

ac-rating-icon AtCoder のコンテスト順位表に、レーティングに対応したアイコンを追加するユーザースクリプトです。 アイデア元: https://twitter.com/e869120/status/1519310341024677888 灰色の細分化について 内部レート 0 以上

May 6, 2022

🚀 Hero Icons for Flutjs

FLUT-HERO ⚔ Hero Icons for Flutjs Welcome! this package contains a set of icons widgets for Flutjs framework. All the svg source where made by the awe

Jun 16, 2022

Transform your icons with trendy animations.

iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation

Dec 27, 2022

SVG icons for popular brands

Simple Icons Over 2200 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be ma

Jan 1, 2023

jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree.

 jQueryFileExplorer  Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree.

jQueryFileExplorer Inspired by jQueryFiletree. Most of the icons in the images folder are from jQueryFiletree. Split.js is included and used to provid

Oct 28, 2022

Basic styling to create calendar icons with pure HTML and CSS

Calendar Icon Basic styling to create calendar icons with pure HTML and CSS Usage Embed the CSS, and markup your date: link type="text/css" rel="styl

Aug 23, 2022

CSS sprite to represent iOS shortcut icons

shortcut-icons A CSS sprite to represent iOS shortcut icons. Grab the stylesheet and the default (iOS 15) glyph set, and add a shortcut icon to your H

Nov 14, 2022

A library of icons rendered purely in CSS and compiled using SASS.

Welcome to PureIcons.css: This is a library of icons rendered purely in CSS and compiled using SASSs. It is currently at 79 icons. More will be added

Apr 27, 2021

Pure CSS icons for popular file extensions

Pure CSS icons for popular file extensions

CSS file icons Pure CSS file icons for popular extensions lightweight css library Icons Demo Usage Include css-file-icons.css to html or install via n

Dec 6, 2022
Owner
Doğukan Akkaya
Doğukan Akkaya
Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Custom icon library Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. Upon each Material Design

Marius 12 Dec 12, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
🍱 Simple nodejs support for using icons!

?? node-icons Usage Checkout its unit tests to see complete usage with output! import Icons from "node-icons"; const icons = Icons({ // auto install

(TS/JS).Gandalf(he/him) 6 Dec 29, 2021
Cloud function to generate basic icons, splash screens, and favicons.

Example: https://icogen.vercel.app/api/icon?color=white&padding=300&icon_id=1f1f1-1f1fa Can be used in Expo apps via app.json: { "expo": { "icon

Evan Bacon 13 Jan 2, 2023
You only need 5 icons to meet most needs!

pwa-icons-generator You only need 5 icons to meet most needs! Don't believe me? Check out this awesome article written by the author of PostCSS and Au

Евгений Епифанов 21 Aug 8, 2022