@animicons/react-native 0.2.1 → 0.3.0

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 +47 -32
  2. package/dist/index.d.mts +167 -1
  3. package/dist/index.d.ts +167 -1
  4. package/dist/index.esm.js +5083 -515
  5. package/dist/index.js +5156 -505
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,22 +1,39 @@
1
- # @animicons
1
+ # @animicons/react-native
2
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.
3
+ Animated SVG icon library for React Native. 104 icons. 60fps animations powered by `react-native-reanimated`. Full colour customisation. Tree-shakeable.
4
4
 
5
- ## Packages
5
+ ## Preview
6
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` |
7
+ <p align="center">
8
+ <img src="https://raw.githubusercontent.com/prakashs1117/animicons/main/assets/demo-react-native.gif" width="280" alt="React Native demo" />
9
+ </p>
10
+
11
+ **[Web Playground →](https://prakashs1117.github.io/animicons/)**
12
+
13
+ ## Install
14
+
15
+ ```bash
16
+ npm install @animicons/react-native react-native-svg react-native-reanimated
17
+ ```
18
+
19
+ Add to `babel.config.js`:
20
+ ```js
21
+ // babel.config.js
22
+ module.exports = {
23
+ presets: ['module:metro-react-native-babel-preset'], // or 'babel-preset-expo' for Expo
24
+ plugins: ['react-native-reanimated/plugin'],
25
+ };
26
+ ```
27
+
28
+ Expo:
29
+ ```bash
30
+ npx expo install react-native-svg react-native-reanimated
31
+ ```
11
32
 
12
33
  ## Usage
13
34
 
14
35
  ```tsx
15
- // Web
16
- import { ECG, Brain, Loader } from '@animicons/react'
17
-
18
- // React Native
19
- import { ECG, Brain, Loader } from '@animicons/react-native'
36
+ import { ECG, Brain, Loader, Bell, Heart } from '@animicons/react-native'
20
37
 
21
38
  // Auto-plays, loops forever
22
39
  <ECG size={48} color="#f43f5e" />
@@ -39,7 +56,7 @@ import { ECG, Brain, Loader } from '@animicons/react-native'
39
56
 
40
57
  | Prop | Type | Default | Description |
41
58
  |------|------|---------|-------------|
42
- | `size` | `number` | `48` | Width and height in dp/px |
59
+ | `size` | `number` | `48` | Width and height in dp |
43
60
  | `color` | `string` | icon default | Primary shorthand — sets stroke + fill |
44
61
  | `strokeColor` | `string` | `color` | Explicit stroke override |
45
62
  | `fillColor` | `string` | `color` | Explicit fill override |
@@ -57,31 +74,29 @@ import { ECG, Brain, Loader } from '@animicons/react-native'
57
74
  ### UI / System
58
75
  `Pulse` `Check` `Loader` `Upload` `Wifi` `Bell` `Star` `Heart`
59
76
 
60
- ### Healthcare
61
- `ECG` `HeartRate` `Lungs` `Pill` `Thermometer` `DNA` `Syringe` `Brain` `BloodDrop` `Steps` `Sleep` `Oxygen` `Medkit`
77
+ ### Navigation & Structure
78
+ `Home` `Menu` `KebabMenu` `MoreHorizontal` `Back` `Forward` `ChevronDown` `Close` `Grid` `Search` `ChevronUp` `ChevronLeft` `ChevronRight` `ArrowUp` `ArrowDown` `ArrowLeft` `SortAsc` `SortDesc` `ZoomIn` `ZoomOut` `AlertTriangle` `AlertCircle` `Calendar` `Clock` `Globe` `Flag` `Notification`
62
79
 
63
- ## React Native setup
80
+ ### Core Actions
81
+ `Add` `Edit` `Save` `Trash` `Share` `Download` `Refresh` `Sync` `Copy` `Pin` `Bookmark` `Filter` `Undo` `Redo`
64
82
 
65
- Add to `babel.config.js`:
66
- ```js
67
- plugins: ['react-native-reanimated/plugin']
68
- ```
83
+ ### Communication & Social
84
+ `Mail` `Chat` `Phone` `Video` `User` `Users` `ThumbsUp` `Send` `Reaction` `Mention`
69
85
 
70
- Expo:
71
- ```bash
72
- npx expo install react-native-svg react-native-reanimated
73
- ```
86
+ ### Settings & Configuration
87
+ `Settings` `Sliders` `Lock` `Unlock` `Key` `Eye` `EyeOff` `Info` `Help` `Logout`
74
88
 
75
- ## Adding new icons (for maintainers)
89
+ ### File & Content
90
+ `Folder` `Document` `Image` `Attachment` `Cloud` `Link` `Archive` `Tag`
76
91
 
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`
92
+ ### Media Playback
93
+ `Play` `Pause` `Stop` `FastForward` `Rewind` `Volume` `Mute` `Microphone`
83
94
 
84
- Existing consumers are never affected — all exports are additive.
95
+ ### Device & Hardware
96
+ `Battery` `Bluetooth` `Location` `CloudSync` `Camera` `Brightness`
97
+
98
+ ### Healthcare
99
+ `ECG` `HeartRate` `Lungs` `Pill` `Thermometer` `DNA` `Syringe` `Brain` `BloodDrop` `Steps` `Sleep` `Oxygen` `Medkit`
85
100
 
86
101
  ## License
87
102
 
package/dist/index.d.mts CHANGED
@@ -18,6 +18,60 @@ declare const Star: React.FC<IconProps>;
18
18
 
19
19
  declare const Heart: React.FC<IconProps>;
20
20
 
21
+ declare const Home: React.FC<IconProps>;
22
+
23
+ declare const Menu: React.FC<IconProps>;
24
+
25
+ declare const KebabMenu: React.FC<IconProps>;
26
+
27
+ declare const MoreHorizontal: React.FC<IconProps>;
28
+
29
+ declare const Back: React.FC<IconProps>;
30
+
31
+ declare const Forward: React.FC<IconProps>;
32
+
33
+ declare const ChevronDown: React.FC<IconProps>;
34
+
35
+ declare const Close: React.FC<IconProps>;
36
+
37
+ declare const Grid: React.FC<IconProps>;
38
+
39
+ declare const Search: React.FC<IconProps>;
40
+
41
+ declare const ChevronUp: React.FC<IconProps>;
42
+
43
+ declare const ChevronLeft: React.FC<IconProps>;
44
+
45
+ declare const ChevronRight: React.FC<IconProps>;
46
+
47
+ declare const ArrowUp: React.FC<IconProps>;
48
+
49
+ declare const ArrowDown: React.FC<IconProps>;
50
+
51
+ declare const ArrowLeft: React.FC<IconProps>;
52
+
53
+ declare const SortAsc: React.FC<IconProps>;
54
+
55
+ declare const SortDesc: React.FC<IconProps>;
56
+
57
+ declare const ZoomIn: React.FC<IconProps>;
58
+
59
+ declare const ZoomOut: React.FC<IconProps>;
60
+
61
+ declare const AlertTriangle: React.FC<IconProps>;
62
+
63
+ declare const AlertCircle: React.FC<IconProps>;
64
+
65
+ declare const Calendar: React.FC<IconProps>;
66
+
67
+ declare const Clock: React.FC<IconProps>;
68
+
69
+ declare const Globe: React.FC<IconProps>;
70
+
71
+ declare const Flag: React.FC<IconProps>;
72
+
73
+ declare const Notification: React.FC<IconProps>;
74
+
21
75
  declare const ECG: React.FC<IconProps>;
22
76
 
23
77
  declare const HeartRate: React.FC<IconProps>;
@@ -44,6 +98,118 @@ declare const Oxygen: React.FC<IconProps>;
44
98
 
45
99
  declare const Medkit: React.FC<IconProps>;
46
100
 
101
+ declare const Add: React.FC<IconProps>;
102
+
103
+ declare const Edit: React.FC<IconProps>;
104
+
105
+ declare const Save: React.FC<IconProps>;
106
+
107
+ declare const Trash: React.FC<IconProps>;
108
+
109
+ declare const Share: React.FC<IconProps>;
110
+
111
+ declare const Download: React.FC<IconProps>;
112
+
113
+ declare const Refresh: React.FC<IconProps>;
114
+
115
+ declare const Sync: React.FC<IconProps>;
116
+
117
+ declare const Copy: React.FC<IconProps>;
118
+
119
+ declare const Pin: React.FC<IconProps>;
120
+
121
+ declare const Bookmark: React.FC<IconProps>;
122
+
123
+ declare const Filter: React.FC<IconProps>;
124
+
125
+ declare const Undo: React.FC<IconProps>;
126
+
127
+ declare const Redo: React.FC<IconProps>;
128
+
129
+ declare const Mail: React.FC<IconProps>;
130
+
131
+ declare const Chat: React.FC<IconProps>;
132
+
133
+ declare const Phone: React.FC<IconProps>;
134
+
135
+ declare const Video: React.FC<IconProps>;
136
+
137
+ declare const User: React.FC<IconProps>;
138
+
139
+ declare const Users: React.FC<IconProps>;
140
+
141
+ declare const ThumbsUp: React.FC<IconProps>;
142
+
143
+ declare const Send: React.FC<IconProps>;
144
+
145
+ declare const Reaction: React.FC<IconProps>;
146
+
147
+ declare const Mention: React.FC<IconProps>;
148
+
149
+ declare const Settings: React.FC<IconProps>;
150
+
151
+ declare const Sliders: React.FC<IconProps>;
152
+
153
+ declare const Lock: React.FC<IconProps>;
154
+
155
+ declare const Unlock: React.FC<IconProps>;
156
+
157
+ declare const Key: React.FC<IconProps>;
158
+
159
+ declare const Eye: React.FC<IconProps>;
160
+
161
+ declare const EyeOff: React.FC<IconProps>;
162
+
163
+ declare const Info: React.FC<IconProps>;
164
+
165
+ declare const Help: React.FC<IconProps>;
166
+
167
+ declare const Logout: React.FC<IconProps>;
168
+
169
+ declare const Folder: React.FC<IconProps>;
170
+
171
+ declare const Document: React.FC<IconProps>;
172
+
173
+ declare const Image: React.FC<IconProps>;
174
+
175
+ declare const Attachment: React.FC<IconProps>;
176
+
177
+ declare const Cloud: React.FC<IconProps>;
178
+
179
+ declare const Link: React.FC<IconProps>;
180
+
181
+ declare const Archive: React.FC<IconProps>;
182
+
183
+ declare const Tag: React.FC<IconProps>;
184
+
185
+ declare const Play: React.FC<IconProps>;
186
+
187
+ declare const Pause: React.FC<IconProps>;
188
+
189
+ declare const Stop: React.FC<IconProps>;
190
+
191
+ declare const FastForward: React.FC<IconProps>;
192
+
193
+ declare const Rewind: React.FC<IconProps>;
194
+
195
+ declare const Volume: React.FC<IconProps>;
196
+
197
+ declare const Mute: React.FC<IconProps>;
198
+
199
+ declare const Microphone: React.FC<IconProps>;
200
+
201
+ declare const Battery: React.FC<IconProps>;
202
+
203
+ declare const Bluetooth: React.FC<IconProps>;
204
+
205
+ declare const Location: React.FC<IconProps>;
206
+
207
+ declare const CloudSync: React.FC<IconProps>;
208
+
209
+ declare const Camera: React.FC<IconProps>;
210
+
211
+ declare const Brightness: React.FC<IconProps>;
212
+
47
213
  interface PathDefaults {
48
214
  defaultColor: string;
49
215
  defaultStrokeWidth: number;
@@ -67,4 +233,4 @@ declare function resolveStyle(props: StyleProps, defaults: PathDefaults): Resolv
67
233
 
68
234
  declare function getAnimDuration(speed?: AnimationSpeed): DurationSet;
69
235
 
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 };
236
+ export { Add, AlertCircle, AlertTriangle, Archive, ArrowDown, ArrowLeft, ArrowUp, Attachment, Back, Battery, Bell, BloodDrop, Bluetooth, Bookmark, Brain, Brightness, Calendar, Camera, Chat, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Close, Cloud, CloudSync, Copy, DNA, Document, Download, ECG, Edit, Eye, EyeOff, FastForward, Filter, Flag, Folder, Forward, Globe, Grid, Heart, HeartRate, Help, Home, Image, Info, KebabMenu, Key, Link, Loader, Location, Lock, Logout, Lungs, Mail, Medkit, Mention, Menu, Microphone, MoreHorizontal, Mute, Notification, Oxygen, Pause, Phone, Pill, Pin, Play, Pulse, Reaction, Redo, Refresh, Rewind, Save, Search, Send, Settings, Share, Sleep, Sliders, SortAsc, SortDesc, Star, Steps, Stop, Sync, Syringe, Tag, Thermometer, ThumbsUp, Trash, Undo, Unlock, Upload, User, Users, Video, Volume, Wifi, ZoomIn, ZoomOut, getAnimDuration, resolveStyle };
package/dist/index.d.ts CHANGED
@@ -18,6 +18,60 @@ declare const Star: React.FC<IconProps>;
18
18
 
19
19
  declare const Heart: React.FC<IconProps>;
20
20
 
21
+ declare const Home: React.FC<IconProps>;
22
+
23
+ declare const Menu: React.FC<IconProps>;
24
+
25
+ declare const KebabMenu: React.FC<IconProps>;
26
+
27
+ declare const MoreHorizontal: React.FC<IconProps>;
28
+
29
+ declare const Back: React.FC<IconProps>;
30
+
31
+ declare const Forward: React.FC<IconProps>;
32
+
33
+ declare const ChevronDown: React.FC<IconProps>;
34
+
35
+ declare const Close: React.FC<IconProps>;
36
+
37
+ declare const Grid: React.FC<IconProps>;
38
+
39
+ declare const Search: React.FC<IconProps>;
40
+
41
+ declare const ChevronUp: React.FC<IconProps>;
42
+
43
+ declare const ChevronLeft: React.FC<IconProps>;
44
+
45
+ declare const ChevronRight: React.FC<IconProps>;
46
+
47
+ declare const ArrowUp: React.FC<IconProps>;
48
+
49
+ declare const ArrowDown: React.FC<IconProps>;
50
+
51
+ declare const ArrowLeft: React.FC<IconProps>;
52
+
53
+ declare const SortAsc: React.FC<IconProps>;
54
+
55
+ declare const SortDesc: React.FC<IconProps>;
56
+
57
+ declare const ZoomIn: React.FC<IconProps>;
58
+
59
+ declare const ZoomOut: React.FC<IconProps>;
60
+
61
+ declare const AlertTriangle: React.FC<IconProps>;
62
+
63
+ declare const AlertCircle: React.FC<IconProps>;
64
+
65
+ declare const Calendar: React.FC<IconProps>;
66
+
67
+ declare const Clock: React.FC<IconProps>;
68
+
69
+ declare const Globe: React.FC<IconProps>;
70
+
71
+ declare const Flag: React.FC<IconProps>;
72
+
73
+ declare const Notification: React.FC<IconProps>;
74
+
21
75
  declare const ECG: React.FC<IconProps>;
22
76
 
23
77
  declare const HeartRate: React.FC<IconProps>;
@@ -44,6 +98,118 @@ declare const Oxygen: React.FC<IconProps>;
44
98
 
45
99
  declare const Medkit: React.FC<IconProps>;
46
100
 
101
+ declare const Add: React.FC<IconProps>;
102
+
103
+ declare const Edit: React.FC<IconProps>;
104
+
105
+ declare const Save: React.FC<IconProps>;
106
+
107
+ declare const Trash: React.FC<IconProps>;
108
+
109
+ declare const Share: React.FC<IconProps>;
110
+
111
+ declare const Download: React.FC<IconProps>;
112
+
113
+ declare const Refresh: React.FC<IconProps>;
114
+
115
+ declare const Sync: React.FC<IconProps>;
116
+
117
+ declare const Copy: React.FC<IconProps>;
118
+
119
+ declare const Pin: React.FC<IconProps>;
120
+
121
+ declare const Bookmark: React.FC<IconProps>;
122
+
123
+ declare const Filter: React.FC<IconProps>;
124
+
125
+ declare const Undo: React.FC<IconProps>;
126
+
127
+ declare const Redo: React.FC<IconProps>;
128
+
129
+ declare const Mail: React.FC<IconProps>;
130
+
131
+ declare const Chat: React.FC<IconProps>;
132
+
133
+ declare const Phone: React.FC<IconProps>;
134
+
135
+ declare const Video: React.FC<IconProps>;
136
+
137
+ declare const User: React.FC<IconProps>;
138
+
139
+ declare const Users: React.FC<IconProps>;
140
+
141
+ declare const ThumbsUp: React.FC<IconProps>;
142
+
143
+ declare const Send: React.FC<IconProps>;
144
+
145
+ declare const Reaction: React.FC<IconProps>;
146
+
147
+ declare const Mention: React.FC<IconProps>;
148
+
149
+ declare const Settings: React.FC<IconProps>;
150
+
151
+ declare const Sliders: React.FC<IconProps>;
152
+
153
+ declare const Lock: React.FC<IconProps>;
154
+
155
+ declare const Unlock: React.FC<IconProps>;
156
+
157
+ declare const Key: React.FC<IconProps>;
158
+
159
+ declare const Eye: React.FC<IconProps>;
160
+
161
+ declare const EyeOff: React.FC<IconProps>;
162
+
163
+ declare const Info: React.FC<IconProps>;
164
+
165
+ declare const Help: React.FC<IconProps>;
166
+
167
+ declare const Logout: React.FC<IconProps>;
168
+
169
+ declare const Folder: React.FC<IconProps>;
170
+
171
+ declare const Document: React.FC<IconProps>;
172
+
173
+ declare const Image: React.FC<IconProps>;
174
+
175
+ declare const Attachment: React.FC<IconProps>;
176
+
177
+ declare const Cloud: React.FC<IconProps>;
178
+
179
+ declare const Link: React.FC<IconProps>;
180
+
181
+ declare const Archive: React.FC<IconProps>;
182
+
183
+ declare const Tag: React.FC<IconProps>;
184
+
185
+ declare const Play: React.FC<IconProps>;
186
+
187
+ declare const Pause: React.FC<IconProps>;
188
+
189
+ declare const Stop: React.FC<IconProps>;
190
+
191
+ declare const FastForward: React.FC<IconProps>;
192
+
193
+ declare const Rewind: React.FC<IconProps>;
194
+
195
+ declare const Volume: React.FC<IconProps>;
196
+
197
+ declare const Mute: React.FC<IconProps>;
198
+
199
+ declare const Microphone: React.FC<IconProps>;
200
+
201
+ declare const Battery: React.FC<IconProps>;
202
+
203
+ declare const Bluetooth: React.FC<IconProps>;
204
+
205
+ declare const Location: React.FC<IconProps>;
206
+
207
+ declare const CloudSync: React.FC<IconProps>;
208
+
209
+ declare const Camera: React.FC<IconProps>;
210
+
211
+ declare const Brightness: React.FC<IconProps>;
212
+
47
213
  interface PathDefaults {
48
214
  defaultColor: string;
49
215
  defaultStrokeWidth: number;
@@ -67,4 +233,4 @@ declare function resolveStyle(props: StyleProps, defaults: PathDefaults): Resolv
67
233
 
68
234
  declare function getAnimDuration(speed?: AnimationSpeed): DurationSet;
69
235
 
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 };
236
+ export { Add, AlertCircle, AlertTriangle, Archive, ArrowDown, ArrowLeft, ArrowUp, Attachment, Back, Battery, Bell, BloodDrop, Bluetooth, Bookmark, Brain, Brightness, Calendar, Camera, Chat, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Close, Cloud, CloudSync, Copy, DNA, Document, Download, ECG, Edit, Eye, EyeOff, FastForward, Filter, Flag, Folder, Forward, Globe, Grid, Heart, HeartRate, Help, Home, Image, Info, KebabMenu, Key, Link, Loader, Location, Lock, Logout, Lungs, Mail, Medkit, Mention, Menu, Microphone, MoreHorizontal, Mute, Notification, Oxygen, Pause, Phone, Pill, Pin, Play, Pulse, Reaction, Redo, Refresh, Rewind, Save, Search, Send, Settings, Share, Sleep, Sliders, SortAsc, SortDesc, Star, Steps, Stop, Sync, Syringe, Tag, Thermometer, ThumbsUp, Trash, Undo, Unlock, Upload, User, Users, Video, Volume, Wifi, ZoomIn, ZoomOut, getAnimDuration, resolveStyle };