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
use dioxus::prelude::*;
/// Bootstrap Icon component.
///
/// Renders a Bootstrap Icon by name. See https://icons.getbootstrap.com/ for available icons.
///
/// # Bootstrap HTML → Dioxus
///
/// | HTML | Dioxus |
/// |---|---|
/// | `<i class="bi bi-search">` | `Icon { name: "search" }` |
/// | `<i class="bi bi-shield-lock me-2 fs-4">` | `Icon { name: "shield-lock", class: "me-2 fs-4" }` |
///
/// ```rust
/// rsx! {
/// Icon { name: "search" }
/// Icon { name: "shield-lock", class: "me-2 fs-4" }
/// }
/// ```
#[derive(Clone, PartialEq, Props)]
pub struct IconProps {
/// Icon name without the `bi-` prefix (e.g., "search", "shield-lock").
pub name: String,
/// Additional CSS classes.
#[props(default)]
pub class: String,
}
#[component]
pub fn Icon(props: IconProps) -> Element {
let icon_class = if props.class.is_empty() {
format!("bi bi-{}", props.name)
} else {
format!("bi bi-{} {}", props.name, props.class)
};
rsx! {
i { class: "{icon_class}" }
}
}