https://github.com/metaory/iconify-picker
Zero-dependency icon picker with built-in UI modes and native events
https://github.com/metaory/iconify-picker
icon icon-browser icon-picker iconify iconpicker icons npm pin web-component
Last synced: about 2 months ago
JSON representation
Zero-dependency icon picker with built-in UI modes and native events
- Host: GitHub
- URL: https://github.com/metaory/iconify-picker
- Owner: metaory
- License: mit
- Created: 2025-04-18T07:27:47.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-12-24T00:39:20.000Z (6 months ago)
- Last Synced: 2025-12-25T13:39:32.454Z (6 months ago)
- Topics: icon, icon-browser, icon-picker, iconify, iconpicker, icons, npm, pin, web-component
- Language: JavaScript
- Homepage: https://metaory.github.io/iconify-picker/
- Size: 219 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Iconify Picker Web Component
Zero-dependency, framework-agnostic icon picker powered by Iconify.
## Install
- Package managers:
- `npm install iconify-picker`
- `pnpm add iconify-picker`
- CDN:
- `https://cdn.jsdelivr.net/npm/iconify-picker@0.6.2/lib/iconify-picker.js`
- `https://unpkg.com/iconify-picker@0.6.2/lib/iconify-picker.js`
## Use
Module import (npm/pnpm)
```js
import 'iconify-picker' // registers
// or: import IconifyPicker from 'iconify-picker'
```
```html
```
CDN
```html
```
Button mode
```html
```
Manual control
```html
picker.show()
picker.addEventListener('icon-selected', (e) => console.log(e.detail.iconName))
```
Hide search or collection dropdown
```html
```
## Attributes
`collection`, `mode` (`inline`|`button`|`manual`), `button-label`, `theme` (`light`|`dark`|`auto`), `filter`, `search`, `page-size`, `selected`, `height`, `hidden`, `hide-search`, `hide-collection`
## Events
- `icon-selected`: `{ iconName, collection, name, svg }`
- `change`: same payload for form compatibility
## Methods
`.show()`, `.hide()`, `.toggle()`, `.reset()`, `.focus()`
## Styling
CSS custom properties prefixed with `--picker-*` (colors, radius, borders, spacing, scrollbar). Shadow parts: `container`, `header`, `footer`, `search`, `select`, `grid`, `icon`, `icon-image`, `button`, `pagination`.
## References
- Docs site: https://metaory.github.io/iconify-picker/
- Vanilla example: `examples/vanilla/index.html`
- Package: `lib/iconify-picker.js`
## Development
```bash
pnpm install
pnpm run dev
pnpm run build
```
## License
MIT