@animicons/react-native 0.1.1

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.
Files changed (6) hide show
  1. package/README.md +88 -0
  2. package/dist/index.d.mts +70 -0
  3. package/dist/index.d.ts +70 -0
  4. package/dist/index.esm.js +739 -0
  5. package/dist/index.js +768 -0
  6. package/package.json +51 -0
package/README.md ADDED
@@ -0,0 +1,88 @@
1
+ # @animicons
2
+
3
+ Animated SVG icon library for React and React Native. 21 icons across UI/System and Healthcare categories. 60fps animations. Full colour customisation. Tree-shakeable.
4
+
5
+ ## Packages
6
+
7
+ | Package | Platform | Install |
8
+ |---------|----------|---------|
9
+ | `@animicons/react` | React (web) | `npm install @animicons/react react-native-svg` |
10
+ | `@animicons/react-native` | React Native | `npm install @animicons/react-native react-native-svg react-native-reanimated` |
11
+
12
+ ## Usage
13
+
14
+ ```tsx
15
+ // Web
16
+ import { ECG, Brain, Loader } from '@animicons/react'
17
+
18
+ // React Native
19
+ import { ECG, Brain, Loader } from '@animicons/react-native'
20
+
21
+ // Auto-plays, loops forever
22
+ <ECG size={48} color="#f43f5e" />
23
+
24
+ // Full colour control
25
+ <Brain
26
+ size={40}
27
+ strokeColor="#ec4899"
28
+ fillColor="#fce7f3"
29
+ secondaryColor="#fbcfe8"
30
+ strokeWidth={2}
31
+ opacity={0.9}
32
+ />
33
+
34
+ // Slow, plays once, fires callback
35
+ <Loader speed="slow" loop={false} onAnimationEnd={() => console.log('done')} />
36
+ ```
37
+
38
+ ## Props
39
+
40
+ | Prop | Type | Default | Description |
41
+ |------|------|---------|-------------|
42
+ | `size` | `number` | `48` | Width and height in dp/px |
43
+ | `color` | `string` | icon default | Primary shorthand — sets stroke + fill |
44
+ | `strokeColor` | `string` | `color` | Explicit stroke override |
45
+ | `fillColor` | `string` | `color` | Explicit fill override |
46
+ | `secondaryColor` | `string` | auto | Background / glow colour |
47
+ | `opacity` | `number` | `1` | Global opacity (0–1) |
48
+ | `strokeWidth` | `number` | icon default | Stroke thickness |
49
+ | `autoPlay` | `boolean` | `true` | Start animation on mount |
50
+ | `loop` | `boolean` | `true` | Repeat indefinitely |
51
+ | `speed` | `'slow'\|'normal'\|'fast'` | `'normal'` | Duration multiplier |
52
+ | `style` | `object` | — | Container style |
53
+ | `onAnimationEnd` | `() => void` | — | Fires at end of each cycle |
54
+
55
+ ## Icons
56
+
57
+ ### UI / System
58
+ `Pulse` `Check` `Loader` `Upload` `Wifi` `Bell` `Star` `Heart`
59
+
60
+ ### Healthcare
61
+ `ECG` `HeartRate` `Lungs` `Pill` `Thermometer` `DNA` `Syringe` `Brain` `BloodDrop` `Steps` `Sleep` `Oxygen` `Medkit`
62
+
63
+ ## React Native setup
64
+
65
+ Add to `babel.config.js`:
66
+ ```js
67
+ plugins: ['react-native-reanimated/plugin']
68
+ ```
69
+
70
+ Expo:
71
+ ```bash
72
+ npx expo install react-native-svg react-native-reanimated
73
+ ```
74
+
75
+ ## Adding new icons (for maintainers)
76
+
77
+ 1. Add path data to `packages/shared/src/paths/<category>/NewIcon.ts`
78
+ 2. Add component to `packages/react/src/icons/<category>/NewIcon.tsx`
79
+ 3. Add component to `packages/react-native/src/icons/<category>/NewIcon.tsx`
80
+ 4. Add `export { NewIcon } from './NewIcon'` to each `icons/<category>/index.ts`
81
+ 5. Bump minor version in both `package.json` files
82
+ 6. `npm run build && npm run publish:web && npm run publish:rn`
83
+
84
+ Existing consumers are never affected — all exports are additive.
85
+
86
+ ## License
87
+
88
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,70 @@
1
+ import React from 'react';
2
+ import { IconProps, AnimationSpeed, DurationSet } from '@animicons/shared';
3
+ export { AnimationSpeed, IconProps } from '@animicons/shared';
4
+
5
+ declare const Pulse: React.FC<IconProps>;
6
+
7
+ declare const Check: React.FC<IconProps>;
8
+
9
+ declare const Loader: React.FC<IconProps>;
10
+
11
+ declare const Upload: React.FC<IconProps>;
12
+
13
+ declare const Wifi: React.FC<IconProps>;
14
+
15
+ declare const Bell: React.FC<IconProps>;
16
+
17
+ declare const Star: React.FC<IconProps>;
18
+
19
+ declare const Heart: React.FC<IconProps>;
20
+
21
+ declare const ECG: React.FC<IconProps>;
22
+
23
+ declare const HeartRate: React.FC<IconProps>;
24
+
25
+ declare const Lungs: React.FC<IconProps>;
26
+
27
+ declare const Pill: React.FC<IconProps>;
28
+
29
+ declare const Thermometer: React.FC<IconProps>;
30
+
31
+ declare const DNA: React.FC<IconProps>;
32
+
33
+ declare const Syringe: React.FC<IconProps>;
34
+
35
+ declare const Brain: React.FC<IconProps>;
36
+
37
+ declare const BloodDrop: React.FC<IconProps>;
38
+
39
+ declare const Steps: React.FC<IconProps>;
40
+
41
+ declare const Sleep: React.FC<IconProps>;
42
+
43
+ declare const Oxygen: React.FC<IconProps>;
44
+
45
+ declare const Medkit: React.FC<IconProps>;
46
+
47
+ interface PathDefaults {
48
+ defaultColor: string;
49
+ defaultStrokeWidth: number;
50
+ }
51
+ interface ResolvedStyle {
52
+ stroke: string;
53
+ fill: string;
54
+ secondaryColor: string;
55
+ opacity: number;
56
+ strokeWidth: number;
57
+ }
58
+ interface StyleProps {
59
+ color?: string;
60
+ strokeColor?: string;
61
+ fillColor?: string;
62
+ secondaryColor?: string;
63
+ opacity?: number;
64
+ strokeWidth?: number;
65
+ }
66
+ declare function resolveStyle(props: StyleProps, defaults: PathDefaults): ResolvedStyle;
67
+
68
+ declare function getAnimDuration(speed?: AnimationSpeed): DurationSet;
69
+
70
+ 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.d.ts ADDED
@@ -0,0 +1,70 @@
1
+ import React from 'react';
2
+ import { IconProps, AnimationSpeed, DurationSet } from '@animicons/shared';
3
+ export { AnimationSpeed, IconProps } from '@animicons/shared';
4
+
5
+ declare const Pulse: React.FC<IconProps>;
6
+
7
+ declare const Check: React.FC<IconProps>;
8
+
9
+ declare const Loader: React.FC<IconProps>;
10
+
11
+ declare const Upload: React.FC<IconProps>;
12
+
13
+ declare const Wifi: React.FC<IconProps>;
14
+
15
+ declare const Bell: React.FC<IconProps>;
16
+
17
+ declare const Star: React.FC<IconProps>;
18
+
19
+ declare const Heart: React.FC<IconProps>;
20
+
21
+ declare const ECG: React.FC<IconProps>;
22
+
23
+ declare const HeartRate: React.FC<IconProps>;
24
+
25
+ declare const Lungs: React.FC<IconProps>;
26
+
27
+ declare const Pill: React.FC<IconProps>;
28
+
29
+ declare const Thermometer: React.FC<IconProps>;
30
+
31
+ declare const DNA: React.FC<IconProps>;
32
+
33
+ declare const Syringe: React.FC<IconProps>;
34
+
35
+ declare const Brain: React.FC<IconProps>;
36
+
37
+ declare const BloodDrop: React.FC<IconProps>;
38
+
39
+ declare const Steps: React.FC<IconProps>;
40
+
41
+ declare const Sleep: React.FC<IconProps>;
42
+
43
+ declare const Oxygen: React.FC<IconProps>;
44
+
45
+ declare const Medkit: React.FC<IconProps>;
46
+
47
+ interface PathDefaults {
48
+ defaultColor: string;
49
+ defaultStrokeWidth: number;
50
+ }
51
+ interface ResolvedStyle {
52
+ stroke: string;
53
+ fill: string;
54
+ secondaryColor: string;
55
+ opacity: number;
56
+ strokeWidth: number;
57
+ }
58
+ interface StyleProps {
59
+ color?: string;
60
+ strokeColor?: string;
61
+ fillColor?: string;
62
+ secondaryColor?: string;
63
+ opacity?: number;
64
+ strokeWidth?: number;
65
+ }
66
+ declare function resolveStyle(props: StyleProps, defaults: PathDefaults): ResolvedStyle;
67
+
68
+ declare function getAnimDuration(speed?: AnimationSpeed): DurationSet;
69
+
70
+ export { Bell, BloodDrop, Brain, Check, DNA, ECG, Heart, HeartRate, Loader, Lungs, Medkit, Oxygen, Pill, Pulse, Sleep, Star, Steps, Syringe, Thermometer, Upload, Wifi, getAnimDuration, resolveStyle };