{"id":18761056,"url":"https://github.com/migliori/universal-icon-picker","last_synced_at":"2025-03-17T15:12:29.377Z","repository":{"id":48912595,"uuid":"462671265","full_name":"migliori/universal-icon-picker","owner":"migliori","description":"Vanilla JS Icon Picker for any Icon Library","archived":false,"fork":false,"pushed_at":"2024-07-26T15:15:08.000Z","size":5035,"stargazers_count":80,"open_issues_count":3,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-05T00:27:41.413Z","etag":null,"topics":["html","icons","javascript","picker","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://universal-icon-picker.miglisoft.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/migliori.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-23T09:43:10.000Z","updated_at":"2025-01-04T09:31:32.000Z","dependencies_parsed_at":"2024-04-16T07:24:48.266Z","dependency_job_id":"29407e41-61a0-4f5e-83f8-2754bd525054","html_url":"https://github.com/migliori/universal-icon-picker","commit_stats":{"total_commits":22,"total_committers":3,"mean_commits":7.333333333333333,"dds":"0.13636363636363635","last_synced_commit":"36a9a075d4c6d3f08b094bf3727073345300cf15"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Funiversal-icon-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Funiversal-icon-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Funiversal-icon-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/migliori%2Funiversal-icon-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/migliori","download_url":"https://codeload.github.com/migliori/universal-icon-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056425,"owners_count":20390719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","icons","javascript","picker","vanilla-javascript"],"created_at":"2024-11-07T18:14:50.581Z","updated_at":"2025-03-17T15:12:29.349Z","avatar_url":"https://github.com/migliori.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Universal Icon Picker\n\n![Language: Vanilla JS](https://img.shields.io/badge/-vanilla%20js-555?logo=JavaScript)\n![Dependencies: none](https://img.shields.io/badge/dependencies-none-04B54E)\n![GitHub file size in bytes](https://img.shields.io/github/size/migliori/universal-icon-picker/assets/js/universal-icon-picker.min.js)\n[![GPLv3 license](https://img.shields.io/badge/License-GPLv3-blue.svg)](http://perso.crans.org/besson/LICENSE.html)\n\nNice small Javascript **Icon Picker for any icon library**\n\n*Vanilla Javascript* - *No dependency* - *2.6ko gzipped*\n\nOriginally forked from [aesthetic-icon-picker](https://github.com/sh-sabbir/aesthetic-icon-picker/tree/20d6aa6134311b44891809cc852dbf247a029495)\n\n## Demo\n\n[https://universal-icon-picker.miglisoft.com](https://universal-icon-picker.miglisoft.com)\n\n## Features\n\n- Load any icon library from a single JSON file\n- Load the icon fonts stylesheets from local files or CDNs\n- Autoload the icon fonts (JSON + stylesheets) or load them only on request\n- Add as many icon libraries as you like to each instance of the plugin\n- Create multiple instances and triggers on the same page\n- Change the icon libraries attached to an instance whenever you want\n- Group icons of the same family by categories\n- Load one or more styles from the same icon family individually\n- Search / Filter icons\n- Built-in `onSelect()` and `onReset()` callback functions\n- Attach the Icon Picker to any HTML element\n- Add your favourite icon libraries very easily\n\n## Integrated icon libraries\n\n### Font Awesome\n\n- All\n- Solid\n- Regular\n- Brands\n\n### Material Icons\n\n- Filled\n- Outlined\n- Round\n- Sharp\n- Two-tone\n\n### Other icon libraries\n\n- Bootstrap Icons\n- Elegant Icons\n- Feather Icons\n- Fomantic UI Icons\n- Foundation Icons\n- Happy Icons\n- Icomoon\n- Open-iconic\n- Tabler Icons\n- Weather Icons\n- Zondicons\n\n## Installation\n\nClone / download or install with npm\n\n```bash\n  npm install @migliori/universal-icon-picker@1.1.8\n```\n\n## Usage/Examples\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cbutton id=\"selector\" title=\"Open the icon picker\"\u003eClick to open\u003c/button\u003e\n    \u003cscript src=\"universal-icon-picker/assets/js/universal-icon-picker.min.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        document.addEventListener('DOMContentLoaded', function(event) {\n            var uip = new UniversalIconPicker('#selector', options);\n        });\n    \u003c/script\u003e\n\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n## Options\n\n| option           | type       | value                                                                                                                                  |\n|------------------|------------|----------------------------------------------------------------------------------------------------------------------------------------|\n| allowEmpty       | *Boolean*  | Add an empty icon selector in the beginning of each icon list.\u003cbr /\u003eDefault: true                                                      |\n| iconLibraries    | *Array*    | Array of JSON icon libraries in `assets/icons-libraries`.\u003cbr /\u003eDefault: `null`                                                         |\n| iconLibrariesCss | *Array*    | Array of CSS icon libraries in `assets/stylesheets` or from any CDN. Leave empty if your page already loads them.\u003cbr /\u003eDefault: `null` |\n| mode             | *String*   | `'autoload'` or `'onrequest'`. Default: `'autoload'`                                                                                   |\n| parentElement    | *String*   | Selector for the parent element to attach the icon picker to. Default: `body`                                                          |\n| onReset          | *Function* | Callback function when the user clicks the `reset` button.\u003cbr /\u003eDefault: `null`                                                        |\n| onSelect         | *Function* | Callback function when the user clicks the `insert` button.\u003cbr /\u003eDefault: `null`                                                       |\n| resetSelector    | *String*   | Selector for the HTML *reset* button on your page.\u003cbr /\u003eDefault: `null`                                                                |\n| language         | *String*   | Language code for the UI messages.\u003cbr /\u003eE.g.: 'en'\u003cbr\u003eDefault: `navigator.language || navigator.userLanguage` (browser language)                     |\n| loadCustomCss    | *Boolean*  | If true, universal icon picker does **not** load its own css allowing for custom css. Default: `false`                                 |\n## Configuring loaded assets\n\nUniverstal 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`) :\n\n1. Icons from the `assets/images`folder\n2. Icon library json files from the `assets/icon-libraries` folder\n\nAlso, the naming of the library names in the sidebar is derived from their file name in `assets/icon-libraries`.\n\nIn most cases this will just work fine. For some installations, however, you need to adjust the exact paths from where to retrieve those assets.\n\n### Configuring icon assets\n\nThree option settings overwrite the paths for the three icons used:\n\n| option           | type     | value                                                |\n|------------------|----------|------------------------------------------------------|\n| closeUrl         | *String* | Path of the close button icon (some type of \"x\")     |\n| starUrl          | *String* | Path of the star icon for the side bar               |\n| searchUrl        | *String* | Path of the magnifying glass icon for the search bar |\n\n### Configuring library assets\n\nLibrary 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.\n\n\n\n### Example\n\n```javascript\nconst options = {\n    iconLibraries: [\n        'happy-icons.min.json',\n        'font-awesome.min.json'\n    ],\n    iconLibrariesCss: [\n        'happy-icons.min.css',\n        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'\n    ],\n    resetSelector: '#uip-reset-btn',\n    onSelect: function(jsonIconData) {\n        document.getElementById('output-icon').innerHTML = jsonIconData.iconMarkup;\n\n        console.log(jsonIconData);\n        /* will output something like:\n        {\n            \"libraryId\": \"fa-solid\",\n            \"libraryName\": \"fontAwesome\",\n            \"iconHtml\": \"\u003ci class=\\\"fa-solid fa-oil-can\\\"\u003e\u003c/i\u003e\",\n            \"iconMarkup\": \"\u0026lt;i class=\u0026quot;fa-solid fa-oil-can\u0026quot;\u0026gt;\u0026lt;/i\u0026gt;\",\n            \"iconClass\": \"fa-solid fa-oil-can\",\n            \"iconText\": \"\"\n        }\n        */\n    },\n    onReset: function() {\n        document.getElementById('output-icon').innerHTML = '';\n    }\n}\n\n// Instanciate the Icon Picker\nvar uip = new UniversalIconPicker('#selector', options);\n```\n\nSee the source code of the [demo](https://universal-icon-picker.miglisoft.com) for more examples\n\n## Public methods\n\n- ### setOptions(options)\n\n  Update the *options* of an Icon Picker instance\n\n  Example:\n\n  ```javascript\n    // Instanciate the Icon Picker\n\n  var uip = new UniversalIconPicker('#selector', options);\n\n  // later, change the icon libraries\n  uip.setOptions({\n      iconLibraries: ['weather-icons.min.json'],\n      iconLibrariesCss: ['weather-icons.min.css']\n  });\n\n  ```\n\n  Live demo: [https://universal-icon-picker.miglisoft.com/demo/demo-4.html](https://universal-icon-picker.miglisoft.com/demo/demo-4.html)\n\n## Change / Upgrade Fontawesome version \u0026 icons\n\nA 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.\n\nTo choose the Fontawesome version:\n\n1. open `tools/fontawesome-icons-list.html` in your code editor and change the version number:\n\n    ```html\n    // set the fontawesome version version here\n    const fontawesomeVersion = '6.0.0';\n    ```\n\n2. open it in your browser to retrieve the JSON list\n\n3. 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`, ...)\n\n4. minify the json files to `.min.json`\n\nFor 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.\n\n## Screenshots\n\n![Universal Icon Picker Screenshot](https://universal-icon-picker.miglisoft.com/demo/assets/images/screenshot.png)\n\n## Contributing\n\nContributions are always welcome!\n\nPlease contact us for any improvement suggestions or send your pull requests\n\n## Changelog\n\n2024/09/26\n\n- add the type=\"button\" attribute to the icon picker button\n- add the parentElement option to attach the icon picker to a specific element\n\n2024/04/16\n\n- add language option to set the UI language\n\n2023/03/09\n\n- add loadCustomCss option\n- Double click inserts icon\n\n2023/02/09\n\n- add Fomantic UI icons\n\n2022/11/18\n\n- update npm package\n\n2022/02/26\n\n- detect absolute css urls starting without protocol ; ie: '//domain.com/my-font.css'\n- allow more complex trigger button selectors ; ie: '#div button[\"name=iconpicker-opener\"]'\n- add the \"onBeforeOpen\" option\n- add the \"onBeforeOpen\" demo (demo 5)\n\n2022/02/23\n\n- First release\n- fix icon selections when changing the icon library programatically with setOptions()\n- update README\n\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Credits\n\nThanks to Sabbir for his [Aesthetic Icon Picker](https://github.com/sh-sabbir/aesthetic-icon-picker/tree/20d6aa6134311b44891809cc852dbf247a029495), which gave me a clean \u0026 strong base code for this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigliori%2Funiversal-icon-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmigliori%2Funiversal-icon-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmigliori%2Funiversal-icon-picker/lists"}