@animicons/react-native 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +69 -46
- package/dist/index.js +92 -69
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React15, { useEffect, useCallback } from 'react';
|
|
2
2
|
import { Circle, Path, Svg } from 'react-native-svg';
|
|
3
3
|
import Animated4, { useAnimatedProps, useSharedValue, withRepeat, withTiming, Easing, withDelay, runOnJS, cancelAnimation, useAnimatedStyle, withSequence } from 'react-native-reanimated';
|
|
4
4
|
import { Pressable } from 'react-native';
|
|
@@ -264,7 +264,7 @@ var Pulse = ({
|
|
|
264
264
|
const ap1 = useAnimatedProps(() => ({ r: ring1.r.value, opacity: ring1.opacity.value }));
|
|
265
265
|
const ap2 = useAnimatedProps(() => ({ r: ring2.r.value, opacity: ring2.opacity.value }));
|
|
266
266
|
const ap3 = useAnimatedProps(() => ({ r: ring3.r.value, opacity: ring3.opacity.value }));
|
|
267
|
-
return /* @__PURE__ */
|
|
267
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: PulsePaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedCircle, { animatedProps: ap1, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15.createElement(AnimatedCircle, { animatedProps: ap2, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15.createElement(AnimatedCircle, { animatedProps: ap3, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15.createElement(Circle, { cx: "24", cy: "24", r: 3, fill: s.stroke, opacity: s.opacity }));
|
|
268
268
|
};
|
|
269
269
|
var AnimatedPath = Animated4.createAnimatedComponent(Path);
|
|
270
270
|
var Check = ({
|
|
@@ -298,7 +298,7 @@ var Check = ({
|
|
|
298
298
|
}, [autoPlay, loop, speed]);
|
|
299
299
|
const circleProps = useAnimatedProps(() => ({ strokeDashoffset: circleProgress.value }));
|
|
300
300
|
const checkProps = useAnimatedProps(() => ({ strokeDashoffset: checkProgress.value }));
|
|
301
|
-
return /* @__PURE__ */
|
|
301
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: CheckPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath, { animatedProps: circleProps, d: CheckPaths.circle, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeDasharray: 126, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath, { animatedProps: checkProps, d: CheckPaths.check, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeDasharray: 30, strokeLinecap: "round", opacity: s.opacity }));
|
|
302
302
|
};
|
|
303
303
|
var AnimatedPath2 = Animated4.createAnimatedComponent(Path);
|
|
304
304
|
var Loader = ({
|
|
@@ -335,7 +335,7 @@ var Loader = ({
|
|
|
335
335
|
originX: 24,
|
|
336
336
|
originY: 24
|
|
337
337
|
}));
|
|
338
|
-
return /* @__PURE__ */
|
|
338
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: LoaderPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(
|
|
339
339
|
AnimatedPath2,
|
|
340
340
|
{
|
|
341
341
|
animatedProps,
|
|
@@ -380,7 +380,7 @@ var Upload = ({
|
|
|
380
380
|
}, [autoPlay, loop, speed]);
|
|
381
381
|
const arrowStyle = useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
382
382
|
const barProps = useAnimatedProps(() => ({ strokeDashoffset: barDash.value }));
|
|
383
|
-
return /* @__PURE__ */
|
|
383
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: UploadPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Animated4.View, { style: arrowStyle }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: UploadPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: UploadPaths.arrow, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(AnimatedPath3, { animatedProps: barProps, d: UploadPaths.bar, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", strokeDasharray: 28, opacity: s.opacity }));
|
|
384
384
|
};
|
|
385
385
|
var AnimatedPath4 = Animated4.createAnimatedComponent(Path);
|
|
386
386
|
var Wifi = ({
|
|
@@ -422,8 +422,10 @@ var Wifi = ({
|
|
|
422
422
|
const ap1 = useAnimatedProps(() => ({ opacity: op1.value }));
|
|
423
423
|
const ap2 = useAnimatedProps(() => ({ opacity: op2.value }));
|
|
424
424
|
const ap3 = useAnimatedProps(() => ({ opacity: op3.value }));
|
|
425
|
-
return /* @__PURE__ */
|
|
425
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: WifiPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath4, { animatedProps: ap1, d: WifiPaths.arc1, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15.createElement(AnimatedPath4, { animatedProps: ap2, d: WifiPaths.arc2, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15.createElement(AnimatedPath4, { animatedProps: ap3, d: WifiPaths.arc3, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15.createElement(Circle, { cx: "24", cy: "40", r: 2, fill: s.stroke, opacity: s.opacity }));
|
|
426
426
|
};
|
|
427
|
+
var AnimatedPath5 = Animated4.createAnimatedComponent(Path);
|
|
428
|
+
var AnimatedCircle2 = Animated4.createAnimatedComponent(Circle);
|
|
427
429
|
var Bell = ({
|
|
428
430
|
size = 48,
|
|
429
431
|
autoPlay = true,
|
|
@@ -440,11 +442,12 @@ var Bell = ({
|
|
|
440
442
|
if (autoPlay) {
|
|
441
443
|
rotation.value = withRepeat(
|
|
442
444
|
withSequence(
|
|
443
|
-
withTiming(
|
|
444
|
-
withTiming(
|
|
445
|
-
withTiming(
|
|
446
|
-
withTiming(
|
|
447
|
-
withTiming(
|
|
445
|
+
withTiming(0, { duration: 0 }),
|
|
446
|
+
withTiming(15, { duration: d.long * 0.2, easing: Easing.inOut(Easing.ease) }),
|
|
447
|
+
withTiming(-15, { duration: d.long * 0.2, easing: Easing.inOut(Easing.ease) }),
|
|
448
|
+
withTiming(8, { duration: d.long * 0.2, easing: Easing.inOut(Easing.ease) }),
|
|
449
|
+
withTiming(-8, { duration: d.long * 0.2, easing: Easing.inOut(Easing.ease) }),
|
|
450
|
+
withTiming(0, { duration: d.long * 0.2, easing: Easing.inOut(Easing.ease) })
|
|
448
451
|
),
|
|
449
452
|
loop ? -1 : 1
|
|
450
453
|
);
|
|
@@ -455,13 +458,33 @@ var Bell = ({
|
|
|
455
458
|
} else {
|
|
456
459
|
cancelAnimation(rotation);
|
|
457
460
|
cancelAnimation(badgeScale);
|
|
461
|
+
rotation.value = withTiming(0, { duration: 150 });
|
|
462
|
+
badgeScale.value = withTiming(1, { duration: 150 });
|
|
458
463
|
}
|
|
459
464
|
}, [autoPlay, loop, speed]);
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
|
|
465
|
+
const bellProps = useAnimatedProps(() => ({
|
|
466
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
467
|
+
originX: 24,
|
|
468
|
+
originY: 12
|
|
469
|
+
}));
|
|
470
|
+
const clapperProps = useAnimatedProps(() => ({
|
|
471
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
472
|
+
originX: 24,
|
|
473
|
+
originY: 12
|
|
474
|
+
}));
|
|
475
|
+
const handleProps = useAnimatedProps(() => ({
|
|
476
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
477
|
+
originX: 24,
|
|
478
|
+
originY: 12
|
|
479
|
+
}));
|
|
480
|
+
const badgeProps = useAnimatedProps(() => ({
|
|
481
|
+
transform: [{ scale: badgeScale.value }],
|
|
482
|
+
originX: 34,
|
|
483
|
+
originY: 12
|
|
484
|
+
}));
|
|
485
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: BellPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath5, { animatedProps: bellProps, d: BellPaths.bell, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath5, { animatedProps: clapperProps, d: BellPaths.clapper, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath5, { animatedProps: handleProps, d: BellPaths.handle, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedCircle2, { animatedProps: badgeProps, cx: 34, cy: 12, r: 5, fill: s.stroke, opacity: s.opacity }));
|
|
463
486
|
};
|
|
464
|
-
var
|
|
487
|
+
var AnimatedPath6 = Animated4.createAnimatedComponent(Path);
|
|
465
488
|
var Star = ({
|
|
466
489
|
size = 48,
|
|
467
490
|
autoPlay = true,
|
|
@@ -493,9 +516,9 @@ var Star = ({
|
|
|
493
516
|
}, [autoPlay, trigger]);
|
|
494
517
|
const starProps = useAnimatedProps(() => ({ transform: [{ scale: scaleVal.value }], originX: 24, originY: 24 }));
|
|
495
518
|
const sparkleProps = useAnimatedProps(() => ({ opacity: sparkleOp.value }));
|
|
496
|
-
return /* @__PURE__ */
|
|
519
|
+
return /* @__PURE__ */ React15.createElement(Pressable, { onPress: trigger, style }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: StarPaths.viewBox }, /* @__PURE__ */ React15.createElement(AnimatedPath6, { animatedProps: starProps, d: StarPaths.star, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle1, fill: s.stroke, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle2, fill: s.stroke, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle3, fill: s.stroke, opacity: s.opacity })));
|
|
497
520
|
};
|
|
498
|
-
var
|
|
521
|
+
var AnimatedPath7 = Animated4.createAnimatedComponent(Path);
|
|
499
522
|
var Heart = ({
|
|
500
523
|
size = 48,
|
|
501
524
|
autoPlay = true,
|
|
@@ -531,9 +554,9 @@ var Heart = ({
|
|
|
531
554
|
}, [autoPlay, loop, speed]);
|
|
532
555
|
const heartStyle = useAnimatedStyle(() => ({ transform: [{ scale: scaleVal.value }] }));
|
|
533
556
|
const glowProps = useAnimatedProps(() => ({ opacity: glowOp.value }));
|
|
534
|
-
return /* @__PURE__ */
|
|
557
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: HeartPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath7, { animatedProps: glowProps, d: HeartPaths.glow, fill: s.secondaryColor, stroke: "none" }), /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, heartStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: HeartPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: HeartPaths.heart, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }))));
|
|
535
558
|
};
|
|
536
|
-
var
|
|
559
|
+
var AnimatedPath8 = Animated4.createAnimatedComponent(Path);
|
|
537
560
|
var ECG = ({
|
|
538
561
|
size = 48,
|
|
539
562
|
autoPlay = true,
|
|
@@ -564,10 +587,10 @@ var ECG = ({
|
|
|
564
587
|
}
|
|
565
588
|
}, [autoPlay, loop, speed, onAnimationEnd]);
|
|
566
589
|
const animProps = useAnimatedProps(() => ({ strokeDashoffset: dashOffset.value, opacity: opacity.value }));
|
|
567
|
-
return /* @__PURE__ */
|
|
590
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: ECGPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath8, { animatedProps: animProps, d: ECGPaths.line, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: 100 }));
|
|
568
591
|
};
|
|
569
|
-
var
|
|
570
|
-
var
|
|
592
|
+
var AnimatedPath9 = Animated4.createAnimatedComponent(Path);
|
|
593
|
+
var AnimatedCircle3 = Animated4.createAnimatedComponent(Circle);
|
|
571
594
|
var HeartRate = ({
|
|
572
595
|
size = 48,
|
|
573
596
|
autoPlay = true,
|
|
@@ -608,9 +631,9 @@ var HeartRate = ({
|
|
|
608
631
|
}, [autoPlay, loop, speed, onAnimationEnd]);
|
|
609
632
|
const heartProps = useAnimatedProps(() => ({ transform: [{ scale: scaleVal.value }], originX: 24, originY: 24 }));
|
|
610
633
|
const glowProps = useAnimatedProps(() => ({ r: glowR.value, opacity: glowOp.value }));
|
|
611
|
-
return /* @__PURE__ */
|
|
634
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: HeartRatePaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedCircle3, { animatedProps: glowProps, cx: "24", cy: "24", fill: s.secondaryColor }), /* @__PURE__ */ React15.createElement(AnimatedPath9, { animatedProps: heartProps, d: HeartRatePaths.heart, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }));
|
|
612
635
|
};
|
|
613
|
-
var
|
|
636
|
+
var AnimatedPath10 = Animated4.createAnimatedComponent(Path);
|
|
614
637
|
var Lungs = ({
|
|
615
638
|
size = 48,
|
|
616
639
|
autoPlay = true,
|
|
@@ -634,9 +657,9 @@ var Lungs = ({
|
|
|
634
657
|
}, [autoPlay, loop, speed]);
|
|
635
658
|
const leftProps = useAnimatedProps(() => ({ transform: [{ scaleX: scaleL.value }, { scaleY: scaleL.value }], originX: 16, originY: 26 }));
|
|
636
659
|
const rightProps = useAnimatedProps(() => ({ transform: [{ scaleX: scaleR.value }, { scaleY: scaleR.value }], originX: 32, originY: 26 }));
|
|
637
|
-
return /* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: LungsPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath10, { animatedProps: leftProps, d: LungsPaths.leftLobe, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath10, { animatedProps: rightProps, d: LungsPaths.rightLobe, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: LungsPaths.trunk, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }));
|
|
638
661
|
};
|
|
639
|
-
var
|
|
662
|
+
var AnimatedPath11 = Animated4.createAnimatedComponent(Path);
|
|
640
663
|
var Pill = ({
|
|
641
664
|
size = 48,
|
|
642
665
|
autoPlay = true,
|
|
@@ -660,9 +683,9 @@ var Pill = ({
|
|
|
660
683
|
}, [autoPlay, loop, speed]);
|
|
661
684
|
const bodyStyle = useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
662
685
|
const shineProps = useAnimatedProps(() => ({ opacity: shineOp.value }));
|
|
663
|
-
return /* @__PURE__ */
|
|
686
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: PillPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, bodyStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: PillPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: PillPaths.capsule, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: PillPaths.divider, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(AnimatedPath11, { animatedProps: shineProps, d: PillPaths.shine, stroke: "white", strokeWidth: 2, fill: "none", strokeLinecap: "round" }));
|
|
664
687
|
};
|
|
665
|
-
var
|
|
688
|
+
var AnimatedPath12 = Animated4.createAnimatedComponent(Path);
|
|
666
689
|
var Thermometer = ({
|
|
667
690
|
size = 48,
|
|
668
691
|
autoPlay = true,
|
|
@@ -695,9 +718,9 @@ var Thermometer = ({
|
|
|
695
718
|
}, [autoPlay, loop, speed]);
|
|
696
719
|
const mercuryProps = useAnimatedProps(() => ({ transform: [{ scaleY: mercuryScale.value }], originY: 34 }));
|
|
697
720
|
const tubeStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${tubeRotation.value}deg` }] }));
|
|
698
|
-
return /* @__PURE__ */
|
|
721
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: ThermometerPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, tubeStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: ThermometerPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: ThermometerPaths.tube, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(AnimatedPath12, { animatedProps: mercuryProps, d: ThermometerPaths.mercury, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Circle, { cx: "24", cy: "40", r: 5, fill: s.fill, opacity: s.opacity }));
|
|
699
722
|
};
|
|
700
|
-
var
|
|
723
|
+
var AnimatedPath13 = Animated4.createAnimatedComponent(Path);
|
|
701
724
|
var DNA = ({
|
|
702
725
|
size = 48,
|
|
703
726
|
autoPlay = true,
|
|
@@ -717,9 +740,9 @@ var DNA = ({
|
|
|
717
740
|
}
|
|
718
741
|
}, [autoPlay, loop, speed]);
|
|
719
742
|
const animProps = useAnimatedProps(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
720
|
-
return /* @__PURE__ */
|
|
743
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: DNAPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath13, { animatedProps: animProps, d: DNAPaths.strand1, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath13, { animatedProps: animProps, d: DNAPaths.strand2, stroke: s.secondaryColor, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath13, { animatedProps: animProps, d: `${DNAPaths.rung1} ${DNAPaths.rung2} ${DNAPaths.rung3}`, stroke: s.stroke, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", opacity: s.opacity * 0.6 }));
|
|
721
744
|
};
|
|
722
|
-
var
|
|
745
|
+
var AnimatedPath14 = Animated4.createAnimatedComponent(Path);
|
|
723
746
|
var Syringe = ({
|
|
724
747
|
size = 48,
|
|
725
748
|
autoPlay = true,
|
|
@@ -750,9 +773,9 @@ var Syringe = ({
|
|
|
750
773
|
const plungerStyle = useAnimatedStyle(() => ({ transform: [{ translateX: plungerX.value }] }));
|
|
751
774
|
const liquidProps = useAnimatedProps(() => ({ transform: [{ scaleX: liquidScale.value }], originX: 14 }));
|
|
752
775
|
const dropProps = useAnimatedProps(() => ({ opacity: dropOp.value, transform: [{ translateY: dropY.value }] }));
|
|
753
|
-
return /* @__PURE__ */
|
|
776
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: SyringePaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Path, { d: SyringePaths.barrel, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath14, { animatedProps: liquidProps, d: SyringePaths.liquid, fill: s.fill, opacity: s.opacity * 0.7 }), /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, plungerStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: SyringePaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: SyringePaths.plunger, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(Path, { d: SyringePaths.needle, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath14, { animatedProps: dropProps, d: SyringePaths.drop, fill: s.fill }));
|
|
754
777
|
};
|
|
755
|
-
var
|
|
778
|
+
var AnimatedCircle4 = Animated4.createAnimatedComponent(Circle);
|
|
756
779
|
var Brain = ({
|
|
757
780
|
size = 48,
|
|
758
781
|
autoPlay = true,
|
|
@@ -788,10 +811,10 @@ var Brain = ({
|
|
|
788
811
|
const ap1 = useAnimatedProps(() => ({ r: n1r.value, opacity: n1op.value }));
|
|
789
812
|
const ap2 = useAnimatedProps(() => ({ r: n2r.value, opacity: n2op.value }));
|
|
790
813
|
const ap3 = useAnimatedProps(() => ({ r: n3r.value, opacity: n3op.value }));
|
|
791
|
-
return /* @__PURE__ */
|
|
814
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: BrainPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Path, { d: BrainPaths.left, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: BrainPaths.right, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: `${BrainPaths.synapse1} ${BrainPaths.synapse2}`, stroke: s.stroke, strokeWidth: 1, fill: "none", opacity: s.opacity * 0.5 }), /* @__PURE__ */ React15.createElement(AnimatedCircle4, { animatedProps: ap1, cx: "16", cy: "20", fill: s.fill }), /* @__PURE__ */ React15.createElement(AnimatedCircle4, { animatedProps: ap2, cx: "24", cy: "16", fill: s.fill }), /* @__PURE__ */ React15.createElement(AnimatedCircle4, { animatedProps: ap3, cx: "32", cy: "20", fill: s.fill }));
|
|
792
815
|
};
|
|
793
|
-
var
|
|
794
|
-
var
|
|
816
|
+
var AnimatedPath15 = Animated4.createAnimatedComponent(Path);
|
|
817
|
+
var AnimatedCircle5 = Animated4.createAnimatedComponent(Circle);
|
|
795
818
|
var BloodDrop = ({
|
|
796
819
|
size = 48,
|
|
797
820
|
autoPlay = true,
|
|
@@ -821,9 +844,9 @@ var BloodDrop = ({
|
|
|
821
844
|
const dropProps = useAnimatedProps(() => ({ transform: [{ scaleY: scaleY.value }], originY: 28 }));
|
|
822
845
|
const rip1Props = useAnimatedProps(() => ({ r: r1.value, opacity: op1.value }));
|
|
823
846
|
const rip2Props = useAnimatedProps(() => ({ r: r2.value, opacity: op2.value }));
|
|
824
|
-
return /* @__PURE__ */
|
|
847
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: BloodDropPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath15, { animatedProps: dropProps, d: BloodDropPaths.drop, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedCircle5, { animatedProps: rip1Props, cx: "24", cy: "42", stroke: s.stroke, strokeWidth: 1.5, fill: "none" }), /* @__PURE__ */ React15.createElement(AnimatedCircle5, { animatedProps: rip2Props, cx: "24", cy: "42", stroke: s.stroke, strokeWidth: 1.5, fill: "none" }));
|
|
825
848
|
};
|
|
826
|
-
var
|
|
849
|
+
var AnimatedPath16 = Animated4.createAnimatedComponent(Path);
|
|
827
850
|
var Steps = ({
|
|
828
851
|
size = 48,
|
|
829
852
|
autoPlay = true,
|
|
@@ -847,9 +870,9 @@ var Steps = ({
|
|
|
847
870
|
}, [autoPlay, loop, speed]);
|
|
848
871
|
const f1Props = useAnimatedProps(() => ({ opacity: op1.value }));
|
|
849
872
|
const f2Props = useAnimatedProps(() => ({ opacity: op2.value }));
|
|
850
|
-
return /* @__PURE__ */
|
|
873
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: StepsPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(AnimatedPath16, { animatedProps: f1Props, d: `${StepsPaths.foot1} ${StepsPaths.toe1a} ${StepsPaths.toe1b}`, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, strokeLinecap: "round" }), /* @__PURE__ */ React15.createElement(AnimatedPath16, { animatedProps: f2Props, d: `${StepsPaths.foot2} ${StepsPaths.toe2a} ${StepsPaths.toe2b}`, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, strokeLinecap: "round" }));
|
|
851
874
|
};
|
|
852
|
-
var
|
|
875
|
+
var AnimatedPath17 = Animated4.createAnimatedComponent(Path);
|
|
853
876
|
var Sleep = ({
|
|
854
877
|
size = 48,
|
|
855
878
|
autoPlay = true,
|
|
@@ -885,9 +908,9 @@ var Sleep = ({
|
|
|
885
908
|
const star2Props = useAnimatedProps(() => ({ opacity: star2Op.value }));
|
|
886
909
|
const z1Props = useAnimatedProps(() => ({ opacity: z1Op.value, transform: [{ translateY: z1Y.value }] }));
|
|
887
910
|
const z2Props = useAnimatedProps(() => ({ opacity: z2Op.value, transform: [{ translateY: z2Y.value }] }));
|
|
888
|
-
return /* @__PURE__ */
|
|
911
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: SleepPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, moonStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: SleepPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: SleepPaths.moon, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(AnimatedPath17, { animatedProps: star1Props, d: SleepPaths.star1, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath17, { animatedProps: star2Props, d: SleepPaths.star2, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedPath17, { animatedProps: z1Props, d: SleepPaths.z1, stroke: s.stroke, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React15.createElement(AnimatedPath17, { animatedProps: z2Props, d: SleepPaths.z2, stroke: s.stroke, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
889
912
|
};
|
|
890
|
-
var
|
|
913
|
+
var AnimatedCircle6 = Animated4.createAnimatedComponent(Circle);
|
|
891
914
|
var Oxygen = ({
|
|
892
915
|
size = 48,
|
|
893
916
|
autoPlay = true,
|
|
@@ -914,9 +937,9 @@ var Oxygen = ({
|
|
|
914
937
|
originX: 24,
|
|
915
938
|
originY: 24
|
|
916
939
|
}));
|
|
917
|
-
return /* @__PURE__ */
|
|
940
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: OxygenPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Path, { d: OxygenPaths.orbit, stroke: s.secondaryColor, strokeWidth: 1, fill: "none", strokeDasharray: "3 3", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Circle, { cx: "18", cy: "20", r: 4, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Circle, { cx: "26", cy: "20", r: 4, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: OxygenPaths.bond, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15.createElement(AnimatedCircle6, { animatedProps: electronProps, cx: "40", cy: "24", r: 2.5, fill: s.fill, opacity: s.opacity }));
|
|
918
941
|
};
|
|
919
|
-
var
|
|
942
|
+
var AnimatedPath18 = Animated4.createAnimatedComponent(Path);
|
|
920
943
|
var Medkit = ({
|
|
921
944
|
size = 48,
|
|
922
945
|
autoPlay = true,
|
|
@@ -940,7 +963,7 @@ var Medkit = ({
|
|
|
940
963
|
}, [autoPlay, loop, speed]);
|
|
941
964
|
const bodyStyle = useAnimatedStyle(() => ({ transform: [{ translateY: bodyY.value }] }));
|
|
942
965
|
const crossProps = useAnimatedProps(() => ({ transform: [{ scale: crossScale.value }], originX: 24, originY: 27 }));
|
|
943
|
-
return /* @__PURE__ */
|
|
966
|
+
return /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: MedkitPaths.viewBox, style }, /* @__PURE__ */ React15.createElement(Animated4.View, { style: [{ position: "absolute" }, bodyStyle] }, /* @__PURE__ */ React15.createElement(Svg, { width: size, height: size, viewBox: MedkitPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15.createElement(Path, { d: MedkitPaths.box, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15.createElement(Path, { d: MedkitPaths.handle, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }))), /* @__PURE__ */ React15.createElement(AnimatedPath18, { animatedProps: crossProps, d: `${MedkitPaths.crossV} ${MedkitPaths.crossH}`, stroke: s.fill, strokeWidth: 3, strokeLinecap: "round", fill: "none", opacity: s.opacity }));
|
|
944
967
|
};
|
|
945
968
|
|
|
946
969
|
export { Bell, BloodDrop, Brain, Check, DNA, ECG, Heart, HeartRate, Loader, Lungs, Medkit, Oxygen, Pill, Pulse, Sleep, Star, Steps, Syringe, Thermometer, Upload, Wifi, getAnimDuration, resolveStyle };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React15 = require('react');
|
|
4
4
|
var reactNativeSvg = require('react-native-svg');
|
|
5
5
|
var Animated4 = require('react-native-reanimated');
|
|
6
6
|
var reactNative = require('react-native');
|
|
7
7
|
|
|
8
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var React15__default = /*#__PURE__*/_interopDefault(React15);
|
|
11
11
|
var Animated4__default = /*#__PURE__*/_interopDefault(Animated4);
|
|
12
12
|
|
|
13
13
|
// src/icons/ui/Pulse.tsx
|
|
@@ -240,7 +240,7 @@ var AnimatedCircle = Animated4__default.default.createAnimatedComponent(reactNat
|
|
|
240
240
|
function usePulseRing(stagger, duration, autoPlay, loop) {
|
|
241
241
|
const r = Animated4.useSharedValue(4);
|
|
242
242
|
const opacity = Animated4.useSharedValue(0.8);
|
|
243
|
-
|
|
243
|
+
React15.useEffect(() => {
|
|
244
244
|
if (autoPlay) {
|
|
245
245
|
r.value = Animated4.withDelay(stagger, Animated4.withRepeat(Animated4.withTiming(20, { duration, easing: Animated4.Easing.out(Animated4.Easing.ease) }), loop ? -1 : 1));
|
|
246
246
|
opacity.value = Animated4.withDelay(stagger, Animated4.withRepeat(Animated4.withTiming(0, { duration, easing: Animated4.Easing.out(Animated4.Easing.ease) }), loop ? -1 : 1));
|
|
@@ -271,7 +271,7 @@ var Pulse = ({
|
|
|
271
271
|
const ap1 = Animated4.useAnimatedProps(() => ({ r: ring1.r.value, opacity: ring1.opacity.value }));
|
|
272
272
|
const ap2 = Animated4.useAnimatedProps(() => ({ r: ring2.r.value, opacity: ring2.opacity.value }));
|
|
273
273
|
const ap3 = Animated4.useAnimatedProps(() => ({ r: ring3.r.value, opacity: ring3.opacity.value }));
|
|
274
|
-
return /* @__PURE__ */
|
|
274
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: PulsePaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle, { animatedProps: ap1, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle, { animatedProps: ap2, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle, { animatedProps: ap3, cx: "24", cy: "24", stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none" }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Circle, { cx: "24", cy: "24", r: 3, fill: s.stroke, opacity: s.opacity }));
|
|
275
275
|
};
|
|
276
276
|
var AnimatedPath = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
277
277
|
var Check = ({
|
|
@@ -287,7 +287,7 @@ var Check = ({
|
|
|
287
287
|
const checkProgress = Animated4.useSharedValue(30);
|
|
288
288
|
const d = getAnimDuration(speed);
|
|
289
289
|
const s = resolveStyle(colorProps, CheckPaths);
|
|
290
|
-
|
|
290
|
+
React15.useEffect(() => {
|
|
291
291
|
if (autoPlay) {
|
|
292
292
|
if (loop) {
|
|
293
293
|
circleProgress.value = Animated4.withRepeat(Animated4.withTiming(0, { duration: d.short, easing: Animated4.Easing.ease }), -1);
|
|
@@ -305,7 +305,7 @@ var Check = ({
|
|
|
305
305
|
}, [autoPlay, loop, speed]);
|
|
306
306
|
const circleProps = Animated4.useAnimatedProps(() => ({ strokeDashoffset: circleProgress.value }));
|
|
307
307
|
const checkProps = Animated4.useAnimatedProps(() => ({ strokeDashoffset: checkProgress.value }));
|
|
308
|
-
return /* @__PURE__ */
|
|
308
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: CheckPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath, { animatedProps: circleProps, d: CheckPaths.circle, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeDasharray: 126, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath, { animatedProps: checkProps, d: CheckPaths.check, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeDasharray: 30, strokeLinecap: "round", opacity: s.opacity }));
|
|
309
309
|
};
|
|
310
310
|
var AnimatedPath2 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
311
311
|
var Loader = ({
|
|
@@ -320,7 +320,7 @@ var Loader = ({
|
|
|
320
320
|
const rotation = Animated4.useSharedValue(0);
|
|
321
321
|
const d = getAnimDuration(speed);
|
|
322
322
|
const s = resolveStyle(colorProps, LoaderPaths);
|
|
323
|
-
|
|
323
|
+
React15.useEffect(() => {
|
|
324
324
|
if (autoPlay) {
|
|
325
325
|
rotation.value = Animated4.withRepeat(
|
|
326
326
|
Animated4.withTiming(360, { duration: d.medium, easing: Animated4.Easing.linear }),
|
|
@@ -342,7 +342,7 @@ var Loader = ({
|
|
|
342
342
|
originX: 24,
|
|
343
343
|
originY: 24
|
|
344
344
|
}));
|
|
345
|
-
return /* @__PURE__ */
|
|
345
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: LoaderPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(
|
|
346
346
|
AnimatedPath2,
|
|
347
347
|
{
|
|
348
348
|
animatedProps,
|
|
@@ -368,7 +368,7 @@ var Upload = ({
|
|
|
368
368
|
const barDash = Animated4.useSharedValue(28);
|
|
369
369
|
const d = getAnimDuration(speed);
|
|
370
370
|
const s = resolveStyle(colorProps, UploadPaths);
|
|
371
|
-
|
|
371
|
+
React15.useEffect(() => {
|
|
372
372
|
if (autoPlay) {
|
|
373
373
|
translateY.value = Animated4.withRepeat(
|
|
374
374
|
Animated4.withTiming(-6, { duration: d.short, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
@@ -387,7 +387,7 @@ var Upload = ({
|
|
|
387
387
|
}, [autoPlay, loop, speed]);
|
|
388
388
|
const arrowStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
389
389
|
const barProps = Animated4.useAnimatedProps(() => ({ strokeDashoffset: barDash.value }));
|
|
390
|
-
return /* @__PURE__ */
|
|
390
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: UploadPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: arrowStyle }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: UploadPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: UploadPaths.arrow, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath3, { animatedProps: barProps, d: UploadPaths.bar, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", strokeDasharray: 28, opacity: s.opacity }));
|
|
391
391
|
};
|
|
392
392
|
var AnimatedPath4 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
393
393
|
var Wifi = ({
|
|
@@ -403,7 +403,7 @@ var Wifi = ({
|
|
|
403
403
|
const op3 = Animated4.useSharedValue(0);
|
|
404
404
|
const d = getAnimDuration(speed);
|
|
405
405
|
const s = resolveStyle(colorProps, WifiPaths);
|
|
406
|
-
|
|
406
|
+
React15.useEffect(() => {
|
|
407
407
|
if (autoPlay) {
|
|
408
408
|
const anim = (sv, delay) => {
|
|
409
409
|
sv.value = Animated4.withDelay(delay, Animated4.withRepeat(
|
|
@@ -429,8 +429,10 @@ var Wifi = ({
|
|
|
429
429
|
const ap1 = Animated4.useAnimatedProps(() => ({ opacity: op1.value }));
|
|
430
430
|
const ap2 = Animated4.useAnimatedProps(() => ({ opacity: op2.value }));
|
|
431
431
|
const ap3 = Animated4.useAnimatedProps(() => ({ opacity: op3.value }));
|
|
432
|
-
return /* @__PURE__ */
|
|
432
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: WifiPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath4, { animatedProps: ap1, d: WifiPaths.arc1, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath4, { animatedProps: ap2, d: WifiPaths.arc2, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath4, { animatedProps: ap3, d: WifiPaths.arc3, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round" }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Circle, { cx: "24", cy: "40", r: 2, fill: s.stroke, opacity: s.opacity }));
|
|
433
433
|
};
|
|
434
|
+
var AnimatedPath5 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
435
|
+
var AnimatedCircle2 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Circle);
|
|
434
436
|
var Bell = ({
|
|
435
437
|
size = 48,
|
|
436
438
|
autoPlay = true,
|
|
@@ -443,15 +445,16 @@ var Bell = ({
|
|
|
443
445
|
const badgeScale = Animated4.useSharedValue(1);
|
|
444
446
|
const d = getAnimDuration(speed);
|
|
445
447
|
const s = resolveStyle(colorProps, BellPaths);
|
|
446
|
-
|
|
448
|
+
React15.useEffect(() => {
|
|
447
449
|
if (autoPlay) {
|
|
448
450
|
rotation.value = Animated4.withRepeat(
|
|
449
451
|
Animated4.withSequence(
|
|
450
|
-
Animated4.withTiming(
|
|
451
|
-
Animated4.withTiming(
|
|
452
|
-
Animated4.withTiming(
|
|
453
|
-
Animated4.withTiming(
|
|
454
|
-
Animated4.withTiming(
|
|
452
|
+
Animated4.withTiming(0, { duration: 0 }),
|
|
453
|
+
Animated4.withTiming(15, { duration: d.long * 0.2, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
454
|
+
Animated4.withTiming(-15, { duration: d.long * 0.2, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
455
|
+
Animated4.withTiming(8, { duration: d.long * 0.2, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
456
|
+
Animated4.withTiming(-8, { duration: d.long * 0.2, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
457
|
+
Animated4.withTiming(0, { duration: d.long * 0.2, easing: Animated4.Easing.inOut(Animated4.Easing.ease) })
|
|
455
458
|
),
|
|
456
459
|
loop ? -1 : 1
|
|
457
460
|
);
|
|
@@ -462,13 +465,33 @@ var Bell = ({
|
|
|
462
465
|
} else {
|
|
463
466
|
Animated4.cancelAnimation(rotation);
|
|
464
467
|
Animated4.cancelAnimation(badgeScale);
|
|
468
|
+
rotation.value = Animated4.withTiming(0, { duration: 150 });
|
|
469
|
+
badgeScale.value = Animated4.withTiming(1, { duration: 150 });
|
|
465
470
|
}
|
|
466
471
|
}, [autoPlay, loop, speed]);
|
|
467
|
-
const
|
|
468
|
-
|
|
469
|
-
|
|
472
|
+
const bellProps = Animated4.useAnimatedProps(() => ({
|
|
473
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
474
|
+
originX: 24,
|
|
475
|
+
originY: 12
|
|
476
|
+
}));
|
|
477
|
+
const clapperProps = Animated4.useAnimatedProps(() => ({
|
|
478
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
479
|
+
originX: 24,
|
|
480
|
+
originY: 12
|
|
481
|
+
}));
|
|
482
|
+
const handleProps = Animated4.useAnimatedProps(() => ({
|
|
483
|
+
transform: [{ rotate: `${rotation.value}deg` }],
|
|
484
|
+
originX: 24,
|
|
485
|
+
originY: 12
|
|
486
|
+
}));
|
|
487
|
+
const badgeProps = Animated4.useAnimatedProps(() => ({
|
|
488
|
+
transform: [{ scale: badgeScale.value }],
|
|
489
|
+
originX: 34,
|
|
490
|
+
originY: 12
|
|
491
|
+
}));
|
|
492
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: BellPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath5, { animatedProps: bellProps, d: BellPaths.bell, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath5, { animatedProps: clapperProps, d: BellPaths.clapper, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath5, { animatedProps: handleProps, d: BellPaths.handle, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle2, { animatedProps: badgeProps, cx: 34, cy: 12, r: 5, fill: s.stroke, opacity: s.opacity }));
|
|
470
493
|
};
|
|
471
|
-
var
|
|
494
|
+
var AnimatedPath6 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
472
495
|
var Star = ({
|
|
473
496
|
size = 48,
|
|
474
497
|
autoPlay = true,
|
|
@@ -481,7 +504,7 @@ var Star = ({
|
|
|
481
504
|
const sparkleOp = Animated4.useSharedValue(0);
|
|
482
505
|
const d = getAnimDuration(speed);
|
|
483
506
|
const s = resolveStyle(colorProps, StarPaths);
|
|
484
|
-
const trigger =
|
|
507
|
+
const trigger = React15.useCallback(() => {
|
|
485
508
|
scaleVal.value = Animated4.withTiming(1.3, { duration: d.short * 0.5 }, () => {
|
|
486
509
|
scaleVal.value = Animated4.withTiming(1, { duration: d.short * 0.5 }, () => {
|
|
487
510
|
if (onAnimationEnd) Animated4.runOnJS(onAnimationEnd)();
|
|
@@ -491,7 +514,7 @@ var Star = ({
|
|
|
491
514
|
sparkleOp.value = Animated4.withTiming(0, { duration: d.short * 0.5 });
|
|
492
515
|
});
|
|
493
516
|
}, [onAnimationEnd, d.short, scaleVal, sparkleOp]);
|
|
494
|
-
|
|
517
|
+
React15.useEffect(() => {
|
|
495
518
|
if (autoPlay) trigger();
|
|
496
519
|
return () => {
|
|
497
520
|
Animated4.cancelAnimation(scaleVal);
|
|
@@ -500,9 +523,9 @@ var Star = ({
|
|
|
500
523
|
}, [autoPlay, trigger]);
|
|
501
524
|
const starProps = Animated4.useAnimatedProps(() => ({ transform: [{ scale: scaleVal.value }], originX: 24, originY: 24 }));
|
|
502
525
|
const sparkleProps = Animated4.useAnimatedProps(() => ({ opacity: sparkleOp.value }));
|
|
503
|
-
return /* @__PURE__ */
|
|
526
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNative.Pressable, { onPress: trigger, style }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: StarPaths.viewBox }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath6, { animatedProps: starProps, d: StarPaths.star, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle1, fill: s.stroke, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle2, fill: s.stroke, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath6, { animatedProps: sparkleProps, d: StarPaths.sparkle3, fill: s.stroke, opacity: s.opacity })));
|
|
504
527
|
};
|
|
505
|
-
var
|
|
528
|
+
var AnimatedPath7 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
506
529
|
var Heart = ({
|
|
507
530
|
size = 48,
|
|
508
531
|
autoPlay = true,
|
|
@@ -515,7 +538,7 @@ var Heart = ({
|
|
|
515
538
|
const glowOp = Animated4.useSharedValue(0);
|
|
516
539
|
const d = getAnimDuration(speed);
|
|
517
540
|
const s = resolveStyle(colorProps, HeartPaths);
|
|
518
|
-
|
|
541
|
+
React15.useEffect(() => {
|
|
519
542
|
if (autoPlay) {
|
|
520
543
|
const beat = Animated4.withSequence(
|
|
521
544
|
Animated4.withTiming(1.2, { duration: d.short * 0.35, easing: Animated4.Easing.out(Animated4.Easing.ease) }),
|
|
@@ -538,9 +561,9 @@ var Heart = ({
|
|
|
538
561
|
}, [autoPlay, loop, speed]);
|
|
539
562
|
const heartStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ scale: scaleVal.value }] }));
|
|
540
563
|
const glowProps = Animated4.useAnimatedProps(() => ({ opacity: glowOp.value }));
|
|
541
|
-
return /* @__PURE__ */
|
|
564
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: HeartPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath7, { animatedProps: glowProps, d: HeartPaths.glow, fill: s.secondaryColor, stroke: "none" }), /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, heartStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: HeartPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: HeartPaths.heart, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }))));
|
|
542
565
|
};
|
|
543
|
-
var
|
|
566
|
+
var AnimatedPath8 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
544
567
|
var ECG = ({
|
|
545
568
|
size = 48,
|
|
546
569
|
autoPlay = true,
|
|
@@ -554,7 +577,7 @@ var ECG = ({
|
|
|
554
577
|
const opacity = Animated4.useSharedValue(1);
|
|
555
578
|
const d = getAnimDuration(speed);
|
|
556
579
|
const s = resolveStyle(colorProps, ECGPaths);
|
|
557
|
-
|
|
580
|
+
React15.useEffect(() => {
|
|
558
581
|
if (autoPlay) {
|
|
559
582
|
dashOffset.value = Animated4.withRepeat(
|
|
560
583
|
Animated4.withTiming(0, { duration: d.long * 0.7, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }),
|
|
@@ -571,10 +594,10 @@ var ECG = ({
|
|
|
571
594
|
}
|
|
572
595
|
}, [autoPlay, loop, speed, onAnimationEnd]);
|
|
573
596
|
const animProps = Animated4.useAnimatedProps(() => ({ strokeDashoffset: dashOffset.value, opacity: opacity.value }));
|
|
574
|
-
return /* @__PURE__ */
|
|
597
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: ECGPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath8, { animatedProps: animProps, d: ECGPaths.line, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: 100 }));
|
|
575
598
|
};
|
|
576
|
-
var
|
|
577
|
-
var
|
|
599
|
+
var AnimatedPath9 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
600
|
+
var AnimatedCircle3 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Circle);
|
|
578
601
|
var HeartRate = ({
|
|
579
602
|
size = 48,
|
|
580
603
|
autoPlay = true,
|
|
@@ -589,7 +612,7 @@ var HeartRate = ({
|
|
|
589
612
|
const glowOp = Animated4.useSharedValue(0);
|
|
590
613
|
const d = getAnimDuration(speed);
|
|
591
614
|
const s = resolveStyle(colorProps, HeartRatePaths);
|
|
592
|
-
|
|
615
|
+
React15.useEffect(() => {
|
|
593
616
|
if (autoPlay) {
|
|
594
617
|
scaleVal.value = Animated4.withRepeat(
|
|
595
618
|
Animated4.withSequence(Animated4.withTiming(1.2, { duration: d.medium * 0.2 }), Animated4.withTiming(1, { duration: d.medium * 0.8 })),
|
|
@@ -615,9 +638,9 @@ var HeartRate = ({
|
|
|
615
638
|
}, [autoPlay, loop, speed, onAnimationEnd]);
|
|
616
639
|
const heartProps = Animated4.useAnimatedProps(() => ({ transform: [{ scale: scaleVal.value }], originX: 24, originY: 24 }));
|
|
617
640
|
const glowProps = Animated4.useAnimatedProps(() => ({ r: glowR.value, opacity: glowOp.value }));
|
|
618
|
-
return /* @__PURE__ */
|
|
641
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: HeartRatePaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle3, { animatedProps: glowProps, cx: "24", cy: "24", fill: s.secondaryColor }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath9, { animatedProps: heartProps, d: HeartRatePaths.heart, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }));
|
|
619
642
|
};
|
|
620
|
-
var
|
|
643
|
+
var AnimatedPath10 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
621
644
|
var Lungs = ({
|
|
622
645
|
size = 48,
|
|
623
646
|
autoPlay = true,
|
|
@@ -630,7 +653,7 @@ var Lungs = ({
|
|
|
630
653
|
const scaleR = Animated4.useSharedValue(1);
|
|
631
654
|
const d = getAnimDuration(speed);
|
|
632
655
|
const s = resolveStyle(colorProps, LungsPaths);
|
|
633
|
-
|
|
656
|
+
React15.useEffect(() => {
|
|
634
657
|
if (autoPlay) {
|
|
635
658
|
scaleL.value = Animated4.withRepeat(Animated4.withTiming(1.08, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
636
659
|
scaleR.value = Animated4.withRepeat(Animated4.withTiming(1.08, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
@@ -641,9 +664,9 @@ var Lungs = ({
|
|
|
641
664
|
}, [autoPlay, loop, speed]);
|
|
642
665
|
const leftProps = Animated4.useAnimatedProps(() => ({ transform: [{ scaleX: scaleL.value }, { scaleY: scaleL.value }], originX: 16, originY: 26 }));
|
|
643
666
|
const rightProps = Animated4.useAnimatedProps(() => ({ transform: [{ scaleX: scaleR.value }, { scaleY: scaleR.value }], originX: 32, originY: 26 }));
|
|
644
|
-
return /* @__PURE__ */
|
|
667
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: LungsPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath10, { animatedProps: leftProps, d: LungsPaths.leftLobe, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath10, { animatedProps: rightProps, d: LungsPaths.rightLobe, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: LungsPaths.trunk, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }));
|
|
645
668
|
};
|
|
646
|
-
var
|
|
669
|
+
var AnimatedPath11 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
647
670
|
var Pill = ({
|
|
648
671
|
size = 48,
|
|
649
672
|
autoPlay = true,
|
|
@@ -656,7 +679,7 @@ var Pill = ({
|
|
|
656
679
|
const shineOp = Animated4.useSharedValue(0);
|
|
657
680
|
const d = getAnimDuration(speed);
|
|
658
681
|
const s = resolveStyle(colorProps, PillPaths);
|
|
659
|
-
|
|
682
|
+
React15.useEffect(() => {
|
|
660
683
|
if (autoPlay) {
|
|
661
684
|
translateY.value = Animated4.withRepeat(Animated4.withTiming(-5, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
662
685
|
shineOp.value = Animated4.withRepeat(Animated4.withTiming(0.8, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
@@ -667,9 +690,9 @@ var Pill = ({
|
|
|
667
690
|
}, [autoPlay, loop, speed]);
|
|
668
691
|
const bodyStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
669
692
|
const shineProps = Animated4.useAnimatedProps(() => ({ opacity: shineOp.value }));
|
|
670
|
-
return /* @__PURE__ */
|
|
693
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: PillPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, bodyStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: PillPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: PillPaths.capsule, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: PillPaths.divider, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath11, { animatedProps: shineProps, d: PillPaths.shine, stroke: "white", strokeWidth: 2, fill: "none", strokeLinecap: "round" }));
|
|
671
694
|
};
|
|
672
|
-
var
|
|
695
|
+
var AnimatedPath12 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
673
696
|
var Thermometer = ({
|
|
674
697
|
size = 48,
|
|
675
698
|
autoPlay = true,
|
|
@@ -682,7 +705,7 @@ var Thermometer = ({
|
|
|
682
705
|
const tubeRotation = Animated4.useSharedValue(0);
|
|
683
706
|
const d = getAnimDuration(speed);
|
|
684
707
|
const s = resolveStyle(colorProps, ThermometerPaths);
|
|
685
|
-
|
|
708
|
+
React15.useEffect(() => {
|
|
686
709
|
if (autoPlay) {
|
|
687
710
|
mercuryScale.value = Animated4.withRepeat(Animated4.withTiming(1, { duration: d.long * 0.7, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
688
711
|
tubeRotation.value = Animated4.withRepeat(
|
|
@@ -702,9 +725,9 @@ var Thermometer = ({
|
|
|
702
725
|
}, [autoPlay, loop, speed]);
|
|
703
726
|
const mercuryProps = Animated4.useAnimatedProps(() => ({ transform: [{ scaleY: mercuryScale.value }], originY: 34 }));
|
|
704
727
|
const tubeStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ rotate: `${tubeRotation.value}deg` }] }));
|
|
705
|
-
return /* @__PURE__ */
|
|
728
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: ThermometerPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, tubeStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: ThermometerPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: ThermometerPaths.tube, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath12, { animatedProps: mercuryProps, d: ThermometerPaths.mercury, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Circle, { cx: "24", cy: "40", r: 5, fill: s.fill, opacity: s.opacity }));
|
|
706
729
|
};
|
|
707
|
-
var
|
|
730
|
+
var AnimatedPath13 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
708
731
|
var DNA = ({
|
|
709
732
|
size = 48,
|
|
710
733
|
autoPlay = true,
|
|
@@ -716,7 +739,7 @@ var DNA = ({
|
|
|
716
739
|
const translateY = Animated4.useSharedValue(0);
|
|
717
740
|
const d = getAnimDuration(speed);
|
|
718
741
|
const s = resolveStyle(colorProps, DNAPaths);
|
|
719
|
-
|
|
742
|
+
React15.useEffect(() => {
|
|
720
743
|
if (autoPlay) {
|
|
721
744
|
translateY.value = Animated4.withRepeat(Animated4.withTiming(-16, { duration: d.medium, easing: Animated4.Easing.linear }), loop ? -1 : 1, true);
|
|
722
745
|
} else {
|
|
@@ -724,9 +747,9 @@ var DNA = ({
|
|
|
724
747
|
}
|
|
725
748
|
}, [autoPlay, loop, speed]);
|
|
726
749
|
const animProps = Animated4.useAnimatedProps(() => ({ transform: [{ translateY: translateY.value }] }));
|
|
727
|
-
return /* @__PURE__ */
|
|
750
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: DNAPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath13, { animatedProps: animProps, d: DNAPaths.strand1, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath13, { animatedProps: animProps, d: DNAPaths.strand2, stroke: s.secondaryColor, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath13, { animatedProps: animProps, d: `${DNAPaths.rung1} ${DNAPaths.rung2} ${DNAPaths.rung3}`, stroke: s.stroke, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", opacity: s.opacity * 0.6 }));
|
|
728
751
|
};
|
|
729
|
-
var
|
|
752
|
+
var AnimatedPath14 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
730
753
|
var Syringe = ({
|
|
731
754
|
size = 48,
|
|
732
755
|
autoPlay = true,
|
|
@@ -741,7 +764,7 @@ var Syringe = ({
|
|
|
741
764
|
const dropY = Animated4.useSharedValue(0);
|
|
742
765
|
const d = getAnimDuration(speed);
|
|
743
766
|
const s = resolveStyle(colorProps, SyringePaths);
|
|
744
|
-
|
|
767
|
+
React15.useEffect(() => {
|
|
745
768
|
if (autoPlay) {
|
|
746
769
|
plungerX.value = Animated4.withRepeat(Animated4.withSequence(Animated4.withTiming(8, { duration: d.long * 0.5 }), Animated4.withTiming(0, { duration: d.long * 0.5 })), loop ? -1 : 1);
|
|
747
770
|
liquidScale.value = Animated4.withRepeat(Animated4.withSequence(Animated4.withTiming(0.3, { duration: d.long * 0.5 }), Animated4.withTiming(1, { duration: d.long * 0.5 })), loop ? -1 : 1);
|
|
@@ -757,9 +780,9 @@ var Syringe = ({
|
|
|
757
780
|
const plungerStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ translateX: plungerX.value }] }));
|
|
758
781
|
const liquidProps = Animated4.useAnimatedProps(() => ({ transform: [{ scaleX: liquidScale.value }], originX: 14 }));
|
|
759
782
|
const dropProps = Animated4.useAnimatedProps(() => ({ opacity: dropOp.value, transform: [{ translateY: dropY.value }] }));
|
|
760
|
-
return /* @__PURE__ */
|
|
783
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: SyringePaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: SyringePaths.barrel, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath14, { animatedProps: liquidProps, d: SyringePaths.liquid, fill: s.fill, opacity: s.opacity * 0.7 }), /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, plungerStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: SyringePaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: SyringePaths.plunger, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: SyringePaths.needle, stroke: s.stroke, strokeWidth: s.strokeWidth, strokeLinecap: "round", fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath14, { animatedProps: dropProps, d: SyringePaths.drop, fill: s.fill }));
|
|
761
784
|
};
|
|
762
|
-
var
|
|
785
|
+
var AnimatedCircle4 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Circle);
|
|
763
786
|
var Brain = ({
|
|
764
787
|
size = 48,
|
|
765
788
|
autoPlay = true,
|
|
@@ -776,7 +799,7 @@ var Brain = ({
|
|
|
776
799
|
const n3op = Animated4.useSharedValue(0.2);
|
|
777
800
|
const d = getAnimDuration(speed);
|
|
778
801
|
const s = resolveStyle(colorProps, BrainPaths);
|
|
779
|
-
|
|
802
|
+
React15.useEffect(() => {
|
|
780
803
|
if (autoPlay) {
|
|
781
804
|
const fire = (r, op, delay) => {
|
|
782
805
|
r.value = Animated4.withDelay(delay, Animated4.withRepeat(Animated4.withTiming(4.5, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true));
|
|
@@ -795,10 +818,10 @@ var Brain = ({
|
|
|
795
818
|
const ap1 = Animated4.useAnimatedProps(() => ({ r: n1r.value, opacity: n1op.value }));
|
|
796
819
|
const ap2 = Animated4.useAnimatedProps(() => ({ r: n2r.value, opacity: n2op.value }));
|
|
797
820
|
const ap3 = Animated4.useAnimatedProps(() => ({ r: n3r.value, opacity: n3op.value }));
|
|
798
|
-
return /* @__PURE__ */
|
|
821
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: BrainPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: BrainPaths.left, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: BrainPaths.right, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, strokeLinecap: "round", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: `${BrainPaths.synapse1} ${BrainPaths.synapse2}`, stroke: s.stroke, strokeWidth: 1, fill: "none", opacity: s.opacity * 0.5 }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle4, { animatedProps: ap1, cx: "16", cy: "20", fill: s.fill }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle4, { animatedProps: ap2, cx: "24", cy: "16", fill: s.fill }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle4, { animatedProps: ap3, cx: "32", cy: "20", fill: s.fill }));
|
|
799
822
|
};
|
|
800
|
-
var
|
|
801
|
-
var
|
|
823
|
+
var AnimatedPath15 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
824
|
+
var AnimatedCircle5 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Circle);
|
|
802
825
|
var BloodDrop = ({
|
|
803
826
|
size = 48,
|
|
804
827
|
autoPlay = true,
|
|
@@ -814,7 +837,7 @@ var BloodDrop = ({
|
|
|
814
837
|
const op2 = Animated4.useSharedValue(0.6);
|
|
815
838
|
const d = getAnimDuration(speed);
|
|
816
839
|
const s = resolveStyle(colorProps, BloodDropPaths);
|
|
817
|
-
|
|
840
|
+
React15.useEffect(() => {
|
|
818
841
|
if (autoPlay) {
|
|
819
842
|
scaleY.value = Animated4.withRepeat(Animated4.withTiming(0.85, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
820
843
|
r1.value = Animated4.withRepeat(Animated4.withTiming(10, { duration: d.long, easing: Animated4.Easing.out(Animated4.Easing.ease) }), loop ? -1 : 1);
|
|
@@ -828,9 +851,9 @@ var BloodDrop = ({
|
|
|
828
851
|
const dropProps = Animated4.useAnimatedProps(() => ({ transform: [{ scaleY: scaleY.value }], originY: 28 }));
|
|
829
852
|
const rip1Props = Animated4.useAnimatedProps(() => ({ r: r1.value, opacity: op1.value }));
|
|
830
853
|
const rip2Props = Animated4.useAnimatedProps(() => ({ r: r2.value, opacity: op2.value }));
|
|
831
|
-
return /* @__PURE__ */
|
|
854
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: BloodDropPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath15, { animatedProps: dropProps, d: BloodDropPaths.drop, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle5, { animatedProps: rip1Props, cx: "24", cy: "42", stroke: s.stroke, strokeWidth: 1.5, fill: "none" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle5, { animatedProps: rip2Props, cx: "24", cy: "42", stroke: s.stroke, strokeWidth: 1.5, fill: "none" }));
|
|
832
855
|
};
|
|
833
|
-
var
|
|
856
|
+
var AnimatedPath16 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
834
857
|
var Steps = ({
|
|
835
858
|
size = 48,
|
|
836
859
|
autoPlay = true,
|
|
@@ -843,7 +866,7 @@ var Steps = ({
|
|
|
843
866
|
const op2 = Animated4.useSharedValue(1);
|
|
844
867
|
const d = getAnimDuration(speed);
|
|
845
868
|
const s = resolveStyle(colorProps, StepsPaths);
|
|
846
|
-
|
|
869
|
+
React15.useEffect(() => {
|
|
847
870
|
if (autoPlay) {
|
|
848
871
|
op1.value = Animated4.withRepeat(Animated4.withTiming(1, { duration: d.medium, easing: Animated4.Easing.ease }), loop ? -1 : 1, true);
|
|
849
872
|
op2.value = Animated4.withRepeat(Animated4.withTiming(0.3, { duration: d.medium, easing: Animated4.Easing.ease }), loop ? -1 : 1, true);
|
|
@@ -854,9 +877,9 @@ var Steps = ({
|
|
|
854
877
|
}, [autoPlay, loop, speed]);
|
|
855
878
|
const f1Props = Animated4.useAnimatedProps(() => ({ opacity: op1.value }));
|
|
856
879
|
const f2Props = Animated4.useAnimatedProps(() => ({ opacity: op2.value }));
|
|
857
|
-
return /* @__PURE__ */
|
|
880
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: StepsPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(AnimatedPath16, { animatedProps: f1Props, d: `${StepsPaths.foot1} ${StepsPaths.toe1a} ${StepsPaths.toe1b}`, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, strokeLinecap: "round" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath16, { animatedProps: f2Props, d: `${StepsPaths.foot2} ${StepsPaths.toe2a} ${StepsPaths.toe2b}`, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.fill, strokeLinecap: "round" }));
|
|
858
881
|
};
|
|
859
|
-
var
|
|
882
|
+
var AnimatedPath17 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
860
883
|
var Sleep = ({
|
|
861
884
|
size = 48,
|
|
862
885
|
autoPlay = true,
|
|
@@ -874,7 +897,7 @@ var Sleep = ({
|
|
|
874
897
|
const z2Op = Animated4.useSharedValue(0);
|
|
875
898
|
const d = getAnimDuration(speed);
|
|
876
899
|
const s = resolveStyle(colorProps, SleepPaths);
|
|
877
|
-
|
|
900
|
+
React15.useEffect(() => {
|
|
878
901
|
if (autoPlay) {
|
|
879
902
|
moonScale.value = Animated4.withRepeat(Animated4.withTiming(1.05, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
880
903
|
star1Op.value = Animated4.withDelay(d.stagger, Animated4.withRepeat(Animated4.withTiming(1, { duration: d.long }), loop ? -1 : 1, true));
|
|
@@ -892,9 +915,9 @@ var Sleep = ({
|
|
|
892
915
|
const star2Props = Animated4.useAnimatedProps(() => ({ opacity: star2Op.value }));
|
|
893
916
|
const z1Props = Animated4.useAnimatedProps(() => ({ opacity: z1Op.value, transform: [{ translateY: z1Y.value }] }));
|
|
894
917
|
const z2Props = Animated4.useAnimatedProps(() => ({ opacity: z2Op.value, transform: [{ translateY: z2Y.value }] }));
|
|
895
|
-
return /* @__PURE__ */
|
|
918
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: SleepPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, moonStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: SleepPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: SleepPaths.moon, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath17, { animatedProps: star1Props, d: SleepPaths.star1, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath17, { animatedProps: star2Props, d: SleepPaths.star2, fill: s.fill, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath17, { animatedProps: z1Props, d: SleepPaths.z1, stroke: s.stroke, strokeWidth: 2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath17, { animatedProps: z2Props, d: SleepPaths.z2, stroke: s.stroke, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
896
919
|
};
|
|
897
|
-
var
|
|
920
|
+
var AnimatedCircle6 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Circle);
|
|
898
921
|
var Oxygen = ({
|
|
899
922
|
size = 48,
|
|
900
923
|
autoPlay = true,
|
|
@@ -906,7 +929,7 @@ var Oxygen = ({
|
|
|
906
929
|
const rotation = Animated4.useSharedValue(0);
|
|
907
930
|
const d = getAnimDuration(speed);
|
|
908
931
|
const s = resolveStyle(colorProps, OxygenPaths);
|
|
909
|
-
|
|
932
|
+
React15.useEffect(() => {
|
|
910
933
|
if (autoPlay) {
|
|
911
934
|
rotation.value = Animated4.withRepeat(Animated4.withTiming(360, { duration: d.long, easing: Animated4.Easing.linear }), loop ? -1 : 1);
|
|
912
935
|
} else {
|
|
@@ -921,9 +944,9 @@ var Oxygen = ({
|
|
|
921
944
|
originX: 24,
|
|
922
945
|
originY: 24
|
|
923
946
|
}));
|
|
924
|
-
return /* @__PURE__ */
|
|
947
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: OxygenPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: OxygenPaths.orbit, stroke: s.secondaryColor, strokeWidth: 1, fill: "none", strokeDasharray: "3 3", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Circle, { cx: "18", cy: "20", r: 4, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Circle, { cx: "26", cy: "20", r: 4, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: OxygenPaths.bond, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(AnimatedCircle6, { animatedProps: electronProps, cx: "40", cy: "24", r: 2.5, fill: s.fill, opacity: s.opacity }));
|
|
925
948
|
};
|
|
926
|
-
var
|
|
949
|
+
var AnimatedPath18 = Animated4__default.default.createAnimatedComponent(reactNativeSvg.Path);
|
|
927
950
|
var Medkit = ({
|
|
928
951
|
size = 48,
|
|
929
952
|
autoPlay = true,
|
|
@@ -936,7 +959,7 @@ var Medkit = ({
|
|
|
936
959
|
const crossScale = Animated4.useSharedValue(1);
|
|
937
960
|
const d = getAnimDuration(speed);
|
|
938
961
|
const s = resolveStyle(colorProps, MedkitPaths);
|
|
939
|
-
|
|
962
|
+
React15.useEffect(() => {
|
|
940
963
|
if (autoPlay) {
|
|
941
964
|
bodyY.value = Animated4.withRepeat(Animated4.withTiming(-5, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
942
965
|
crossScale.value = Animated4.withRepeat(Animated4.withTiming(1.2, { duration: d.long, easing: Animated4.Easing.inOut(Animated4.Easing.ease) }), loop ? -1 : 1, true);
|
|
@@ -947,7 +970,7 @@ var Medkit = ({
|
|
|
947
970
|
}, [autoPlay, loop, speed]);
|
|
948
971
|
const bodyStyle = Animated4.useAnimatedStyle(() => ({ transform: [{ translateY: bodyY.value }] }));
|
|
949
972
|
const crossProps = Animated4.useAnimatedProps(() => ({ transform: [{ scale: crossScale.value }], originX: 24, originY: 27 }));
|
|
950
|
-
return /* @__PURE__ */
|
|
973
|
+
return /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: MedkitPaths.viewBox, style }, /* @__PURE__ */ React15__default.default.createElement(Animated4__default.default.View, { style: [{ position: "absolute" }, bodyStyle] }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Svg, { width: size, height: size, viewBox: MedkitPaths.viewBox, style: { position: "absolute" } }, /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: MedkitPaths.box, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: s.secondaryColor, opacity: s.opacity }), /* @__PURE__ */ React15__default.default.createElement(reactNativeSvg.Path, { d: MedkitPaths.handle, stroke: s.stroke, strokeWidth: s.strokeWidth, fill: "none", strokeLinecap: "round", opacity: s.opacity }))), /* @__PURE__ */ React15__default.default.createElement(AnimatedPath18, { animatedProps: crossProps, d: `${MedkitPaths.crossV} ${MedkitPaths.crossH}`, stroke: s.fill, strokeWidth: 3, strokeLinecap: "round", fill: "none", opacity: s.opacity }));
|
|
951
974
|
};
|
|
952
975
|
|
|
953
976
|
exports.Bell = Bell;
|