thaw 0.4.8

An easy to use leptos component library
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

// copy https://github.com/Carlosted/leptos-icons
// leptos updated version causes leptos_icons error
mod icons;

pub(crate) use icons::*;

use leptos::{ev, prelude::*};
use thaw_utils::{class_list, mount_style, ArcOneCallback};

/// The Icon component.
#[component]
pub fn Icon(
    /// The icon to render.
    #[prop(into)]
    icon: Signal<icondata_core::Icon>,
    /// The width of the icon (horizontal side length of the square surrounding the icon).
    /// Defaults to "1em".
    #[prop(into, default = "1em".into())]
    width: MaybeProp<String>,
    /// The height of the icon (vertical side length of the square surrounding the icon).
    /// Defaults to "1em".
    #[prop(into, default = "1em".into())]
    height: MaybeProp<String>,
    /// HTML class attribute.
    #[prop(into, optional)]
    class: MaybeProp<String>,
    /// HTML style attribute.
    #[prop(into, optional)]
    style: Option<Signal<String>>,
    /// Callback when clicking on the icon.
    #[prop(optional, into)]
    on_click: Option<ArcOneCallback<ev::MouseEvent>>,
) -> impl IntoView {
    mount_style("icon", include_str!("./icon.css"));
    let class = class_list!["thaw-icon", class];

    move || {
        let icon = icon.get();

        let style = match (style.clone(), icon.style) {
            (Some(a), Some(b)) => Some(ArcMemo::new(move |_| format!("{b} {}", a.get())).into()),
            (Some(a), None) => Some(a),
            (None, Some(b)) => Some(b.into()),
            (None, None) => None,
        };
        let width = width.clone();
        let height = height.clone();
        let on_click = on_click.clone();
        let on_click = move |ev| {
            if let Some(click) = on_click.as_ref() {
                click(ev);
            }
        };

        view! {
            <svg
                class=class.clone()
                style=move || if let Some(s) = style.as_ref() { s.get() } else { String::new() }
                x=icon.x
                y=icon.y
                width=move || width.get()
                height=move || height.get()
                viewBox=icon.view_box
                stroke-linecap=icon.stroke_linecap
                stroke-linejoin=icon.stroke_linejoin
                stroke-width=icon.stroke_width
                stroke=icon.stroke
                fill=icon.fill.unwrap_or("currentColor")
                inner_html=icon.data
                on:click=on_click
            ></svg>
        }
    }
}