@vuonweb/vue 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 +70 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @vuonweb/vue
|
|
2
|
+
|
|
3
|
+
Icon components cho Vue 3, 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/vue
|
|
9
|
+
# hoặc: pnpm add @vuonweb/vue / yarn add @vuonweb/vue
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Yêu cầu `vue >= 3.3` (peer dependency).
|
|
13
|
+
|
|
14
|
+
> **Lưu ý:** package này phân phối dưới dạng **`.vue` SFC source chưa compile** (không có bước
|
|
15
|
+
> bundle riêng) — bundler của app tiêu thụ (Vite, Vue CLI, Nuxt, ...) sẽ compile trực tiếp. Cần
|
|
16
|
+
> project đã có sẵn cấu hình build cho file `.vue` (mặc định khi dùng `create-vue`/Vite + plugin
|
|
17
|
+
> Vue); không dùng được qua thẻ `<script>` trực tiếp trên trình duyệt không qua build step.
|
|
18
|
+
|
|
19
|
+
## Sử dụng
|
|
20
|
+
|
|
21
|
+
```vue
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import { Home, Search, User } from "@vuonweb/vue";
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<Home />
|
|
28
|
+
<Search :size="20" color="#2563eb" />
|
|
29
|
+
<User :stroke-width="1.5" class="text-gray-500" />
|
|
30
|
+
</template>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Mọi attribute không khai báo là prop (`class`, `style`, `@click`, ...) tự động fallthrough xuống
|
|
34
|
+
`<svg>` gốc nhờ cơ chế `$attrs` mặc định của Vue 3 — không cần khai báo thêm gì.
|
|
35
|
+
|
|
36
|
+
## Props
|
|
37
|
+
|
|
38
|
+
| Prop | Type | Default | Mô tả |
|
|
39
|
+
| ------------- | -------- | ------------- | ------------------------------------------------- |
|
|
40
|
+
| `size` | `number` | `24` | Chiều rộng/cao (px), set cả `width` và `height`. |
|
|
41
|
+
| `color` | `string` | `currentColor`| Set cả `fill` và `stroke`; xem cách style bên dưới.|
|
|
42
|
+
| `strokeWidth` | `number` | `2` | Độ dày nét vẽ (chỉ có tác dụng với icon outline). |
|
|
43
|
+
|
|
44
|
+
### Cách `color` hoạt động theo style icon
|
|
45
|
+
|
|
46
|
+
- **Outline** (vd. `Home`, `Search`, `User`, `Trashed`): chỉ nét vẽ (`stroke`) phản ứng với `color`,
|
|
47
|
+
bên trong rỗng (`fill="none"`).
|
|
48
|
+
- **Solid** (hậu tố `Solid`, vd. `HomeSolid`): chỉ phần tô (`fill`) phản ứng với `color`, không có
|
|
49
|
+
nét vẽ (`stroke="none"`).
|
|
50
|
+
|
|
51
|
+
## Icon có sẵn
|
|
52
|
+
|
|
53
|
+
Naming: `icons/outline/<name>.svg` → PascalCase (`Home`), `icons/solid/<name>.svg` → PascalCase +
|
|
54
|
+
hậu tố `Solid` (`HomeSolid`).
|
|
55
|
+
|
|
56
|
+
- `Home`
|
|
57
|
+
- `HomeSolid`
|
|
58
|
+
- `Search`
|
|
59
|
+
- `Trashed`
|
|
60
|
+
- `User`
|
|
61
|
+
|
|
62
|
+
## Xem thêm
|
|
63
|
+
|
|
64
|
+
- React: [`@vuonweb/react`](https://www.npmjs.com/package/@vuonweb/react)
|
|
65
|
+
- React Native: [`@vuonweb/react-native`](https://www.npmjs.com/package/@vuonweb/react-native)
|
|
66
|
+
- Svelte: [`@vuonweb/svelte`](https://www.npmjs.com/package/@vuonweb/svelte)
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
MIT
|