@animicons/react-native 0.2.1 → 0.2.2
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/README.md +26 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
# @animicons
|
|
1
|
+
# @animicons/react-native
|
|
2
2
|
|
|
3
|
-
Animated SVG icon library for React
|
|
3
|
+
Animated SVG icon library for React Native. 60fps animations powered by `react-native-reanimated`. Full colour customisation. Tree-shakeable.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Preview
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
+
plugins: ['react-native-reanimated/plugin']
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Expo:
|
|
25
|
+
```bash
|
|
26
|
+
npx expo install react-native-svg react-native-reanimated
|
|
27
|
+
```
|
|
11
28
|
|
|
12
29
|
## Usage
|
|
13
30
|
|
|
14
31
|
```tsx
|
|
15
|
-
|
|
16
|
-
import { ECG, Brain, Loader } from '@animicons/react'
|
|
17
|
-
|
|
18
|
-
// React Native
|
|
19
|
-
import { ECG, Brain, Loader } from '@animicons/react-native'
|
|
32
|
+
import { ECG, Brain, Loader, Bell, Heart } from '@animicons/react-native'
|
|
20
33
|
|
|
21
34
|
// Auto-plays, loops forever
|
|
22
35
|
<ECG size={48} color="#f43f5e" />
|
|
@@ -39,7 +52,7 @@ import { ECG, Brain, Loader } from '@animicons/react-native'
|
|
|
39
52
|
|
|
40
53
|
| Prop | Type | Default | Description |
|
|
41
54
|
|------|------|---------|-------------|
|
|
42
|
-
| `size` | `number` | `48` | Width and height in dp
|
|
55
|
+
| `size` | `number` | `48` | Width and height in dp |
|
|
43
56
|
| `color` | `string` | icon default | Primary shorthand — sets stroke + fill |
|
|
44
57
|
| `strokeColor` | `string` | `color` | Explicit stroke override |
|
|
45
58
|
| `fillColor` | `string` | `color` | Explicit fill override |
|
|
@@ -60,29 +73,6 @@ import { ECG, Brain, Loader } from '@animicons/react-native'
|
|
|
60
73
|
### Healthcare
|
|
61
74
|
`ECG` `HeartRate` `Lungs` `Pill` `Thermometer` `DNA` `Syringe` `Brain` `BloodDrop` `Steps` `Sleep` `Oxygen` `Medkit`
|
|
62
75
|
|
|
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
76
|
## License
|
|
87
77
|
|
|
88
78
|
MIT
|