{"_id":"@davicotico/iconpicker","_rev":"2-85d76cf0e446a85d4977166102087741","name":"@davicotico/iconpicker","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@davicotico/iconpicker","version":"1.0.0","keywords":["javascript-icon-picker","javascript-iconpicker","vanilla-iconpicker","icon-picker","iconpicker","icons","icon-font","javascript","typescript","tippyjs"],"author":{"url":"https://davidticona.com","name":"David Tomas Ticona Saravia"},"license":"MIT","_id":"@davicotico/iconpicker@1.0.0","maintainers":[{"name":"davicotico","email":"davicotico@yandex.com"}],"homepage":"https://github.com/davicotico/iconpicker#readme","bugs":{"url":"https://github.com/davicotico/iconpicker/issues"},"dist":{"shasum":"4cbff813ac8ccf43b20c17568bce84b03e10a55e","tarball":"https://registry.npmjs.org/@davicotico/iconpicker/-/iconpicker-1.0.0.tgz","fileCount":42,"integrity":"sha512-cafywdaL8kcVv0r8LDm5OhC5UO+lMNmQUpJTtj+Wo9j1ca3fByl72vvQ//oMJgU6EKgZlO771ooICx/miZ+lMA==","signatures":[{"sig":"MEUCICdCBfc5c2wYl1bPuRdfnTH7KAc+Y7XYTIxxeQwGvl3iAiEAmVNLFVC169zgao7kfY/qbCB3fruWx4zJZatieCAxrr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":387568},"main":"./lib/index.js","types":"./lib/index.d.ts","exports":{".":{"import":"./lib/index.js","require":"./lib/index.umd.js"}},"gitHead":"12fbe7dc46b6ebeea35ae65c6bac903832080f78","scripts":{"dev":"vite","build":"tsc && vite build --config vite.config-prod.ts","preview":"vite preview","build:page":"tsc && vite build --config vite-config-page.ts"},"_npmUser":{"name":"davicotico","email":"davicotico@yandex.com"},"repository":{"url":"git+https://github.com/davicotico/iconpicker.git","type":"git"},"_npmVersion":"10.8.3","description":"Vanilla Javascript Icon Picker (made with Typescript)","directories":{},"_nodeVersion":"20.17.0","dependencies":{"tippy.js":"^6.3.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.9","typescript":"^5.0.2","@types/node":"^20.4.2","vite-plugin-dts":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/iconpicker_1.0.0_1734842415885_0.13566306296742492","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@davicotico/iconpicker","version":"1.0.1","keywords":["javascript-icon-picker","javascript-iconpicker","vanilla-iconpicker","icon-picker","iconpicker","icons","icon-font","javascript","typescript","tippyjs"],"author":{"url":"https://davidticona.com","name":"David Tomas Ticona Saravia"},"license":"MIT","_id":"@davicotico/iconpicker@1.0.1","maintainers":[{"name":"davicotico","email":"davicotico@yandex.com"}],"homepage":"https://github.com/davicotico/iconpicker#readme","bugs":{"url":"https://github.com/davicotico/iconpicker/issues"},"dist":{"shasum":"1afc392ca57a9d2b033d405eb2fb88f8723b5d9f","tarball":"https://registry.npmjs.org/@davicotico/iconpicker/-/iconpicker-1.0.1.tgz","fileCount":29,"integrity":"sha512-Vejs8vSddCeO+JWzjWwy5yFwYSOk2Ya/1kYP3jxyPuHyIV2+Dr7a+e/ynCQ5Bw5/ZrSEkcJzAAyLk225LAZ1ZA==","signatures":[{"sig":"MEUCIQDHtadM8UOvID731V4VyOAUS53o6MGWIlDqcWD6ZVX0GgIgFaZmDtMFQuTyAdzV5vxGDkKTmO8sr49q1dQUIrbLVKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":369089},"main":"./lib/index.js","types":"./lib/index.d.ts","exports":{".":{"import":"./lib/index.js","require":"./lib/index.umd.js"},"./css":{"import":"./lib/css/","require":"./lib/css/"},"./iconsets/":{"import":"./lib/iconsets/","require":"./lib/iconsets/"}},"gitHead":"33cecd7d6af2eba5f55d509c62511872a8592b8c","scripts":{"dev":"vite","build":"tsc && vite build --config vite.config-prod.ts","preview":"vite preview","build:page":"tsc && vite build --config vite-config-page.ts"},"_npmUser":{"name":"davicotico","email":"davicotico@yandex.com"},"repository":{"url":"git+https://github.com/davicotico/iconpicker.git","type":"git"},"_npmVersion":"10.8.3","description":"Vanilla Javascript Icon Picker (made with Typescript)","directories":{},"_nodeVersion":"20.17.0","dependencies":{"tippy.js":"^6.3.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.9","typescript":"^5.0.2","@types/node":"^20.4.2","vite-plugin-dts":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/iconpicker_1.0.1_1735015000005_0.0065130695792468","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@davicotico/iconpicker","version":"1.0.2","description":"Vanilla Javascript Icon Picker (made with Typescript)","main":"./lib/index.js","publishConfig":{"access":"public"},"exports":{".":{"import":"./lib/index.js","require":"./lib/index.umd.js"},"./iconsets/":{"import":"./lib/iconsets/","require":"./lib/iconsets/"},"./css/":{"import":"./lib/css/","require":"./lib/css/"}},"repository":{"type":"git","url":"git+https://github.com/davicotico/iconpicker.git"},"author":{"name":"David Tomas Ticona Saravia","url":"https://davidticona.com"},"license":"MIT","bugs":{"url":"https://github.com/davicotico/iconpicker/issues"},"keywords":["javascript-icon-picker","javascript-iconpicker","vanilla-iconpicker","icon-picker","iconpicker","icons","icon-font","javascript","typescript","tippyjs"],"scripts":{"dev":"vite","build":"tsc && vite build --config vite.config-prod.ts","build:page":"tsc && vite build --config vite-config-page.ts","preview":"vite preview"},"devDependencies":{"@types/node":"^20.4.2","typescript":"^5.0.2","vite":"^4.3.9","vite-plugin-dts":"^3.3.0"},"dependencies":{"tippy.js":"^6.3.7"},"_id":"@davicotico/iconpicker@1.0.2","gitHead":"a512f4cb1c7fa9e423d618e2d957ea8527f1b521","types":"./lib/index.d.ts","homepage":"https://github.com/davicotico/iconpicker#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-/4tPvGyF2hp1uesWdsmdi9JQSXHnZPBnqGNVjIx9a60aBs4PQKuQNtkxH2nJyq6G74SP+yAQwDyVw+e0A9icww==","shasum":"7ba05636992b20a60b2ecc6fa61b66331c117677","tarball":"https://registry.npmjs.org/@davicotico/iconpicker/-/iconpicker-1.0.2.tgz","fileCount":29,"unpackedSize":369125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcEPRtTxo0e59no3LToVwRYQVkdE/kmEqaY4resPto9AiAKMn8eyzblxHfEr+aeZL7l6M3PwVRe1JRxb23rKcqRSw=="}]},"_npmUser":{"name":"davicotico","email":"davicotico@yandex.com"},"directories":{},"maintainers":[{"name":"davicotico","email":"davicotico@yandex.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/iconpicker_1.0.2_1735015779599_0.6888526325721616"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-22T04:40:15.778Z","modified":"2024-12-24T04:49:40.001Z","1.0.0":"2024-12-22T04:40:16.065Z","1.0.1":"2024-12-24T04:36:40.184Z","1.0.2":"2024-12-24T04:49:39.814Z"},"bugs":{"url":"https://github.com/davicotico/iconpicker/issues"},"author":{"name":"David Tomas Ticona Saravia","url":"https://davidticona.com"},"license":"MIT","homepage":"https://github.com/davicotico/iconpicker#readme","keywords":["javascript-icon-picker","javascript-iconpicker","vanilla-iconpicker","icon-picker","iconpicker","icons","icon-font","javascript","typescript","tippyjs"],"repository":{"type":"git","url":"git+https://github.com/davicotico/iconpicker.git"},"description":"Vanilla Javascript Icon Picker (made with Typescript)","maintainers":[{"name":"davicotico","email":"davicotico@yandex.com"}],"readme":"# ICONPICKER\r\nVanilla Javascript Icon Picker (made with Typescript)\r\n\r\n## [>>> Demo <<<](https://davidticona.com/demos/javascript-iconpicker/)\r\n\r\n## Features\r\n\r\n* Vanilla Javascript\r\n* Fully customizable (custom iconset, custom style)\r\n* Dark/Light mode\r\n* Lightweight (24 KB gzipped)\r\n\r\n## Installation\r\n\r\n### Via NPM\r\n\r\n```\r\nnpm i @davicotico/iconpicker\r\n```\r\n\r\n## Usage\r\n\r\nUsing a div element (inline)\r\n\r\n```html\r\n<div style=\"250px\" id=\"element-id\"></div>\r\n```\r\n\r\nOr using a button (open a popover)\r\n\r\n```html\r\n<button id=\"element-id\" class=\"btn btn-primary\"></button>\r\n```\r\n\r\n```javascript\r\nimport { IconPicker } from \"@davicotico/iconpicker\";\r\nimport '@davicotico/iconpicker/css/styles.css';\r\nimport '@davicotico/iconpicker/css/themes/dark.css';\r\nimport '@davicotico/iconpicker/css/themes/light.css';\r\nimport { bi } from '@davicotico/iconpicker/iconsets/bi'; /* bootstrap iconset */\r\n// or\r\n/*const iconset = ['fa-solid fa-home', 'fa-solid fa-star',...]; */\r\nconst iconPicker = new IconPicker('element-id', bi, 20, { iconButtonClass: 'btn btn-secondary' });\r\niconPicker.onChange((params) => {\r\n  console.log(params.icon);\r\n});\r\niconPicker.mount();\r\n```\r\n## Options\r\n\r\n```\r\n{\r\n  iconButtonClass: string;\r\n  selectedIconButtonClass: string;\r\n  navButtonClass: string;\r\n  inputPlaceholder: string;\r\n  inputClass: string;\r\n  arrowPrevIconClass: string;\r\n  arrowNextIconClass: string;\r\n  templateFooter: string;\r\n  placement: PopOverPlacement; // 'bottom' | 'top' | 'left' | 'right'\r\n  popoverTheme: string;\r\n}\r\n```\r\n\r\n## Methods\r\n\r\n### constructor(id: string, iconset: string[], pageSize: number, options: Options)\r\n\r\n```javascript\r\n//const iconset = ['fa-solid fa-home', 'fa-solid fa-star',...];\r\nvar iconPicker = new IconPicker('element-id', iconset, 30, {});\r\n```\r\n\r\n### setSelected(icon: string): void\r\n\r\n```javascript\r\niconPicker.setSelected('fa-solid fa-home');\r\n```\r\n\r\n### setPopoverTheme(theme: string): void\r\n\r\nOnly when the icon picker is a button\r\n\r\n```javascript\r\niconPicker.setPopoverTheme('dark'); // 'dark' | 'light'\r\n```\r\n\r\n### mount(): void\r\nBuild and renderize the icon picker\r\n\r\n```javascript\r\niconPicker.mount();\r\n```\r\n\r\n## Events\r\n\r\n### onChange(listener: (param: { icon: string, button: HTMLButtonElement} => void): void\r\n\r\n```javascript\r\niconPicker.onChange((params) => {\r\n  console.log('Icon: ' + params.icon);\r\n});\r\n```\r\n## License\r\n\r\nMIT\r\n\r\n## Changelog\r\n\r\n#### v1.0.2\r\n* fix: styles path\r\n\r\n#### v1.0.1\r\n* fix: iconsets path, styles path\r\n\r\n#### v1.0.0\r\n* First release\r\n\r\n## Contact\r\n\r\n[![Linkedin Badge](https://img.shields.io/badge/Linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/david-ticona-saravia/)\r\n\r\n[![Twitter](https://img.shields.io/twitter/url?url=https://x.com/davicotico?style=social&label=Follow%20%40davicotico)](https://x.com/davicotico)\r\n","readmeFilename":"README.md"}