@vuonweb/icon-builder

CLI sinh icon component (React / React Native / Vue / Svelte) từ SVG nguồn, dùng để phát triển icon-builder.

Lưu ý quan trọng: CLI này được viết để chạy bên trong repo icon-builder — nó đọc SVG từ thư mục icons/ và ghi component đã generate vào các đường dẫn cố định (packages/react/src, packages/react-native/src, packages/vue/src, packages/svelte/src) tương đối theo thư mục đang đứng khi chạy lệnh (process.cwd()). Đây không phải công cụ 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, hãy cài package tương ứng với framework của bạn thay vì package này:

• @vuonweb/react
• @vuonweb/react-native
• @vuonweb/vue
• @vuonweb/svelte

Dùng để làm gì

Nếu bạn đang đóng góp icon mới cho repo icon-builder (clone repo, thêm SVG vào icons/outline/ hoặc icons/solid/), CLI này là bước generate ra component cho cả 4 framework.

Cài đặt (trong repo icon-builder)

CLI đã là một package trong workspace, không cần cài riêng — chạy qua script ở root:

pnpm icons:build   # đọc icons/, validate, optimize (SVGO), generate component cho cả 4 target
pnpm icons:watch   # theo dõi icons/ và tự rebuild khi thêm/sửa/xoá SVG
pnpm icons:clean   # xoá toàn bộ file generated (giữ lại Icon.tsx/.vue/.svelte viết tay)

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 icon-builder đã clone, vì đường dẫn output là cố định):

npx @vuonweb/icon-builder build
npx @vuonweb/icon-builder watch
npx @vuonweb/icon-builder clean

Quy ước icon nguồn

• SVG đặt tại icons/<style>/<name>.svg, style là outline hoặc solid.
• Tên file dùng kebab-case (arrow-left.svg); sinh ra component tên PascalCase (ArrowLeft), thêm hậu tố theo style không phải outline (vd. arrow-left.svg trong icons/solid/ → ArrowLeftSolid).
• SVG phải có viewBox, không chứa <script>; width/height/style cố định sẽ bị SVGO loại bỏ tự động ở bước optimize.

License

MIT