icons 0.8.0

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
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

use crate::leptos_animated::AnimatedIconType;

// * This file was was generated automatically. Please DO NOT edit manually.

/// Get CSS for a specific animated icon. Zero-allocation O(1) lookup.CSS.
pub fn get_icon_css(icon_type: AnimatedIconType) -> Option<&'static str> {
    match icon_type {
        AnimatedIconType::AArrowDownAnimate => Some(AARROWDOWN_CSS),
        AnimatedIconType::AirVentAnimate => Some(AIRVENT_CSS),
        AnimatedIconType::AlarmClockAnimate => Some(ALARMCLOCK_CSS),
        AnimatedIconType::HeartAnimate => Some(HEART_CSS),
        AnimatedIconType::PlusAnimate => Some(PLUS_CSS),
    }
}

/* ========================================================== */
/*                     ✨ CONSTANTS ✨                        */
/* ========================================================== */

/// Static CSS for AArrowDownAnimate animation
static AARROWDOWN_CSS: &str = r#"/* Letter "A" animation - targeting specific paths */
[data-name="AArrowDownAnimate"]:hover path[d="M3.5 13h6"],
[data-name="AArrowDownAnimate"]:hover path[d="m2 16 4.5-9 4.5 9"] {
    animation: letterAnimate 0.3s ease-in-out;
}

/* Arrow animation - targeting specific paths with delay */
[data-name="AArrowDownAnimate"]:hover path[d="M18 7v9"],
[data-name="AArrowDownAnimate"]:hover path[d="m14 12 4 4 4-4"] {
    animation: arrowAnimate 0.3s ease-in-out 0.2s both;
}

@keyframes letterAnimate {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

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

/// Static CSS for AirVentAnimate animation
static AIRVENT_CSS: &str = r#"/* Air vent wind animation - first wind path (immediate) */
[data-name="AirVentAnimate"]:hover path[d="M18 17.5a2.5 2.5 0 1 1-4 2.03V12"] {
    animation: windAnimate1 0.5s ease-in-out;
}

/* Air vent wind animation - second wind path (delayed) */
[data-name="AirVentAnimate"]:hover path[d="M6.6 15.572A2 2 0 1 0 10 17v-5"] {
    animation: windAnimate2 0.5s ease-in-out 0.2s both;
}

@keyframes windAnimate1 {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes windAnimate2 {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}"#;

/// Static CSS for AlarmClockAnimate animation
static ALARMCLOCK_CSS: &str = r#"/* Primary alarm clock elements - clock face circle, hands, and bottom legs */
[data-name="AlarmClockAnimate"]:hover circle[cx="12"],
[data-name="AlarmClockAnimate"]:hover path[d="M12 9v4l2 2"],
[data-name="AlarmClockAnimate"]:hover path[d="M6.38 18.7 4 21"],
[data-name="AlarmClockAnimate"]:hover path[d="M17.64 18.67 20 21"] {
    animation: primaryAlarmShake 0.3s linear infinite;
}

/* Secondary alarm clock elements - top alarm bells with more intense movement */
[data-name="AlarmClockAnimate"]:hover path[d="M5 3 2 6"],
[data-name="AlarmClockAnimate"]:hover path[d="m22 6-3-3"] {
    animation: secondaryAlarmShake 0.3s linear infinite;
}

@keyframes primaryAlarmShake {
    0% { transform: translateX(-1px) translateY(-1.5px); }
    16.67% { transform: translateX(1px) translateY(-1.5px); }
    33.33% { transform: translateX(-1px) translateY(-1.5px); }
    50% { transform: translateX(1px) translateY(-1.5px); }
    66.67% { transform: translateX(-1px) translateY(-1.5px); }
    83.33% { transform: translateX(0) translateY(-1.5px); }
    100% { transform: translateX(-1px) translateY(-1.5px); }
}

@keyframes secondaryAlarmShake {
    0% { transform: translateX(-2px) translateY(-2.5px); }
    16.67% { transform: translateX(2px) translateY(-2.5px); }
    33.33% { transform: translateX(-2px) translateY(-2.5px); }
    50% { transform: translateX(2px) translateY(-2.5px); }
    66.67% { transform: translateX(-2px) translateY(-2.5px); }
    83.33% { transform: translateX(0) translateY(-2.5px); }
    100% { transform: translateX(-2px) translateY(-2.5px); }
}"#;

/// Static CSS for HeartAnimate animation
static HEART_CSS: &str = r#"[data-name="HeartAnimate"]:hover {
    animation: HeartAnimation 1.2s ease-in-out;
}

@keyframes HeartAnimation {
    0% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.08); }
    56% { transform: scale(1); }
    100% { transform: scale(1); }
}"#;

/// Static CSS for PlusAnimate animation
static PLUS_CSS: &str = r#"[data-name="PlusAnimate"] {
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-name="PlusAnimate"]:hover {
    transform: rotate(180deg);
}"#;