icons 0.5.2

Icons for Rust fullstack applications — Leptos and Dioxus.
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

/* Wind Arrow Down animation - wind paths draw with delays, arrow slides down */

/* Base state - all elements visible */
[data-name="WindArrowDownAnimate"] path[d*="M12.8 21.6A2 2 0 1 0 14 18H2"],
[data-name="WindArrowDownAnimate"] path[d*="M17.5 10a2.5 2.5 0 1 1 2 4H2"],
[data-name="WindArrowDownAnimate"] path[d*="M10 2v8"],
[data-name="WindArrowDownAnimate"] path[d*="m6 6 4 4 4-4"] {
    opacity: 1;
}

/* Wind paths - stroke-dash setup for drawing effect */
[data-name="WindArrowDownAnimate"] path[d*="M12.8 21.6A2 2 0 1 0 14 18H2"],
[data-name="WindArrowDownAnimate"] path[d*="M17.5 10a2.5 2.5 0 1 1 2 4H2"] {
    stroke-dasharray: 25;
    stroke-dashoffset: 0;
}

/* Wind path animations with delays */
/* Path 1 (custom: 0.2) - 0.2s delay */
[data-name="WindArrowDownAnimate"]:hover path[d*="M12.8 21.6A2 2 0 1 0 14 18H2"] {
    animation: windArrowDownWindDraw 0.5s ease-in-out 0.2s both;
}

/* Path 2 (custom: 0.4) - 0.4s delay */
[data-name="WindArrowDownAnimate"]:hover path[d*="M17.5 10a2.5 2.5 0 1 1 2 4H2"] {
    animation: windArrowDownWindDraw 0.5s ease-in-out 0.4s both;
}

/* Arrow animations (both vertical line and chevron) with 0.35s delay */
[data-name="WindArrowDownAnimate"]:hover path[d*="M10 2v8"],
[data-name="WindArrowDownAnimate"]:hover path[d*="m6 6 4 4 4-4"] {
    animation: windArrowDownArrowSlide 0.5s ease-in-out 0.35s both;
}

@keyframes windArrowDownWindDraw {
    0% {
        opacity: 0;
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }
    100% {
        opacity: 1;
        stroke-dasharray: 25;
        stroke-dashoffset: 0;
    }
}

@keyframes windArrowDownArrowSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}