lepticons 0.13.0

Lucide icons as a Leptos component with category-based features.
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

# lepticons

[Lucide](https://lucide.dev) icons for [Leptos](https://leptos.dev) applications.
Icons are grouped into 42 category features for selective compilation.

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

## Usage

```rust
use lepticons::{Icon, LucideGlyph};

// Basic usage
<Icon glyph=LucideGlyph::Search />

// With attributes
<Icon glyph=LucideGlyph::Heart class="text-red-500" size="32" stroke_width="2" />

// Reactive (icon changes based on state)
<Icon glyph=Signal::derive(move || {
    if dark_mode.get() { LucideGlyph::Moon } else { LucideGlyph::Sun }
}) />
```

## Installation

```toml
# All icons (default)
lepticons = "0.13"

# Only specific categories
lepticons = { version = "0.12", default-features = false, features = ["arrows", "navigation", "design"] }
```

Available categories: `accessibility`, `account`, `animals`, `arrows`, `buildings`, `charts`,
`communication`, `connectivity`, `cursors`, `design`, `development`, `devices`, `emoji`, `files`,
`finance`, `food_beverage`, `gaming`, `home`, `layout`, `mail`, `math`, `medical`, `multimedia`,
`nature`, `navigation`, `notifications`, `people`, `photography`, `science`, `seasons`, `security`,
`shapes`, `shopping`, `social`, `sports`, `sustainability`, `text`, `time`, `tools`,
`transportation`, `travel`, `weather`.

## Icon Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `glyph` | `impl Into<Signal<LucideGlyph>>` | required | The icon to render |
| `class` | `impl Into<TextProp>` | `""` | CSS class |
| `size` | `impl Into<TextProp>` | `"24"` | Width and height in pixels |
| `fill` | `impl Into<TextProp>` | `"none"` | SVG fill color |
| `stroke` | `impl Into<TextProp>` | `"currentColor"` | SVG stroke color |
| `stroke_width` | `impl Into<TextProp>` | `"1.5"` | SVG stroke width |

All string props accept `&str`, `String`, signals, or closures (`Fn() -> String`).
The `glyph` prop accepts a `LucideGlyph` value directly or a `Signal<LucideGlyph>`.

## CustomIcon Component

For brand logos, in-house icons, or anything missing from Lucide. Same prop API as `Icon`,
but takes inline SVG markup via the `svg` prop. Markup must be authored against a `0 0 24 24`
viewBox to match Lucide's defaults.

```rust
use lepticons::CustomIcon;

const COMPANY_LOGO: &str = r#"<path d="M12 2L2 7l10 5 10-5-10-5z" />"#;

view! {
    <CustomIcon svg=COMPANY_LOGO class="text-primary" size="32" />
}
```

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `svg` | `impl Into<TextProp>` | required | Inner SVG markup (paths, circles, etc.) |
| `class` | `impl Into<TextProp>` | `""` | CSS class |
| `size` | `impl Into<TextProp>` | `"24"` | Width and height in pixels |
| `fill` | `impl Into<TextProp>` | `"none"` | SVG fill color |
| `stroke` | `impl Into<TextProp>` | `"currentColor"` | SVG stroke color |
| `stroke_width` | `impl Into<TextProp>` | `"1.5"` | SVG stroke width |

## Search and Categories

```rust
// Find icons by name, tag, or category
let results = LucideGlyph::find("arrow");

// Get all categories with icon counts
let categories = LucideGlyph::all_categories();

// Look up an icon by name
let icon = LucideGlyph::by_name("Activity");

// Total icon count
let total = LucideGlyph::count();

// Access icon metadata (zero-allocation, returns &'static str)
let svg = icon.svg();
let tags = icon.tags(); // returns iterator
let cats = icon.categories(); // returns iterator
```

## LucideGlyph

The `LucideGlyph` enum derives `Copy`, `Clone`, `Hash`, `Eq`, `Ord`, and `Debug`,
so it can be used as a HashMap key, in BTreeSets, and passed around without cloning.

## Rendering Modes

Lepticons works with every Leptos rendering mode (CSR, SSR + hydration, static SSG, islands).
No feature flags, no DOM dependencies in the core `Icon` and `CustomIcon` components.

See [docs/rendering-modes.md](https://github.com/eugener/lepticons/blob/develop/docs/rendering-modes.md) for setup recipes per mode and caveats for `DrawIcon` / `IconPicker` under SSR.

## Architecture

`lepticons` is a thin Leptos rendering layer over [`lepticons-data`](https://crates.io/crates/lepticons-data), which holds the `LucideGlyph` enum, the 42 category features, the search index, and the categories cache. Everything from the data crate is re-exported here, so `use lepticons::LucideGlyph;` continues to work and most users never need a direct `lepticons-data` dependency. Reach for `lepticons-data` directly only if you want icon data without a Leptos renderer (CLI tools, build scripts, lints, an alternative framework adapter).

The strum traits implemented by `LucideGlyph` are re-exported under `lepticons::strum`, so you can iterate icons without taking a direct `strum` dep:

```rust
use lepticons::strum::IntoEnumIterator;
for glyph in lepticons::LucideGlyph::iter() { /* ... */ }
```

## Related Crates

- [lepticons-data](https://crates.io/crates/lepticons-data) -- framework-agnostic icon data + search (used internally; depend on it directly only if you don't want a renderer)
- [lepticons-picker](https://crates.io/crates/lepticons-picker) -- embeddable icon picker with search, grid, and category filter
- [lepticons-animate](https://crates.io/crates/lepticons-animate) -- stroke draw-in and CSS utility animations

## Leptos Compatibility

| Leptos | Lepticons |
|--------|-----------|
| 0.8.x  | 0.8.x -- 0.12.x |
| 0.6.x  | 0.5.x     |
| 0.5.x  | 0.4.x     |

## Demo

[lepticons.9bits.cc](https://lepticons.9bits.cc)

## License

MIT