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,no_run
15/// # use dioxus::prelude::*;
16/// # use dioxus_bootstrap_css::prelude::*;
17/// # fn _doctest() -> Element {
18/// rsx! {
19///     Icon { name: "search" }
20///     Icon { name: "shield-lock", class: "me-2 fs-4" }
21/// }
22/// # }
23/// ```
24#[derive(Clone, PartialEq, Props)]
25pub struct IconProps {
26    /// Icon name without the `bi-` prefix (e.g., "search", "shield-lock").
27    pub name: String,
28    /// Additional CSS classes.
29    #[props(default)]
30    pub class: String,
31    /// Any additional HTML attributes.
32    #[props(extends = GlobalAttributes)]
33    attributes: Vec<Attribute>,
34}
35
36#[component]
37pub fn Icon(props: IconProps) -> Element {
38    let icon_class = if props.class.is_empty() {
39        format!("bi bi-{}", props.name)
40    } else {
41        format!("bi bi-{} {}", props.name, props.class)
42    };
43    rsx! {
44    i { class: "{icon_class}", ..props.attributes }
45    }
46}
dioxus_bootstrap_css/icon.rs

dioxus_bootstrap_css/
icon.rs
