dx_icons_tabler 0.1.0

Tabler Icons as native Dioxus 0.7 components
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

use dioxus::prelude::*;

/// Renders a Tabler icon by enum variant.
///
/// # Example
/// ```rust,no_run
/// use dx_icons_tabler::*;
///
/// rsx! {
///     Icon { icon: TablerIcon::Home }
///     Icon { icon: TablerIcon::Search, size: 32, color: "red" }
/// };
/// ```
#[component]
pub fn Icon(
    /// Which icon to render.
    icon: TablerIcon,
    /// Width and height in pixels. Defaults to 24.
    #[props(default = 24)]
    size: u32,
    /// Stroke color. Defaults to `"currentColor"`.
    #[props(default = "currentColor".to_string())]
    color: String,
    /// Stroke width. Defaults to 2.
    #[props(default = 2.0)]
    stroke_width: f32,
    /// Optional extra CSS class.
    #[props(default)]
    class: String,
    /// Whether to apply `fill` instead of `stroke`. Defaults to `false`.
    #[props(default = false)]
    fill: bool,
) -> Element {
    let fill_val = if fill { &color } else { "none" };
    let stroke_val = if fill { "none" } else { &color };
    let icon_name = icon.name();

    rsx! {
        svg {
            xmlns: "http://www.w3.org/2000/svg",
            width: "{size}",
            height: "{size}",
            view_box: "0 0 24 24",
            fill: "{fill_val}",
            stroke: "{stroke_val}",
            stroke_width: "{stroke_width}",
            stroke_linecap: "round",
            stroke_linejoin: "round",
            class: "tabler tabler-{icon_name} {class}",
            dangerous_inner_html: icon.svg_content(),
        }
    }
}

// Include the generated icon enum and shorthand components.
include!(concat!(env!("OUT_DIR"), "/tabler_icons.rs"));