lepticons-picker 0.2.0

Embeddable icon picker component for Leptos, powered by Lucide icons.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

# lepticons-picker

Embeddable icon picker for [Leptos](https://leptos.dev) applications, powered by [Lucide](https://lucide.dev) icons.

Part of the [Lepticons](https://github.com/eugener/lepticons) toolkit.

## Quick Start

```rust
use lepticons::LucideGlyph;
use lepticons_picker::IconPickerPopover;
use leptos::prelude::*;

let (icon, set_icon) = signal(None::<LucideGlyph>);

view! {
    <IconPickerPopover
        selected=icon
        on_select=Callback::new(move |g| set_icon.set(Some(g)))
    >
        <button>"Choose icon"</button>
    </IconPickerPopover>
}
```

## Components

### IconPicker

Inline picker with search, category filter, and selectable grid.

```rust
<IconPicker
    selected=icon
    on_select=Callback::new(move |g| set_icon.set(Some(g)))
/>
```

### IconPickerPopover

Popover wrapper -- shows the picker in a dropdown when a trigger element is clicked.

### IconSearch

Standalone debounced search input with search/clear icons.

### IconGrid

Standalone selectable icon grid with tooltips.

### CategoryFilter

Standalone category list with icon counts.

## Customization

All components accept `class` props for full CSS override. Default styling uses CSS custom properties with inline fallbacks:

```css
:root {
  --lp-bg: #ffffff;
  --lp-bg-hover: #f5f5f5;
  --lp-bg-selected: rgba(192, 58, 23, 0.1);
  --lp-text: #1a1a1a;
  --lp-text-muted: #666666;
  --lp-border: #e5e5e5;
  --lp-border-selected: rgba(192, 58, 23, 0.8);
  --lp-radius: 0.5rem;
  --lp-cell-size: 40px;
  --lp-tooltip-bg: rgba(192, 58, 23, 0.9);
  --lp-tooltip-text: #ffffff;
}
```

Tailwind users: pass classes via `class`, `cell_class`, etc. props. Inline style fallbacks have lower specificity and won't conflict.

## Related Crates

- [lepticons](https://crates.io/crates/lepticons) -- core icon library (required dependency)
- [lepticons-animate](https://crates.io/crates/lepticons-animate) -- stroke draw-in and CSS utility animations

## Requirements

- Leptos 0.8.x
- lepticons 0.10.x

## Demo

[lepticons.vercel.app](https://lepticons.vercel.app)

## License

MIT