weather-icons-animated
Version:
A series of hand crafted and detailed weather icons animated with react & emotion.js
746 lines (732 loc) • 23.7 kB
JavaScript
import { jsx as a, Fragment as t, jsxs as n } from "react/jsx-runtime";
import { keyframes as e, css as i, Global as v } from "@emotion/react";
const S = e`
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
`, G = i`
&.flash {
animation-name: ${S};
}
`, C = e`
0% {
transform: translate(0px, calc(var(--cloud-push) + 15px));
opacity: 0.75;
}
25% {
transform: translate(15px, calc(var(--cloud-push) + 0px));
opacity: 1;
}
50% {
transform: translate(30px, calc(var(--cloud-push) + 0px));
opacity: 1;
}
75% {
transform: translate(25px, calc(var(--cloud-push) + 0px));
opacity: 1;
}
100% {
transform: translate(0px, calc(var(--cloud-push) + 15px));
opacity: 0.75;
}
`, A = e`
0% {
transform: translate(10px, 10px) scale(0.5);
opacity: 0.75;
}
25% {
transform: translate(15px, 15px) scale(0.5);
opacity: 1;
}
50% {
transform: translate(10px, 15px) scale(0.5);
opacity: 1;
}
75% {
transform: translate(0px, 15px) scale(0.5);
opacity: 1;
}
100% {
transform: translate(10px, 10px) scale(0.5);
opacity: 0.75;
}
`, Y = i`
&.float {
animation-name: ${C};
&.reverse {
animation-name: ${A};
}
}
`, O = e`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`, R = i`
&.rotate {
animation-name: ${O};
}
`, d = e`
0%, 100% {
stroke-opacity: 0;
fill-opacity: 0;
}
50% {
stroke-opacity: 1;
fill-opacity: 1;
}
`, K = i`
&.fade-in-out {
animation-name: ${d};
}
`, B = e`
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(3%) scale(0.95);
}
`, z = i`
&.bob {
animation: ${B} 3s ease-in-out infinite;
}
`, Q = i`
.animated {
animation-duration: 1s;
animation-fill-mode: both;
&.infinite {
animation-iteration-count: infinite;
}
${Array.from({ length: 6 }, (s, r) => r + 1).map(
(s) => `
&.delay-${s}s {
animation-delay: ${s}s;
}
`
).join("")}
${Y}
${G}
${R}
${K}
${z}
}
`, p = {
styles: i`
.lightening {
animation-duration: 2.5s;
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ a("symbol", { id: "lighteningBolt", children: /* @__PURE__ */ a("path", { fill: "#b8f1f8", d: "M15,0 L1,23 L8,23 L0,40 L15,19 L8,19Z" }) })
}, o = 2.5, j = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translateY(-${o}%);
}
`, I = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translate(-${o}% * 0.5, ${o}% * 0.5);
}
`, W = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translateX(${o}%);
}
`, Z = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translate(-${o}% * 0.5, -${o}% * 0.5);
}
`, P = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translateY(${o}%);
}
`, T = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translate(${o}% * 0.5, -${o}% * 0.5);
}
`, X = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translateX(-${o}%);
}
`, _ = e`
0%,
100% {
transform: translate(0%);
}
50% {
transform: translate(${o}% * 0.5, ${o}% * 0.5);
}
`, h = {
styles: i`
.sun-mask-circle {
fill: black;
transition: transform 0.5s ease-in-out;
transform: scale(1);
transform-origin: 50% 50%;
stroke: black;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
}
.sun {
.sun-circle {
fill: transparent;
transition: transform 0.5s ease-in-out;
transform: scale(1);
transform-origin: 50% 50%;
stroke: url(#gradYellow);
}
.path {
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
}
.rays {
transform-origin: 50%;
animation-duration: 120s;
animation-timing-function: linear;
}
.ray {
transition: transform 0.5s ease-in-out;
transform: scale(1);
transform-origin: 50% 50%;
stroke: yellow;
&:nth-of-type(1) {
animation: ${j} 5s infinite 0s;
}
&:nth-of-type(2) {
animation: ${I} 5s infinite 0.1s;
}
&:nth-of-type(3) {
animation: ${W} 5s infinite 0.2s;
}
&:nth-of-type(4) {
animation: ${Z} 5s infinite 0.3s;
}
&:nth-of-type(5) {
animation: ${P} 5s infinite 0.4s;
}
&:nth-of-type(6) {
animation: ${T} 5s infinite 0.5s;
}
&:nth-of-type(7) {
animation: ${X} 5s infinite 0.6s;
}
&:nth-of-type(8) {
animation: ${_} 5s infinite 0.7s;
}
}
}
`,
defs: /* @__PURE__ */ n("mask", { className: "sun-mask", id: "sun-mask", children: [
/* @__PURE__ */ a("rect", { x: "0", y: "0", width: "100", height: "100", fill: "white" }),
/* @__PURE__ */ a("circle", { className: "sun-mask-circle", cx: "50", cy: "48.5", r: "16.5" })
] }),
symbol: /* @__PURE__ */ a("symbol", { id: "sun", children: /* @__PURE__ */ a("g", { className: "sun-mask", children: /* @__PURE__ */ n("g", { className: "sun", children: [
/* @__PURE__ */ a("g", { className: "rays-mask", mask: "url(#sun-mask)", children: /* @__PURE__ */ n("g", { className: "rays animated infinite rotate", children: [
/* @__PURE__ */ a("line", { className: "path ray", x1: "50", y1: "12.3", x2: "50", y2: "18.9" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "75.7", y1: "22.8", x2: "70.9", y2: "27.6" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "86.2", y1: "48.5", x2: "79.6", y2: "48.5" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "75.7", y1: "74.2", x2: "70.9", y2: "69.4" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "50", y1: "78.1", x2: "50", y2: "84.7" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "29.1", y1: "69.4", x2: "24.3", y2: "74.2" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "20.4", y1: "48.5", x2: "13.8", y2: "48.5" }),
/* @__PURE__ */ a("line", { className: "path ray", x1: "29.1", y1: "27.6", x2: "24.3", y2: "22.8" })
] }) }),
/* @__PURE__ */ a("circle", { className: "path sun-circle", cx: "50", cy: "48.5", r: "16.5" })
] }) }) })
}, q = Math.PI * 0.01, M = 2, L = 70, E = (s, r, l) => {
const c = Math.sin(r) * 0.5, y = s * (l - 50), D = c * -(L * 0.25) + L * 0.25;
return `translate(${y}%, ${D}%)`;
}, N = (s) => {
let r = 51, l = 0, c = `0% { transform: translate(0, 0); }
`;
for (; r <= 100; ) {
const y = E(s, l, r);
c += `${r}% { transform: ${y} }
`, l += q * M * 2, r += M;
}
return e`${c}`;
}, J = N(-0.3), U = N(0.3), V = N(-0.15), aa = N(0.15), H = {
styles: i`
.hail {
transform: translateY(5%);
fill: #eee;
fill-opacity: 0;
animation: 1s ease-in infinite;
&:nth-of-type(1),
&:nth-of-type(4) {
animation-name: ${J}, ${d};
}
&:nth-of-type(2) {
animation-name: ${V}, ${d};
}
&:nth-of-type(5) {
animation-name: ${aa}, ${d};
}
&:nth-of-type(3),
&:nth-of-type(6) {
animation-name: ${U}, ${d};
}
${Array.from({ length: 6 }, (s, r) => r + 1).map(
(s) => `
&:nth-of-type(${s}) {
animation-delay: ${1 * (1 / 6) * s - 1 / 6}s;
}
`
).join("")}
}
`,
symbol: /* @__PURE__ */ n("symbol", { id: "hail", children: [
/* @__PURE__ */ a("circle", { className: "hail", cx: "43.4", cy: "69.9", r: "1.6" }),
/* @__PURE__ */ a("circle", { className: "hail", cx: "51.6", cy: "69.9", r: "1.6" }),
/* @__PURE__ */ a("circle", { className: "hail", cx: "59.9", cy: "69.9", r: "1.6" }),
/* @__PURE__ */ a("circle", { className: "hail", cx: "43.4", cy: "69.9", r: "1.6" }),
/* @__PURE__ */ a("circle", { className: "hail", cx: "51.6", cy: "69.9", r: "1.6" }),
/* @__PURE__ */ a("circle", { className: "hail", cx: "59.9", cy: "69.9", r: "1.6" })
] })
}, x = {
styles: i`
`,
defs: /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("clipPath", { id: "moon-clip-path", children: /* @__PURE__ */ a("circle", { cx: "50", cy: "50", r: "45" }) }),
/* @__PURE__ */ n("mask", { id: "moon-mask", children: [
/* @__PURE__ */ a("circle", { cx: "50", cy: "50", r: "45", fill: "white" }),
/* @__PURE__ */ a("circle", { cx: "20", cy: "50", r: "45", fill: "black" })
] })
] }),
symbol: /* @__PURE__ */ n("symbol", { id: "moon", children: [
/* @__PURE__ */ a("circle", { cx: "50", cy: "50", r: "45", fill: "#e0e0e0", mask: "url(#moon-mask)" }),
/* @__PURE__ */ a("circle", { clipPath: "url('#moon-clip-path')", cx: "42.5", cy: "41.5", r: "47.5", fill: "white", mask: "url(#moon-mask)" }),
/* @__PURE__ */ a("circle", { cx: "50", cy: "50", r: "45", strokeWidth: "1", stroke: "black", fill: "none", mask: "url(#moon-mask)" })
] })
}, u = {
styles: i`
.stars {
animation-duration: 3s;
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ a("symbol", { id: "star", children: /* @__PURE__ */ a("polygon", { points: "5,0 2,10 10,4 0,4 8,10", style: {
fill: "url(#gradYellow)",
fillRule: "nonzero"
} }) })
}, k = {
styles: i`
.small-cloud {
animation-duration: 15s;
animation-timing-function: linear;
--cloud-push: 0px;
&.push {
--cloud-push: 7px;
}
&.reverse {
animation-duration: 10s;
animation-timing-function: linear;
}
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("symbol", { id: "grayCloud", children: /* @__PURE__ */ a("path", { d: "M20,15 Q25,0 45,11 Q60,5 60,20 A30,15 5 1,1 20,15 Z" }) }),
/* @__PURE__ */ a("symbol", { id: "whiteCloud", children: /* @__PURE__ */ a("path", { d: "M11,47 Q13,37 21,42 Q31,30 41,38 A28,21 -25 1,1 35,75 Q23,85 19,73 A12,12 0 0,1 11,47Z" }) })
] })
}, f = e`
0% {
opacity: 1;
}
25% {
transform: translateY(5px);
opacity: 1;
}
50% {
transform: translateY(15px);
opacity: 1;
}
75% {
transform: translateY(25px);
opacity: 0.75;
}
100% {
transform: translateY(35px);
opacity: 0;
}
`, sa = e`
from {
stroke-dashoffset: 40;
}
to {
stroke-dashoffset: 10;
}
`, g = {
styles: i`
.drop1 {
animation: ${f} 1s linear infinite;
}
.drop3 {
animation: ${f} 1s linear infinite 0.5s;
}
.drop2 {
animation: ${f} 2s linear infinite 1s;
}
.drop4 {
animation: ${f} 2s linear infinite 0.8s;
}
.drop5 {
animation: ${f} 1.5s linear infinite 0.8s;
}
.drop6 {
animation: ${f} 1.5s linear infinite 0.5s;
}
#rainDrizzle {
stroke: lightblue;
stroke-width: 1;
stroke-dasharray: 3;
stroke-dashoffset: 1;
animation: ${sa} 1.5s linear infinite;
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("symbol", { id: "rainDrop", children: /* @__PURE__ */ a("path", { fill: "lightblue", d: "M5 0 Q5,0 7,3.5 A2.5,2.5 0 1,1 3,3.5 Q5,0 5,0Z" }) }),
/* @__PURE__ */ a("symbol", { id: "rainDrizzle", children: /* @__PURE__ */ a("line", { x1: "20", y1: "2", x2: "10", y2: "40" }) })
] })
}, m = e`
0% {
transform: translate(5px, 0px);
opacity: 1;
}
25% {
transform: translate(0px, 10px);
opacity: 1;
}
50% {
transform: translate(7px, 20px);
opacity: 1;
}
75% {
transform: translate(0px, 30px);
opacity: 0.75;
}
100% {
transform: translate(10px, 40px);
opacity: 0.5;
}
`, w = {
styles: i`
#snowFlake {
fill: none;
stroke: white;
stroke-width: 0.6;
}
#snowFlake1 {
animation: ${m} 4s linear infinite;
}
#snowFlake2 {
animation: ${m} 3s linear infinite 0.8s;
}
#snowFlake3 {
animation: ${m} 5s linear infinite 0.5s;
}
#snowFlake4 {
animation: ${m} 6s linear infinite 1s;
}
#snowFlake5 {
animation: ${m} 4s linear infinite 0.6s;
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ n("symbol", { id: "snowFlake", children: [
/* @__PURE__ */ a("path", { d: "M5,0 L5,10 M0,5 L10,5 M1.5,1.5 L8.5,8.5 M8.5,1.5 L1.5,8.5" }),
/* @__PURE__ */ a("path", { d: "M3.5,0.25 L5,2 L6.5,0.25 M3.5,9.75 L5,8 L6.5,9.75" }),
/* @__PURE__ */ a("path", { d: "M0.25,3.5 L2,5 L0.25,6.5 M9.75,3.5 L8,5 L9.75,6.5" }),
/* @__PURE__ */ a("path", { d: "M0.75,2.90 L2.85,2.85 L2.90,0.75 M7.25,9.35 L7.15,7.15 L9.35,7.25" }),
/* @__PURE__ */ a("path", { d: "M0.75,7.25 L2.85,7.15 L2.90,9.35 M7.15,0.75 L7.25,2.85 L9.35,2.90" })
] })
}, na = e`
0% {
stroke-dasharray: 5 300;
stroke-dashoffset: -200;
opacity: 1;
}
50% {
stroke-dasharray: 300 300;
stroke-dashoffset: -100;
opacity: 1;
}
90% {
stroke-dasharray: 50 300;
stroke-dashoffset: -20;
opacity: 0.7;
}
100% {
stroke-dasharray: 20 300;
stroke-dashoffset: 0;
opacity: 0.2;
}
`, $ = {
styles: i`
.wind-string path {
stroke: #ccc;
stroke-linecap: round;
stroke-width: 7px;
animation: ${na} 3s linear infinite;
}
`,
defs: /* @__PURE__ */ a(t, {}),
symbol: /* @__PURE__ */ a("symbol", { id: "wind", children: /* @__PURE__ */ n("g", { className: "wind-string", transform: "scale(0.3)", children: [
/* @__PURE__ */ a("path", { fill: "none", stroke: "#43637D", strokeMiterlimit: "10", d: `M85.263,105.176
c3.002-1.646,6.403-2.549,9.903-2.549c11.375,0,20.633,9.256,20.633,20.633s-9.258,20.633-20.633,20.633H3.473` }),
/* @__PURE__ */ a("path", { fill: "none", stroke: "#43637D", strokeMiterlimit: "10", d: `M69.756,113.884
c1.62-0.888,3.457-1.376,5.345-1.376c6.14,0,11.136,4.996,11.136,11.137c0,6.14-4.996,11.136-11.136,11.136H25.313` }),
/* @__PURE__ */ a("path", { fill: "none", stroke: "#43637D", strokeMiterlimit: "10", d: `M75.536,180.462
c2.131,1.166,4.545,1.809,7.027,1.809c8.072,0,14.642-6.569,14.642-14.643s-6.569-14.643-14.642-14.643H18.043` })
] }) })
}, b = {
styles: i`
.fog-stop-1 {
stop-color:rgb(255,255,255);
stop-opacity:0.8
}
.fog-stop-2 {
stop-color: white;
stop-opacity: 0;
}
`,
defs: /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ n("linearGradient", { id: "fogGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
/* @__PURE__ */ a("stop", { offset: "0%", className: "fog-stop-1" }),
/* @__PURE__ */ a("stop", { offset: "100%", className: "fog-stop-2" })
] }),
/* @__PURE__ */ a("filter", { id: "fogFilter", x: "0", y: "0", children: /* @__PURE__ */ a("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1" }) })
] }),
symbol: /* @__PURE__ */ a(t, {})
};
function ta() {
return /* @__PURE__ */ a(
v,
{
styles: i`
${b.styles}
${Q}
${h.styles}
${H.styles}
${x.styles}
${u.styles}
${k.styles}
${g.styles}
${p.styles}
${w.styles}
${$.styles}
`
}
);
}
function ea() {
return /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a(ta, {}),
/* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", style: { width: 0, height: 0 }, children: [
/* @__PURE__ */ n("defs", { children: [
h.defs,
b.defs,
x.defs,
u.defs,
k.defs,
p.defs,
$.defs,
g.defs,
w.defs,
/* @__PURE__ */ n("radialGradient", { id: "gradYellow", cx: "50%", cy: "50%", r: "80%", fx: "90%", fy: "80%", children: [
/* @__PURE__ */ a("stop", { offset: "0%", style: {
stopColor: "yellow",
stopOpacity: 1
} }),
/* @__PURE__ */ a("stop", { offset: "100%", style: {
stopColor: "orange",
stopOpacity: 1
} })
] }),
/* @__PURE__ */ n("radialGradient", { id: "gradDarkGrey", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%", children: [
/* @__PURE__ */ a("stop", { offset: "0%", style: {
stopColor: "#fff",
stopOpacity: 1
} }),
/* @__PURE__ */ a("stop", { offset: "70%", style: {
stopColor: "#ddd",
stopOpacity: 1
} }),
/* @__PURE__ */ a("stop", { offset: "100%", style: {
stopColor: "#ccc",
stopOpacity: 1
} })
] }),
/* @__PURE__ */ n("radialGradient", { id: "gradGray", cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%", children: [
/* @__PURE__ */ a("stop", { offset: "0%", style: {
stopColor: "white",
stopOpacity: 1
} }),
/* @__PURE__ */ a("stop", { offset: "100%", style: {
stopColor: "darkgray",
stopOpacity: 1
} })
] }),
/* @__PURE__ */ n("linearGradient", { id: "gradWhite", x1: "40%", y1: "50%", x2: "90%", y2: "90%", children: [
/* @__PURE__ */ a("stop", { offset: "0%", style: {
stopColor: "white",
stopOpacity: 1
} }),
/* @__PURE__ */ a("stop", { offset: "100%", style: {
stopColor: "darkgray",
stopOpacity: 1
} })
] })
] }),
H.symbol,
h.symbol,
x.symbol,
u.symbol,
k.symbol,
g.symbol,
p.symbol,
w.symbol,
$.symbol,
b.symbol
] })
] });
}
const ia = /* @__PURE__ */ new Set([
"partlycloudy",
"cloudy",
"fog",
"hail",
"rainy",
"snowy",
"snowy-rainy",
"pouring",
"lightning",
"lightning-rainy",
"windy",
"windy-variant"
]), ra = /* @__PURE__ */ new Set(["hail", "rainy", "pouring", "lightning-rainy", "snowy-rainy"]), oa = /* @__PURE__ */ new Set(["windy", "windy-variant"]), la = /* @__PURE__ */ new Set(["snowy", "snowy-rainy"]), ca = /* @__PURE__ */ new Set(["lightning", "lightning-rainy"]), F = /* @__PURE__ */ new Set(["fog", "partlycloudy", "cloudy", "windy", "windy-variant"]), ma = ({ state: s, night: r, width: l, height: c, ...y }) => /* @__PURE__ */ n("svg", { viewBox: "0 0 100 100", width: l ?? "100%", height: c ?? "100%", ...y, children: [
/* @__PURE__ */ a(ea, {}),
s === "sunny" && /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a("use", { xlinkHref: "#sun" }) }),
s === "clear-night" && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { xlinkHref: "#moon", x: "-15", className: "animated bob infinite" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "42", y: "30", className: "stars animated infinite flash" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "61", y: "32", className: "stars animated infinite flash delay-1s" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "55", y: "50", className: "stars animated infinite flash delay-2s" })
] }),
s === "partlycloudy" && r ? /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { xlinkHref: "#moon", x: "-12", y: "0" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "42", y: "30", className: "stars animated infinite flash" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "61", y: "32", className: "stars animated infinite flash delay-1s" }),
/* @__PURE__ */ a("use", { xlinkHref: "#star", x: "55", y: "50", className: "stars animated infinite flash delay-2s" })
] }) : s === "partlycloudy" ? /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a("use", { xlinkHref: "#sun", x: "12", y: "12", transform: "scale(0.5)" }) }) : null,
ra.has(s) && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { className: "drop1", xlinkHref: "#rainDrop", x: "15", y: "50" }),
/* @__PURE__ */ a("use", { className: "drop2", xlinkHref: "#rainDrop", x: "30", y: "50" }),
/* @__PURE__ */ a("use", { className: "drop3", xlinkHref: "#rainDrop", x: "37", y: "50" }),
/* @__PURE__ */ a("use", { className: "drop4", xlinkHref: "#rainDrop", x: "50", y: "50" }),
/* @__PURE__ */ a("use", { className: "drop5", xlinkHref: "#rainDrop", x: "60", y: "50" }),
/* @__PURE__ */ a("use", { className: "drop6", xlinkHref: "#rainDrop", x: "70", y: "50" })
] }),
s === "hail" && /* @__PURE__ */ a(t, { children: /* @__PURE__ */ a("use", { xlinkHref: "#hail", x: "7" }) }),
s === "pouring" && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { className: "drop6", xlinkHref: "#rainDrop", x: "10", y: "55" }),
/* @__PURE__ */ a("use", { className: "drop5", xlinkHref: "#rainDrop", x: "22", y: "55" }),
/* @__PURE__ */ a("use", { className: "drop4", xlinkHref: "#rainDrop", x: "32", y: "55" }),
/* @__PURE__ */ a("use", { className: "drop3", xlinkHref: "#rainDrop", x: "43", y: "55" }),
/* @__PURE__ */ a("use", { className: "drop2", xlinkHref: "#rainDrop", x: "55", y: "55" }),
/* @__PURE__ */ a("use", { className: "drop1", xlinkHref: "#rainDrop", x: "65", y: "55" })
] }),
la.has(s) && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { id: "snowFlake1", xlinkHref: "#snowFlake", x: "20", y: "40" }),
/* @__PURE__ */ a("use", { id: "snowFlake2", xlinkHref: "#snowFlake", x: "35", y: "50" }),
/* @__PURE__ */ a("use", { id: "snowFlake3", xlinkHref: "#snowFlake", x: "45", y: "45" }),
/* @__PURE__ */ a("use", { id: "snowFlake4", xlinkHref: "#snowFlake", x: "50", y: "50" }),
/* @__PURE__ */ a("use", { id: "snowFlake5", xlinkHref: "#snowFlake", x: "63", y: "50" })
] }),
ca.has(s) && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { xlinkHref: "#lighteningBolt", x: "30", y: "54", className: "lightening animated infinite flash" }),
/* @__PURE__ */ a("use", { xlinkHref: "#lighteningBolt", x: "45", y: "40", className: "lightening animated infinite flash delay-2s" }),
/* @__PURE__ */ a("use", { xlinkHref: "#lighteningBolt", x: "55", y: "50", className: "lightening animated infinite flash delay-1s" })
] }),
oa.has(s) && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a("use", { xlinkHref: "#wind", x: "45", y: "30" }),
/* @__PURE__ */ a("use", { xlinkHref: "#wind", x: "50", y: "-10", className: "animated delay-1s" })
] }),
ia.has(s) && /* @__PURE__ */ n(t, { children: [
/* @__PURE__ */ a(
"use",
{
xlinkHref: "#grayCloud",
id: "cloud",
className: `animated infinite float small-cloud ${F.has(s) ? "push" : ""}`,
filter: `${s === "fog" ? "url(#fogFilter)" : ""}`,
fill: `url(#${s === "fog" ? "fogGradient" : "gradDarkGrey"})`,
x: "0"
}
),
/* @__PURE__ */ a(
"use",
{
xlinkHref: "#grayCloud",
x: "25",
y: "10",
className: "small-cloud animated infinite reverse float",
fill: `url(#${s === "fog" ? "fogGradient" : "gradDarkGrey"})`,
filter: `${s === "fog" ? "url(#fogFilter)" : ""}`
}
),
/* @__PURE__ */ a("use", { xlinkHref: "#whiteCloud", className: "animated bob", x: "7", y: F.has(s) ? "0" : "-7", fill: `url(#${s === "fog" ? "fogGradient" : "gradWhite"})`, filter: `${s === "fog" ? "url(#fogFilter)" : ""}` })
] })
] }), da = {
lighteningBolt: p,
sun: h,
hail: H,
moon: x,
star: u,
clouds: k,
rain: g,
snowFlake: w,
wind: $,
fog: b
};
export {
ea as Base,
ma as WeatherSvg,
da as shapes
};
//# sourceMappingURL=react-weather-icons.es.js.map