https://github.com/metaory/iconify-picker
Zero-dependency icon picker with built-in UI modes and native events
https://github.com/metaory/iconify-picker
Last synced: 30 days 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 2 months ago)
- Default Branch: master
- Last Pushed: 2025-04-24T19:39:16.000Z (about 2 months ago)
- Last Synced: 2025-04-28T23:05:29.995Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://metaory.github.io/iconify-picker/
- Size: 28.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Iconify Picker Web Component
A zero-dependency, framework-agnostic icon picker web component powered by Iconify.
## Features
- 🚀 Zero dependencies
- 🎨 Fully themeable
- 🔌 Framework agnostic
- 🎯 Multiple modes (inline, button, manual)
- 📦 Lightweight and fast
## Documentation
Visit our [documentation site](https://yourusername.github.io/iconify-picker/) for detailed usage instructions and examples.
Here’s a **README template** for an **Autonomous Mode Component**—tailored to your standards. It emphasizes declarative usage, minimalism, browser-native behavior, and styling flexibility.
# ``
**Autonomous Mode Web Component** for selecting icons from any [Iconify](https://iconify.design/) collection.
- âš¡ **Zero dependencies**
- 🎯 **Autonomous behavior**: configurable via attributes
- 🎨 **Styleable** with CSS custom properties
- 🧩 **Interoperable** with any framework or HTML
- 🧠**Event-driven** and imperatively accessible
---
## Install
Via CDN:
```html
```
Or npm:
```bash
npm install iconify-picker
```
---
## Usage
### Always Visible Picker
```html
```
### Button-Toggled Picker
```html
```
### Programmatic Display
```html
picker.show(); // Open picker manually
```
---
## Attributes
| Attribute | Description |
|---------------|----------------------------------------------|
| `collection` | Iconify collection ID (e.g. `mdi`, `lucide`) |
| `mode` | `inline` (default), `button`, `manual` |
| `button-label`| Label for button (in `button` mode) |
| `theme` | Optional: `light`, `dark`, or custom |
| `filter` | Initial filter query |
---
## Events
| Event | Detail Payload |
|------------------|-----------------------------------------|
| `icon-selected` | `{ name, collection, category }` |
```js
picker.addEventListener('icon-selected', (e) => {
console.log(e.detail.name);
});
```
---
## Methods
| Method | Description |
|--------------|---------------------------|
| `.show()` | Show picker |
| `.hide()` | Hide picker |
| `.toggle()` | Toggle visibility |
| `.reset()` | Clear filter/selection |
| `.focus()` | Focus search input |
---
## Styling
Customize with CSS custom properties:
```html
```
### Exposed Parts (for `::part()`)
```css
iconify-picker::part(button) {
padding: 0.5rem 1rem;
background: var(--picker-accent);
}
```
---
## Autonomous Mode Pattern
This component follows the **Autonomous Mode** pattern:
- Declarative configuration (``)
- Built-in display modes (`inline`, `button`, `manual`)
- Style control via custom properties + `::part()`
- No framework, no setup required
---
## Development
```bash
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
```
## License
[MIT](LICENSE)