4

GitHub - migliori/universal-icon-picker: Vanilla JS Icon Picker for any Icon Lib...

 2 years ago
source link: https://github.com/migliori/universal-icon-picker
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Universal Icon Picker

Nice small Javascript Icon Picker for any icon library

Vanilla Javascript - No dependency - 2.6ko gzipped

Originally forked from aesthetic-icon-picker

https://universal-icon-picker.miglisoft.com

Features

  • Load any icon library from a single JSON file
  • Load the icon fonts stylesheets from local files or CDNs
  • Autoload the icon fonts (JSON + stylesheets) or load them only on request
  • Add as many icon libraries as you like to each instance of the plugin
  • Create multiple instances and triggers on the same page
  • Change the icon libraries attached to an instance whenever you want
  • Group icons of the same family by categories
  • Load one or more styles from the same icon family individually
  • Search / Filter icons
  • Built-in onSelect() and onReset() callback functions
  • Attach the Icon Picker to any HTML element
  • Add your favourite icon libraries very easily

Integrated icon libraries

Font Awesome

  • Solid
  • Regular
  • Brands

Material Icons

  • Filled
  • Outlined
  • Round
  • Sharp
  • Two-tone

Other icon libraries

  • Bootstrap Icons
  • Elegant Icons
  • Feather Icons
  • Foundation Icons
  • Happy Icons
  • Icomoon
  • Open-iconic
  • Tabler Icons
  • Weather Icons
  • Zondicons

Installation

Clone / download or install with npm

  npm install @migliori/[email protected]

Usage/Examples

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <button id="selector" title="Open the icon picker">Click to open</button>
    <script src="universal-icon-picker/assets/js/universal-icon-picker.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function(event) {
            var uip = new UniversalIconPicker('#selector', options);
        });
    </script>

</body>

</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.
Default: null
mode String 'autoload' or 'onrequest'. Default: 'autoload'
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

Example

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": "<i class=\"fa-solid fa-oil-can\"></i>",
            "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:

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

Screenshots

Universal Icon Picker Screenshot

Contributing

Contributions are always welcome!

Please contact us for any improvement suggestions or send your pull requests

Changelog

2022/02/23

  • First release
  • fix icon selections when changing the icon library programatically with setOptions()
  • update README

2022/02/26

  • detect absolute css urls starting without protocol ; ie: '//domain.com/my-font.css'
  • allow more complex trigger button selectors ; ie: '#div button["name=iconpicker-opener"]'
  • add the "onBeforeOpen" option
  • add the "onBeforeOpen" demo (demo 5)

License

GNU GPLv3

Credits

Thanks to Sabbir for his Aesthetic Icon Picker, which gave me a clean & strong base code for this project.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK