lepticons-animate 0.1.1

Icon animations for Leptos -- stroke draw-in, spin, pulse, bounce.
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

use leptos::prelude::*;
use leptos::text_prop::TextProp;
use lepticons::{Glyph, LucideGlyph, DEFAULT_SIZE, DEFAULT_FILL, DEFAULT_STROKE, DEFAULT_STROKE_WIDTH};
use wasm_bindgen::JsCast;

use crate::Easing;

/// Renders an icon with a stroke draw-in animation.
///
/// The icon's paths animate from invisible to fully drawn over `duration_ms`.
///
/// # Example
///
/// ```rust,ignore
/// use lepticons_animate::{DrawIcon, Easing};
/// use lepticons::LucideGlyph;
///
/// // Default easing (ease-in-out, 600ms)
/// <DrawIcon glyph=LucideGlyph::Check />
///
/// // Custom duration and easing
/// <DrawIcon glyph=LucideGlyph::Heart duration_ms=800 easing=Easing::EaseOut />
/// ```
#[component]
pub fn DrawIcon(
    /// The icon to render.
    #[prop(into)]
    glyph: Signal<LucideGlyph>,
    /// Animation duration in milliseconds (default: 600).
    #[prop(default = 600)]
    duration_ms: u32,
    /// Delay before animation starts in milliseconds (default: 0).
    #[prop(default = 0)]
    delay_ms: u32,
    /// Transition timing function (default: `Easing::EaseInOut`).
    #[prop(default = Easing::EaseInOut)]
    easing: Easing,
    /// CSS class for the outer wrapper.
    #[prop(into, optional)]
    class: Option<TextProp>,
    /// Width and height in pixels (default: "24").
    #[prop(into, optional)]
    size: Option<TextProp>,
    /// SVG fill color (default: "none").
    #[prop(into, optional)]
    fill: Option<TextProp>,
    /// SVG stroke color (default: "currentColor").
    #[prop(into, optional)]
    stroke: Option<TextProp>,
    /// SVG stroke width (default: "1.5").
    #[prop(into, optional)]
    stroke_width: Option<TextProp>,
) -> impl IntoView {
    let size = size.unwrap_or_else(|| DEFAULT_SIZE.into());
    let size2 = size.clone();
    let fill = fill.unwrap_or_else(|| DEFAULT_FILL.into());
    let stroke = stroke.unwrap_or_else(|| DEFAULT_STROKE.into());
    let stroke_width = stroke_width.unwrap_or_else(|| DEFAULT_STROKE_WIDTH.into());
    let easing_css = easing.as_css();

    let wrapper_ref = NodeRef::<leptos::html::Div>::new();

    // On mount/glyph change, find all geometry elements and animate stroke-dashoffset.
    // Deferred to next frame so inner_html has populated the SVG children.
    Effect::new(move |_| {
        glyph.get();

        let Some(wrapper) = wrapper_ref.get() else { return };
        let wrapper_el: web_sys::HtmlElement = (*wrapper).clone();

        // First frame: wait for inner_html to populate SVG children
        request_animation_frame(move || {
            let wrapper_as_el: &web_sys::Element = wrapper_el.as_ref();
            let Some(svg) = wrapper_as_el.first_element_child() else { return };
            let children = svg.children();
            let count = children.length();

            for i in 0..count {
                let Some(child) = children.item(i) else { continue };

                let Ok(geom) = child.clone().dyn_into::<web_sys::SvgGeometryElement>() else {
                    continue;
                };
                let length: f32 = geom.get_total_length();
                if length <= 0.0 {
                    continue;
                }

                let svg_child: web_sys::SvgElement = child.unchecked_into();
                let s = svg_child.style();

                let len_str = length.to_string();
                // Set initial state: fully hidden
                let _ = s.set_property("stroke-dasharray", &len_str);
                let _ = s.set_property("stroke-dashoffset", &len_str);
                let _ = s.set_property("transition", "none");

                // Second frame: enable transition and animate to visible
                let s_clone = s.clone();
                request_animation_frame(move || {
                    let _ = s_clone.set_property(
                        "transition",
                        &format!(
                            "stroke-dashoffset {}ms {} {}ms",
                            duration_ms, easing_css, delay_ms
                        ),
                    );
                    let _ = s_clone.set_property("stroke-dashoffset", "0");
                });
            }
        });
    });

    view! {
        <div node_ref=wrapper_ref
             class=move || class.as_ref().map(|c| c.get().to_string()).unwrap_or_default()
             style="display:inline-block;line-height:0">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width=move || size.get()
                height=move || size2.get()
                viewBox="0 0 24 24"
                fill=move || fill.get()
                stroke=move || stroke.get()
                stroke-width=move || stroke_width.get()
                stroke-linecap="round"
                stroke-linejoin="round"
                inner_html=move || glyph.get().svg()
            />
        </div>
    }
}