@vuonweb/icon-builder 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 +53 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# @vuonweb/icon-builder
|
|
2
|
+
|
|
3
|
+
CLI sinh icon component (React / React Native / Vue / Svelte) từ SVG nguồn, dùng để phát triển
|
|
4
|
+
[icon-builder](https://github.com/vuon-web/icon-builder).
|
|
5
|
+
|
|
6
|
+
> **Lưu ý quan trọng:** CLI này được viết để chạy **bên trong repo `icon-builder`** — nó đọc SVG từ
|
|
7
|
+
> thư mục `icons/` và ghi component đã generate vào các đường dẫn cố định
|
|
8
|
+
> (`packages/react/src`, `packages/react-native/src`, `packages/vue/src`, `packages/svelte/src`)
|
|
9
|
+
> **tương đối theo thư mục đang đứng khi chạy lệnh** (`process.cwd()`). Đây không phải công cụ
|
|
10
|
+
> generic để bạn trỏ vào bộ SVG tuỳ ý trong project riêng — nếu bạn chỉ muốn *dùng* icon có sẵn,
|
|
11
|
+
> hãy cài package tương ứng với framework của bạn thay vì package này:
|
|
12
|
+
>
|
|
13
|
+
> - [`@vuonweb/react`](https://www.npmjs.com/package/@vuonweb/react)
|
|
14
|
+
> - [`@vuonweb/react-native`](https://www.npmjs.com/package/@vuonweb/react-native)
|
|
15
|
+
> - [`@vuonweb/vue`](https://www.npmjs.com/package/@vuonweb/vue)
|
|
16
|
+
> - [`@vuonweb/svelte`](https://www.npmjs.com/package/@vuonweb/svelte)
|
|
17
|
+
|
|
18
|
+
## Dùng để làm gì
|
|
19
|
+
|
|
20
|
+
Nếu bạn đang đóng góp icon mới cho repo `icon-builder` (clone repo, thêm SVG vào `icons/outline/`
|
|
21
|
+
hoặc `icons/solid/`), CLI này là bước generate ra component cho cả 4 framework.
|
|
22
|
+
|
|
23
|
+
## Cài đặt (trong repo icon-builder)
|
|
24
|
+
|
|
25
|
+
CLI đã là một package trong workspace, không cần cài riêng — chạy qua script ở root:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
pnpm icons:build # đọc icons/, validate, optimize (SVGO), generate component cho cả 4 target
|
|
29
|
+
pnpm icons:watch # theo dõi icons/ và tự rebuild khi thêm/sửa/xoá SVG
|
|
30
|
+
pnpm icons:clean # xoá toàn bộ file generated (giữ lại Icon.tsx/.vue/.svelte viết tay)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Hoặc chạy trực tiếp qua `npx` nếu đã cài global/qua `dlx` (vẫn cần đứng ở thư mục gốc repo
|
|
34
|
+
`icon-builder` đã clone, vì đường dẫn output là cố định):
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx @vuonweb/icon-builder build
|
|
38
|
+
npx @vuonweb/icon-builder watch
|
|
39
|
+
npx @vuonweb/icon-builder clean
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Quy ước icon nguồn
|
|
43
|
+
|
|
44
|
+
- SVG đặt tại `icons/<style>/<name>.svg`, `style` là `outline` hoặc `solid`.
|
|
45
|
+
- Tên file dùng kebab-case (`arrow-left.svg`); sinh ra component tên PascalCase (`ArrowLeft`),
|
|
46
|
+
thêm hậu tố theo style không phải `outline` (vd. `arrow-left.svg` trong `icons/solid/` →
|
|
47
|
+
`ArrowLeftSolid`).
|
|
48
|
+
- SVG phải có `viewBox`, không chứa `<script>`; `width`/`height`/`style` cố định sẽ bị SVGO loại bỏ
|
|
49
|
+
tự động ở bước optimize.
|
|
50
|
+
|
|
51
|
+
## License
|
|
52
|
+
|
|
53
|
+
MIT
|