icons 0.6.3

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

/* GitHub Animation */
/* Pattern: Sequential body reveal + tail drawing + tail wagging */

/* Base state: Match initial="normal" - both paths visible by default */
[data-name="GithubAnimate"] path[d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"],
[data-name="GithubAnimate"] path[d="M9 18c-4.51 2-5-2-7-2"] {
    opacity: 1;
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    transform: scale(1);
}

/* Body animation - immediate (0.4s duration) */
[data-name="GithubAnimate"]:hover path[d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"] {
    animation: bodyReveal 0.4s ease-in-out;
}

/* Tail animation - sequential: draw then wag */
[data-name="GithubAnimate"]:hover path[d="M9 18c-4.51 2-5-2-7-2"] {
    animation: tailDrawAndWag 3.0s ease-in-out;
    transform-origin: 9px 18px;
}

@keyframes bodyReveal {
    0% {
        opacity: 0;
        stroke-dashoffset: 50;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: scale(1);
    }
}

@keyframes tailDrawAndWag {
    0% {
        opacity: 1;
        stroke-dashoffset: 50;
        transform: rotate(0deg);
    }
    16.7% {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-5deg);
    }
    70% {
        transform: rotate(5deg);
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
        transform: rotate(0deg);
    }
}