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