@vuonweb/react-native 0.1.0 → 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.
- package/README.md +73 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @vuonweb/react-native
|
|
2
|
+
|
|
3
|
+
Icon components cho React Native (dựa trên [`react-native-svg`](https://github.com/software-mansion/react-native-svg)),
|
|
4
|
+
sinh tự động từ bộ SVG nguồn của [icon-builder](https://github.com/vuon-web/icon-builder).
|
|
5
|
+
|
|
6
|
+
## Cài đặt
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @vuonweb/react-native react-native-svg
|
|
10
|
+
# hoặc: pnpm add / yarn add
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Yêu cầu `react >= 18` và `react-native-svg >= 13` (peer dependencies). Nếu dùng Expo, cài qua
|
|
14
|
+
`npx expo install react-native-svg` để đảm bảo đúng version tương thích.
|
|
15
|
+
|
|
16
|
+
## Sử dụng
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { Home, Search, User } from "@vuonweb/react-native";
|
|
20
|
+
|
|
21
|
+
function Screen() {
|
|
22
|
+
return (
|
|
23
|
+
<View>
|
|
24
|
+
<Home />
|
|
25
|
+
<Search size={20} color="#2563eb" />
|
|
26
|
+
<User strokeWidth={1.5} />
|
|
27
|
+
</View>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Mỗi icon nhận `ref` tới component `Svg` gốc (`React.forwardRef`) và toàn bộ props của
|
|
33
|
+
`react-native-svg`'s `SvgProps` (`onPress` qua wrapper cha, `opacity`, `style`, ...).
|
|
34
|
+
|
|
35
|
+
## Props
|
|
36
|
+
|
|
37
|
+
| Prop | Type | Default | Mô tả |
|
|
38
|
+
| ------------- | -------- | ------------- | ------------------------------------------------- |
|
|
39
|
+
| `size` | `number` | `24` | Chiều rộng/cao (px), set cả `width` và `height`. |
|
|
40
|
+
| `color` | `string` | `currentColor`| Set cả `fill` và `stroke`; xem cách style bên dưới.|
|
|
41
|
+
| `strokeWidth` | `number` | `2` | Độ dày nét vẽ (chỉ có tác dụng với icon outline). |
|
|
42
|
+
|
|
43
|
+
`currentColor` không có ý nghĩa đặc biệt trong React Native (khác với web) — nếu không truyền
|
|
44
|
+
`color`, icon sẽ nhận literal string `"currentColor"` từ `react-native-svg`, thường render ra màu
|
|
45
|
+
đen mặc định. Nên truyền `color` tường minh khi cần theo theme.
|
|
46
|
+
|
|
47
|
+
### Cách `color` hoạt động theo style icon
|
|
48
|
+
|
|
49
|
+
- **Outline** (vd. `Home`, `Search`, `User`, `Trashed`): chỉ nét vẽ (`stroke`) phản ứng với `color`,
|
|
50
|
+
bên trong rỗng (`fill="none"`).
|
|
51
|
+
- **Solid** (hậu tố `Solid`, vd. `HomeSolid`): chỉ phần tô (`fill`) phản ứng với `color`, không có
|
|
52
|
+
nét vẽ (`stroke="none"`).
|
|
53
|
+
|
|
54
|
+
## Icon có sẵn
|
|
55
|
+
|
|
56
|
+
Naming: `icons/outline/<name>.svg` → PascalCase (`Home`), `icons/solid/<name>.svg` → PascalCase +
|
|
57
|
+
hậu tố `Solid` (`HomeSolid`).
|
|
58
|
+
|
|
59
|
+
- `Home`
|
|
60
|
+
- `HomeSolid`
|
|
61
|
+
- `Search`
|
|
62
|
+
- `Trashed`
|
|
63
|
+
- `User`
|
|
64
|
+
|
|
65
|
+
## Xem thêm
|
|
66
|
+
|
|
67
|
+
- Component tương ứng cho React (web): [`@vuonweb/react`](https://www.npmjs.com/package/@vuonweb/react)
|
|
68
|
+
- Vue: [`@vuonweb/vue`](https://www.npmjs.com/package/@vuonweb/vue)
|
|
69
|
+
- Svelte: [`@vuonweb/svelte`](https://www.npmjs.com/package/@vuonweb/svelte)
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT
|