Vanilla JS Icon Picker for any Icon Library
npm install @migliori/universal-icon-picker
onSelect() and onReset() callback functions
bash
npm install @migliori/universal-icon-picker@1.1.10
`
Usage/Examples
`html
`
Options
| option | type | value |
|------------------|------------|----------------------------------------------------------------------------------------------------------------------------------------|
| allowEmpty | Boolean | Add an empty icon selector in the beginning of each icon list.
Default: true |
| iconLibraries | Array | Array of JSON icon libraries in assets/icons-libraries.
Default: null |
| iconLibrariesCss | Array | Array of CSS icon libraries in assets/stylesheets or from any CDN. Leave empty if your page already loads them.
Default: null |
| mode | String | 'autoload' or 'onrequest'. Default: 'autoload' |
| parentElement | String | Selector for the parent element to attach the icon picker to. Default: body |
| onReset | Function | Callback function when the user clicks the reset button.
Default: null |
| onSelect | Function | Callback function when the user clicks the insert button.
Default: null |
| resetSelector | String | Selector for the HTML reset button on your page.
Default: null |
| language | String | Language code for the UI messages.
E.g.: 'en'
Default: navigator.language || navigator.userLanguage (browser language) |
| loadCustomCss | Boolean | If true, universal icon picker does not load its own css allowing for custom css. Default: false |
Configuring loaded assets
Universtal icon picker will retrieve some assets from the server based on where ths script itself was retrieved from (assets/js/universal-icon-picker.min.js) :
1. Icons from the assets/imagesfolder
2. Icon library json files from the assets/icon-libraries folder
Also, the naming of the library names in the sidebar is derived from their file name in assets/icon-libraries.
In most cases this will just work fine. For some installations, however, you need to adjust the exact paths from where to retrieve those assets.
$3
Three option settings overwrite the paths for the three icons used:
| option | type | value |
|------------------|----------|------------------------------------------------------|
| closeUrl | String | Path of the close button icon (some type of "x") |
| starUrl | String | Path of the star icon for the side bar |
| searchUrl | String | Path of the magnifying glass icon for the search bar |
$3
Library assets are defined by iconLibraries. If the library does include a slash (/) it is assumed to be an URL or path of the library's json file. If it does not include a slash the library is searched for in the assets/icon-libraries folder.
$3
`javascript
const options = {
iconLibraries: [
'happy-icons.min.json',
'font-awesome.min.json'
],
iconLibrariesCss: [
'happy-icons.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
],
resetSelector: '#uip-reset-btn',
onSelect: function(jsonIconData) {
document.getElementById('output-icon').innerHTML = jsonIconData.iconMarkup;
console.log(jsonIconData);
/* will output something like:
{
"libraryId": "fa-solid",
"libraryName": "fontAwesome",
"iconHtml": "",
"iconMarkup": "<i class="fa-solid fa-oil-can"></i>",
"iconClass": "fa-solid fa-oil-can",
"iconText": ""
}
*/
},
onReset: function() {
document.getElementById('output-icon').innerHTML = '';
}
}
// Instanciate the Icon Picker
var uip = new UniversalIconPicker('#selector', options);
`
See the source code of the demo for more examples
Public methods
- ### setOptions(options)
Update the options of an Icon Picker instance
Example:
`javascript
// Instanciate the Icon Picker
var uip = new UniversalIconPicker('#selector', options);
// later, change the icon libraries
uip.setOptions({
iconLibraries: ['weather-icons.min.json'],
iconLibrariesCss: ['weather-icons.min.css']
});
`
Live demo: https://universal-icon-picker.miglisoft.com/demo/demo-4.html
Change / Upgrade Fontawesome version & icons
A built-in tool is provided to get the Fontawesome icon list from the Fontawesome API and for Bootstrap icons to scrape the Bootstrap icon list from their website.
To choose the Fontawesome version:
1. open tools/fontawesome-icons-list.html in your code editor and change the version number:
`html
// set the fontawesome version version here
const fontawesomeVersion = '6.0.0';
`
2. open it in your browser to retrieve the JSON list
3. save the complete list in assets/icon-libraries/font-awesome.json and each style (brands, regular, solid) in the appropriate json file (assets/icon-libraries/font-awesome-brands.json, ...)
4. minify the json files to .min.json
For Fontawesome PRO users, you can use the tools/fontawesome-icons-list-pro.html file to retrieve the PRO icons. Read the instructions in the file.
For Bootstrap icons use tools/bootstrap-icons-list.html`. It scrapes the latest version from the website. You will need to add the version number manually to the generated json file.