README

用法

1 - 通过 cdn

<script src="https://unpkg.com/codethereal-iconpicker@1.2.1/dist/iconpicker.js"></script>

2 - 通过 npm

npm i codethereal-iconpicker

import Iconpicker from 'codethereal-iconpicker'

3 - 或者直接下载 git 仓库，在 dist 目录下获取文件并导入

<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))

选项

(async () => {
    const response = await fetch('https://unpkg.com/codethereal-iconpicker@1.2.1/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
})()

与 font awesome 一起使用

(async () => {
  const response = await fetch('https://unpkg.com/codethereal-iconpicker@1.2.1/dist/iconsets/fontawesome4.json')
  const result = await response.json()

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