import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/scripts/bin/dxt-flags - Trình tạo Sprite cờ'/>

# dxt-flags

Lệnh `dxt-flags` cung cấp một tiện ích tự động để biên dịch một thư mục chứa các biểu tượng cờ SVG thành một ảnh sprite WebP duy nhất được tối ưu hóa và tạo bảng kiểu dáng CSS ánh xạ vị trí tương ứng. Lệnh này sử dụng lớp `DesignFlags` để xử lý hiển thị dựa trên canvas và tính toán lưới.

> **Lưu ý**: Tập lệnh này chỉ dành riêng cho việc sử dụng nội bộ bên trong kho lưu trữ dự án `dxt-ui`.

## Các tính năng chính

- **Tự động Đóng gói Sprite**: Kết hợp nhiều tệp SVG riêng lệ thành một tấm sprite WebP duy nhất có hiệu suất cao.
- **Ánh xạ Vị trí Động**: Tự động tính toán các tọa độ chính xác dựa trên phần trăm và tạo một bảng kiểu dáng CSS với các lớp định vị tiện ích.
- **Thu phóng High-DPI**: Hiển thị cờ bằng cách sử dụng các thư viện canvas hiệu suất cao với hệ số tỷ lệ 2x để đạt được độ sắc nét tối ưu.

## Nó hoạt động như thế nào?

Quy trình tạo sinh cờ tự động hóa việc lắp ráp sprite và các phong cách tiện ích:

1. Tập lệnh quét thư mục biểu tượng cờ mặc định để tìm tất cả các tệp `.svg`.
2. Nó khởi tạo một canvas trống bằng các công cụ hiển thị hiệu suất cao, tính toán các cột và hàng lưới dựa trên số lượng cờ.
3. Nó lặp qua các tệp SVG được phát hiện, tải từng tệp vào bộ nhớ và vẽ chúng vào các vị trí lưới đã tính toán trong khi vẫn bảo toàn khoảng cách và tỷ lệ layout.
4. Nó ghi lại tọa độ và tên của mọi lá cờ để xây dựng các bản ghi ánh xạ vị trí.
5. Nó xuất bộ đệm canvas đã kết hợp thành một tệp hình ảnh sprite `.webp` và ghi tệp bảng kiểu dáng tiện ích chứa các ánh xạ vị trí nền CSS.

## Cách thiết lập và khởi chạy

Không yêu cầu thiết lập phức tạp để chạy trình tạo sprite cờ. Chỉ cần đặt các biểu tượng cờ SVG của bạn vào thư mục tiêu chuẩn `src/assets/flags`.

Để kích hoạt biên dịch sprite và bảng kiểu dáng, hãy thực thi:
```bash
npx dxt-flags
```

## Cấu trúc tệp được tạo sinh

Sau khi thực thi thành công, công cụ sẽ xuất các tài nguyên đã biên dịch trực tiếp đến các đường dẫn không gian làm việc được cấu hình:

- `src/assets/flags.webp`: Hình ảnh sprite kết hợp High-DPI đã biên dịch chứa tất cả các biểu tượng cờ.
- `src/styles/flags.css`: Bảng kiểu dáng CSS được tạo sinh ánh xạ từng lớp sửa đổi cờ riêng lẻ (ví dụ: `.ui-sys-flags--vn`) tới phần trăm vị trí nền chính xác của nó.
