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

/* Earth icon - Line drawing animation with circle appearing first */

/* Circle outline - animates first with short delay */
[data-name="EarthAnimate"] circle[cx="12"][cy="12"][r="10"] {
    opacity: 1;
    stroke-dasharray: 63; /* Approximate circle circumference: 2πr ≈ 63 */
    stroke-dashoffset: 0;
}

[data-name="EarthAnimate"]:hover circle[cx="12"][cy="12"][r="10"] {
    animation: earthCircleDraw 0.3s ease-in-out 0.1s both;
}

@keyframes earthCircleDraw {
    0% {
        opacity: 0;
        stroke-dashoffset: 63;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* Continent paths - animate after circle with longer delay */
[data-name="EarthAnimate"] path[d="M21.54 15H17a2 2 0 0 0-2 2v4.54"],
[data-name="EarthAnimate"] path[d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"],
[data-name="EarthAnimate"] path[d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"] {
    opacity: 1;
    stroke-dasharray: 50; /* Generous length to cover path variations */
    stroke-dashoffset: 0;
}

[data-name="EarthAnimate"]:hover path[d="M21.54 15H17a2 2 0 0 0-2 2v4.54"],
[data-name="EarthAnimate"]:hover path[d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"],
[data-name="EarthAnimate"]:hover path[d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"] {
    animation: earthContinentDraw 0.7s ease-in-out 0.5s both;
}

@keyframes earthContinentDraw {
    0% {
        opacity: 0;
        stroke-dashoffset: 50;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}