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