@solar-icons/react-native 1.0.0 → 1.0.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.
- package/README.md +41 -45
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @solar-icons/react-native
|
|
2
2
|
|
|
3
|
-
Solar Icons for React Native - A comprehensive icon library with
|
|
3
|
+
Solar Icons for React Native - A comprehensive icon library with 1246 icons in 6 styles.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- 🎨 **
|
|
7
|
+
- 🎨 **1246 Icons** across 37 categories
|
|
8
8
|
- 🎭 **6 Styles**: Bold, BoldDuotone, Broken, LineDuotone, Linear, Outline
|
|
9
9
|
- 📦 **Tree-shakeable** - Only bundle the icons you use
|
|
10
10
|
- 🔧 **TypeScript** - Full type safety
|
|
@@ -30,41 +30,41 @@ pnpm add @solar-icons/react-native react-native-svg
|
|
|
30
30
|
The recommended way to import icons for optimal tree-shaking:
|
|
31
31
|
|
|
32
32
|
```tsx
|
|
33
|
-
import { Home, User, Settings } from '@solar-icons/react-native/Bold'
|
|
34
|
-
import { Heart, Star } from '@solar-icons/react-native/Linear'
|
|
33
|
+
import { Home, User, Settings } from '@solar-icons/react-native/Bold'
|
|
34
|
+
import { Heart, Star } from '@solar-icons/react-native/Linear'
|
|
35
35
|
|
|
36
36
|
function App() {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
return (
|
|
38
|
+
<View>
|
|
39
|
+
<Home size={24} color="#000" />
|
|
40
|
+
<User size={32} color="#ff0000" />
|
|
41
|
+
<Heart size={40} color="currentColor" />
|
|
42
|
+
</View>
|
|
43
|
+
)
|
|
44
44
|
}
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
### Available Styles
|
|
48
48
|
|
|
49
49
|
```tsx
|
|
50
|
-
import { IconName } from '@solar-icons/react-native/Bold'
|
|
51
|
-
import { IconName } from '@solar-icons/react-native/BoldDuotone'
|
|
52
|
-
import { IconName } from '@solar-icons/react-native/Broken'
|
|
53
|
-
import { IconName } from '@solar-icons/react-native/LineDuotone'
|
|
54
|
-
import { IconName } from '@solar-icons/react-native/Linear'
|
|
55
|
-
import { IconName } from '@solar-icons/react-native/Outline'
|
|
50
|
+
import { IconName } from '@solar-icons/react-native/Bold'
|
|
51
|
+
import { IconName } from '@solar-icons/react-native/BoldDuotone'
|
|
52
|
+
import { IconName } from '@solar-icons/react-native/Broken'
|
|
53
|
+
import { IconName } from '@solar-icons/react-native/LineDuotone'
|
|
54
|
+
import { IconName } from '@solar-icons/react-native/Linear'
|
|
55
|
+
import { IconName } from '@solar-icons/react-native/Outline'
|
|
56
56
|
```
|
|
57
57
|
|
|
58
58
|
## Props
|
|
59
59
|
|
|
60
60
|
All icons accept the following props:
|
|
61
61
|
|
|
62
|
-
| Prop
|
|
63
|
-
|
|
64
|
-
| `size`
|
|
65
|
-
| `color`
|
|
66
|
-
| `mirrored` | `boolean` | `false`
|
|
67
|
-
| `alt`
|
|
62
|
+
| Prop | Type | Default | Description |
|
|
63
|
+
| ---------- | --------- | ---------------- | ----------------------------------------- |
|
|
64
|
+
| `size` | `number` | `24` | Icon size in pixels (width and height) |
|
|
65
|
+
| `color` | `string` | `'currentColor'` | Icon color (any valid React Native color) |
|
|
66
|
+
| `mirrored` | `boolean` | `false` | Mirror the icon horizontally |
|
|
67
|
+
| `alt` | `string` | `undefined` | Accessibility label |
|
|
68
68
|
|
|
69
69
|
Plus all props from `react-native-svg`'s `SvgProps` (except `width` and `height`).
|
|
70
70
|
|
|
@@ -73,48 +73,43 @@ Plus all props from `react-native-svg`'s `SvgProps` (except `width` and `height`
|
|
|
73
73
|
### Basic Usage
|
|
74
74
|
|
|
75
75
|
```tsx
|
|
76
|
-
import { Home } from '@solar-icons/react-native/Bold'
|
|
76
|
+
import { Home } from '@solar-icons/react-native/Bold'
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
;<Home /> // 24x24, currentColor
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
### Custom Size and Color
|
|
82
82
|
|
|
83
83
|
```tsx
|
|
84
|
-
import { User } from '@solar-icons/react-native/Linear'
|
|
84
|
+
import { User } from '@solar-icons/react-native/Linear'
|
|
85
85
|
|
|
86
|
-
|
|
86
|
+
;<User size={48} color="#ff0000" />
|
|
87
87
|
```
|
|
88
88
|
|
|
89
89
|
### Color Inheritance
|
|
90
90
|
|
|
91
91
|
```tsx
|
|
92
|
-
import { Heart } from '@solar-icons/react-native/Bold'
|
|
92
|
+
import { Heart } from '@solar-icons/react-native/Bold'
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
;<View style={{ color: '#00ff00' }}>
|
|
95
|
+
<Heart /> // Will be green
|
|
96
96
|
</View>
|
|
97
97
|
```
|
|
98
98
|
|
|
99
99
|
### Mirrored Icon
|
|
100
100
|
|
|
101
101
|
```tsx
|
|
102
|
-
import { ArrowRight } from '@solar-icons/react-native/Linear'
|
|
102
|
+
import { ArrowRight } from '@solar-icons/react-native/Linear'
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
;<ArrowRight mirrored size={32} />
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
### With Additional SVG Props
|
|
108
108
|
|
|
109
109
|
```tsx
|
|
110
|
-
import { Star } from '@solar-icons/react-native/Bold'
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
size={40}
|
|
114
|
-
color="#ffd700"
|
|
115
|
-
opacity={0.8}
|
|
116
|
-
style={{ marginTop: 10 }}
|
|
117
|
-
/>
|
|
110
|
+
import { Star } from '@solar-icons/react-native/Bold'
|
|
111
|
+
|
|
112
|
+
;<Star size={40} color="#ffd700" opacity={0.8} style={{ marginTop: 10 }} />
|
|
118
113
|
```
|
|
119
114
|
|
|
120
115
|
## Icon Categories
|
|
@@ -162,12 +157,12 @@ import { Star } from '@solar-icons/react-native/Bold';
|
|
|
162
157
|
Full TypeScript support with proper types:
|
|
163
158
|
|
|
164
159
|
```tsx
|
|
165
|
-
import type { IconProps } from '@solar-icons/react-native'
|
|
166
|
-
import { Home } from '@solar-icons/react-native/Bold'
|
|
160
|
+
import type { IconProps } from '@solar-icons/react-native'
|
|
161
|
+
import { Home } from '@solar-icons/react-native/Bold'
|
|
167
162
|
|
|
168
|
-
const MyIcon: React.FC<IconProps> =
|
|
169
|
-
|
|
170
|
-
}
|
|
163
|
+
const MyIcon: React.FC<IconProps> = props => {
|
|
164
|
+
return <Home {...props} />
|
|
165
|
+
}
|
|
171
166
|
```
|
|
172
167
|
|
|
173
168
|
## Requirements
|
|
@@ -186,6 +181,7 @@ MIT © [Saoudi Hakim](https://hakimsaoudi.dev)
|
|
|
186
181
|
- [@solar-icons/react-perf](https://www.npmjs.com/package/@solar-icons/react-perf) - Performance-optimized React icons
|
|
187
182
|
- [@solar-icons/vue](https://www.npmjs.com/package/@solar-icons/vue) - Solar Icons for Vue
|
|
188
183
|
- [@solar-icons/nuxt](https://www.npmjs.com/package/@solar-icons/nuxt) - Solar Icons for Nuxt
|
|
184
|
+
- [@solar-icons/svelte](https://www.npmjs.com/package/@solar-icons/svelte) - Solar Icons for Svelte
|
|
189
185
|
|
|
190
186
|
## Contributing
|
|
191
187
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solar-icons/react-native",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"react-native": "^0.83.1",
|
|
52
52
|
"react-native-svg": "^15.15.1",
|
|
53
53
|
"rimraf": "^6.1.2",
|
|
54
|
-
"tsdown": "^0.18.
|
|
54
|
+
"tsdown": "^0.18.4",
|
|
55
55
|
"tsx": "^4.21.0",
|
|
56
56
|
"typescript": "^5.9.3",
|
|
57
57
|
"@solar-icons/core": "1.0.1",
|