Skip to main content

dioxus_bootstrap_css/
icon.rs

1use dioxus::prelude::*;
2
3/// Bootstrap Icon component.
4///
5/// Renders a Bootstrap Icon by name. See https://icons.getbootstrap.com/ for available icons.
6///
7/// # Bootstrap HTML → Dioxus
8///
9/// | HTML | Dioxus |
10/// |---|---|
11/// | `<i class="bi bi-search">` | `Icon { name: "search" }` |
12/// | `<i class="bi bi-shield-lock me-2 fs-4">` | `Icon { name: "shield-lock", class: "me-2 fs-4" }` |
13///
14/// ```rust
15/// rsx! {
16///     Icon { name: "search" }
17///     Icon { name: "shield-lock", class: "me-2 fs-4" }
18/// }
19/// ```
20#[derive(Clone, PartialEq, Props)]
21pub struct IconProps {
22    /// Icon name without the `bi-` prefix (e.g., "search", "shield-lock").
23    pub name: String,
24    /// Additional CSS classes.
25    #[props(default)]
26    pub class: String,
27}
28
29#[component]
30pub fn Icon(props: IconProps) -> Element {
31    let icon_class = if props.class.is_empty() {
32        format!("bi bi-{}", props.name)
33    } else {
34        format!("bi bi-{} {}", props.name, props.class)
35    };
36    rsx! {
37        i { class: "{icon_class}" }
38    }
39}