@libs-ui/icon-font 0.2.356-8 → 0.2.357-0

package/README.md

@@ -1,3 +1,380 @@
-# icon-font
+# @libs-ui/icon-font
 
-This library was generated with [Nx](https://nx.dev).
+> Bộ icon font nội bộ của libs-ui với 114 icon được thiết kế riêng cho hệ thống Mobio.
+
+## Giới thiệu
+
+`@libs-ui/icon-font` cung cấp bộ icon font tùy chỉnh dưới dạng CSS class, cho phép sử dụng trực tiếp trên bất kỳ thẻ HTML nào mà không cần import component Angular. Icon được render thông qua pseudo-element `::before`, hỗ trợ kiểm soát kích thước và màu sắc bằng Tailwind hoặc CSS thuần.
+
+## Tính năng
+
+- ✅ 114 icon được thiết kế riêng theo design system Mobio
+- ✅ Sử dụng đơn giản bằng CSS class (`libs-ui-icon-*`)
+- ✅ Kiểm soát kích thước qua `font-size` hoặc Tailwind (`text-[18px]`)
+- ✅ Kiểm soát màu sắc qua `color` hoặc Tailwind (`text-blue-500`)
+- ✅ Render qua pseudo-element `::before` — không ảnh hưởng DOM structure
+- ✅ Font format đa dạng: EOT, TTF, WOFF, SVG — tương thích mọi trình duyệt
+- ✅ Tích hợp sẵn với các component libs-ui (Button, Label, Notification…)
+
+## Khi nào sử dụng
+
+- Hiển thị icon trong nút bấm, menu, badge, label, tiêu đề section
+- Kết hợp với các component libs-ui qua prop `classIconLeft`, `classIconRight`
+- Thay thế SVG inline khi cần icon đơn giản, nhẹ hơn
+- Hiển thị icon trạng thái (success, warning, error, info) trong notification
+- Các icon thao tác phổ biến: thêm, sửa, xóa, tìm kiếm, tải xuống, copy
+
+## Cài đặt
+
+```bash
+npm install @libs-ui/icon-font
+```
+
+## Import CSS
+
+Icon font **không có Angular component** — chỉ cần import file CSS một lần vào `styles.scss` của ứng dụng:
+
+```scss
+// styles.scss (app root)
+@import '@libs-ui/icon-font/assets/style.css';
+```
+
+Sau đó dùng class trực tiếp trong HTML mà không cần import thêm gì vào component.
+
+## Ví dụ sử dụng
+
+### Ví dụ 1 — Icon cơ bản trên thẻ `<i>` hoặc `<span>`
+
+```html
+<!-- Icon thêm mới -->
+<i class="libs-ui-icon-add text-[20px] text-blue-500"></i>
+
+<!-- Icon tìm kiếm -->
+<span class="libs-ui-icon-search text-[16px] text-gray-500"></span>
+
+<!-- Icon đóng -->
+<i class="libs-ui-icon-close text-[14px]"></i>
+```
+
+### Ví dụ 2 — Icon kết hợp với nút bấm
+
+```html
+<!-- Nút có icon bên trái -->
+<button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
+  <i class="libs-ui-icon-add text-[16px]"></i>
+  <span>Thêm mới</span>
+</button>
+
+<!-- Nút có icon bên phải -->
+<button class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded">
+  <span>Xem thêm</span>
+  <i class="libs-ui-icon-arrow-right text-[16px]"></i>
+</button>
+```
+
+### Ví dụ 3 — Kiểm soát kích thước với Tailwind
+
+```html
+<!-- Icon nhỏ (14px) -->
+<i class="libs-ui-icon-check text-[14px] text-green-500"></i>
+
+<!-- Icon trung bình (18px) -->
+<i class="libs-ui-icon-calendar text-[18px] text-gray-600"></i>
+
+<!-- Icon lớn (24px) -->
+<i class="libs-ui-icon-search text-[24px] text-blue-600"></i>
+
+<!-- Icon rất lớn (44px) — dùng cho hero section -->
+<div class="libs-ui-icon-search text-[44px] text-[#c0c6d0]"></div>
+```
+
+### Ví dụ 4 — Kết hợp với libs-ui Button component
+
+```html
+<!-- Icon trái -->
+<libs_ui-components-buttons-button
+  [type]="'button-primary'"
+  [label]="'Thêm mới'"
+  [classIconLeft]="'libs-ui-icon-add'"
+/>
+
+<!-- Icon phải -->
+<libs_ui-components-buttons-button
+  [type]="'button-default'"
+  [label]="'Tiếp theo'"
+  [classIconRight]="'libs-ui-icon-arrow-right'"
+/>
+
+<!-- Icon tải về -->
+<libs_ui-components-buttons-button
+  [type]="'button-default'"
+  [label]="'Tải xuống'"
+  [classIconLeft]="'libs-ui-icon-download-outline'"
+/>
+```
+
+### Ví dụ 5 — Icon trạng thái (notification, alert)
+
+```html
+<!-- Thành công -->
+<span class="libs-ui-icon-check-circle-solid text-[18px] text-green-500"></span>
+
+<!-- Cảnh báo -->
+<span class="libs-ui-icon-alert-triangle-solid text-[18px] text-yellow-500"></span>
+
+<!-- Lỗi -->
+<span class="libs-ui-icon-close-circle-solid text-[18px] text-red-500"></span>
+
+<!-- Thông tin -->
+<span class="libs-ui-icon-tooltip-solid text-[18px] text-blue-500"></span>
+```
+
+### Ví dụ 6 — Icon với màu sắc tùy chỉnh qua CSS variable
+
+```html
+<!-- Màu từ CSS variable -->
+<i class="libs-ui-icon-edit-line" style="color: var(--libs-ui-color-active)"></i>
+
+<!-- Màu từ Tailwind -->
+<i class="libs-ui-icon-lock text-[16px] text-gray-400"></i>
+```
+
+## Danh sách icon đầy đủ (114 icons)
+
+### Thao tác cơ bản
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-add` | Thêm mới (dấu +) |
+| `libs-ui-icon-close` | Đóng / Hủy |
+| `libs-ui-icon-check` | Xác nhận / Tick |
+| `libs-ui-icon-search` | Tìm kiếm |
+| `libs-ui-icon-edit-line` | Chỉnh sửa (đường viền) |
+| `libs-ui-icon-edit-solid` | Chỉnh sửa (solid) |
+| `libs-ui-icon-remove` | Xóa |
+| `libs-ui-icon-copy` | Sao chép |
+| `libs-ui-icon-refresh` | Làm mới |
+| `libs-ui-icon-reload` | Tải lại |
+
+### Điều hướng & Mũi tên
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-arrow-right` | Mũi tên phải |
+| `libs-ui-icon-chevron-right` | Chevron phải |
+| `libs-ui-icon-chevron-right-circle` | Chevron phải trong vòng tròn |
+| `libs-ui-icon-chevron-right-double` | Chevron phải đôi |
+| `libs-ui-icon-move-right` | Di chuyển phải |
+| `libs-ui-icon-login` | Đăng nhập (đường viền) |
+| `libs-ui-icon-login-solid` | Đăng nhập (solid) |
+| `libs-ui-icon-logout-outline` | Đăng xuất (đường viền) |
+| `libs-ui-icon-logout-solid` | Đăng xuất (solid) |
+
+### Trạng thái & Thông báo
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-check-circle-outline` | Thành công (đường viền) |
+| `libs-ui-icon-check-circle-solid` | Thành công (solid) |
+| `libs-ui-icon-check-double` | Xác nhận kép |
+| `libs-ui-icon-close-circle-outline` | Lỗi / Hủy (đường viền) |
+| `libs-ui-icon-close-circle-solid` | Lỗi / Hủy (solid) |
+| `libs-ui-icon-alert-triangle-outline` | Cảnh báo (đường viền) |
+| `libs-ui-icon-alert-triangle-solid` | Cảnh báo (solid) |
+| `libs-ui-icon-tooltip-outline` | Thông tin (đường viền) |
+| `libs-ui-icon-tooltip-solid` | Thông tin (solid) |
+| `libs-ui-icon-banned` | Bị chặn / Cấm |
+
+### File & Tải lên/xuống
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-file` | File |
+| `libs-ui-icon-file-upload` | Tải file lên |
+| `libs-ui-icon-upload-outline` | Tải lên (đường viền) |
+| `libs-ui-icon-upload-solid` | Tải lên (solid) |
+| `libs-ui-icon-download-outline` | Tải xuống (đường viền) |
+| `libs-ui-icon-download-solid` | Tải xuống (solid) |
+| `libs-ui-icon-attachment` | Tệp đính kèm |
+| `libs-ui-icon-link` | Liên kết |
+| `libs-ui-icon-link-broken` | Liên kết bị gãy |
+
+### Hiển thị & Mắt
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-eye-outline` | Xem (đường viền) |
+| `libs-ui-icon-eye-solid` | Xem (solid) |
+| `libs-ui-icon-eye-slash-outline` | Ẩn (đường viền) |
+| `libs-ui-icon-eye-slash-solid` | Ẩn (solid) |
+| `libs-ui-icon-fullscreen-open` | Mở toàn màn hình |
+| `libs-ui-icon-fullscreen-exit` | Thoát toàn màn hình |
+| `libs-ui-icon-zoom-in` | Phóng to |
+| `libs-ui-icon-zoom-out` | Thu nhỏ |
+
+### Trình soạn thảo (Editor)
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-editor-bold` | Chữ đậm |
+| `libs-ui-icon-editor-italic` | Chữ nghiêng |
+| `libs-ui-icon-editor-underlined` | Gạch chân |
+| `libs-ui-icon-editor-strike-through` | Gạch ngang |
+| `libs-ui-icon-editor-color-text` | Màu chữ |
+| `libs-ui-icon-editor-color-background` | Màu nền chữ |
+| `libs-ui-icon-align-left` | Căn trái |
+| `libs-ui-icon-align-center` | Căn giữa |
+| `libs-ui-icon-align-right` | Căn phải |
+| `libs-ui-icon-align-justify` | Căn đều |
+| `libs-ui-icon-indent-decrease` | Giảm thụt lề |
+| `libs-ui-icon-indent-increase` | Tăng thụt lề |
+| `libs-ui-icon-list-bulleted` | Danh sách chấm |
+| `libs-ui-icon-list-numbered` | Danh sách số |
+| `libs-ui-icon-quote` | Trích dẫn |
+| `libs-ui-icon-code-snippet` | Đoạn mã |
+| `libs-ui-icon-undo` | Hoàn tác |
+| `libs-ui-icon-redo` | Làm lại |
+| `libs-ui-icon-wrap` | Xuống dòng |
+| `libs-ui-icon-unwrap` | Bỏ xuống dòng |
+
+### Bảng & Ô (Table/Cell)
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-table` | Bảng |
+| `libs-ui-icon-row` | Hàng |
+| `libs-ui-icon-merge-cell` | Gộp ô |
+| `libs-ui-icon-split-cell` | Tách ô |
+| `libs-ui-icon-merge-column` | Gộp cột |
+
+### Form Controls
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-checkbox-selected` | Checkbox đã chọn |
+| `libs-ui-icon-checkbox-unselected` | Checkbox chưa chọn |
+| `libs-ui-icon-checkbox-indeterminate` | Checkbox trung gian |
+| `libs-ui-icon-radio-selected` | Radio đã chọn |
+| `libs-ui-icon-radio-unselected` | Radio chưa chọn |
+
+### Media & Âm thanh
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-play-solid` | Phát |
+| `libs-ui-icon-pause-solid` | Tạm dừng |
+| `libs-ui-icon-stop-solid` | Dừng |
+| `libs-ui-icon-speaker-on-outline` | Loa bật (đường viền) |
+| `libs-ui-icon-speaker-on-solid` | Loa bật (solid) |
+| `libs-ui-icon-speaker-off-outline` | Loa tắt (đường viền) |
+| `libs-ui-icon-speaker-off-solid` | Loa tắt (solid) |
+| `libs-ui-icon-video-outline` | Video |
+| `libs-ui-icon-image-solid` | Hình ảnh |
+| `libs-ui-icon-face-smile` | Biểu cảm / Emoji |
+
+### Chỉnh sửa ảnh (Image Editor)
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-customize-image-outline` | Tùy chỉnh ảnh |
+| `libs-ui-icon-rotate-image-outline` | Xoay ảnh |
+| `libs-ui-icon-flip-horizontal` | Lật ngang |
+| `libs-ui-icon-flip-vertical` | Lật dọc |
+| `libs-ui-icon-scale` | Tỷ lệ |
+| `libs-ui-icon-scale-horizon` | Tỷ lệ ngang |
+| `libs-ui-icon-scale-vertical` | Tỷ lệ dọc |
+
+### Tỷ lệ ảnh (Ratio)
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-ratio-1-1` | Tỷ lệ 1:1 |
+| `libs-ui-icon-ratio-16-9` | Tỷ lệ 16:9 |
+| `libs-ui-icon-ratio-9-16` | Tỷ lệ 9:16 |
+| `libs-ui-icon-ratio-4-3` | Tỷ lệ 4:3 |
+| `libs-ui-icon-ratio-3-4` | Tỷ lệ 3:4 |
+| `libs-ui-icon-ratio-3-2` | Tỷ lệ 3:2 |
+| `libs-ui-icon-ratio-2-3` | Tỷ lệ 2:3 |
+
+### Khác
+
+| Class | Mô tả |
+|---|---|
+| `libs-ui-icon-calendar` | Lịch |
+| `libs-ui-icon-clock` | Đồng hồ |
+| `libs-ui-icon-lock` | Khóa |
+| `libs-ui-icon-asterisk` | Dấu hoa thị |
+| `libs-ui-icon-more-vertical` | Thêm tùy chọn (dọc) |
+| `libs-ui-icon-arrange` | Sắp xếp |
+| `libs-ui-icon-calculation` | Tính toán |
+| `libs-ui-icon-divide` | Chia |
+| `libs-ui-icon-minus` | Trừ / Thu nhỏ |
+| `libs-ui-icon-pin-outline` | Ghim (đường viền) |
+| `libs-ui-icon-pin-solid` | Ghim (solid) |
+| `libs-ui-icon-send-solid` | Gửi |
+| `libs-ui-icon-new-conversation` | Cuộc trò chuyện mới |
+| `libs-ui-icon-task-list` | Danh sách nhiệm vụ |
+
+## Cách tùy chỉnh kích thước
+
+Icon font sử dụng `font-size` để kiểm soát kích thước. Có thể dùng Tailwind hoặc class `before:text-*` để override:
+
+```html
+<!-- Dùng Tailwind text-size (thay đổi toàn bộ element) -->
+<i class="libs-ui-icon-search text-[16px]"></i>
+<i class="libs-ui-icon-search text-[20px]"></i>
+<i class="libs-ui-icon-search text-[24px]"></i>
+
+<!-- Dùng before:text-* (chỉ thay đổi pseudo-element ::before) -->
+<span class="libs-ui-icon-eye-outline before:text-[18px]"></span>
+<span class="libs-ui-icon-file before:text-[18px] text-red-500"></span>
+```
+
+## Cách tùy chỉnh màu sắc
+
+```html
+<!-- Màu qua Tailwind -->
+<i class="libs-ui-icon-check-circle-solid text-green-500"></i>
+<i class="libs-ui-icon-alert-triangle-solid text-yellow-500"></i>
+<i class="libs-ui-icon-close-circle-solid text-red-500"></i>
+<i class="libs-ui-icon-tooltip-solid text-blue-500"></i>
+
+<!-- Màu qua CSS variable (theo design token libs-ui) -->
+<i class="libs-ui-icon-edit-line" style="color: var(--libs-ui-color-active)"></i>
+
+<!-- Kết hợp với hover -->
+<button class="group flex items-center gap-1">
+  <i class="libs-ui-icon-edit-line text-[16px] text-gray-500 group-hover:text-blue-500 transition-colors"></i>
+  <span>Chỉnh sửa</span>
+</button>
+```
+
+## Lưu ý quan trọng
+
+⚠️ **Chỉ import CSS một lần**: File `@libs-ui/icon-font/assets/style.css` chỉ cần import trong `styles.scss` toàn cục. Không import lại trong từng component.
+
+⚠️ **Không phải Angular Component**: Lib này không export Angular component hay directive — chỉ cung cấp CSS class. Không cần thêm vào `imports[]` của component.
+
+⚠️ **Kích thước mặc định**: Icon kế thừa `font-size` từ phần tử cha. Nên chỉ định rõ kích thước để tránh phụ thuộc vào cascade.
+
+⚠️ **Icon `libs-ui-icon-arrange`**: Icon này có màu `#9ca2ad` được hardcode trong CSS. Dùng thêm class màu để override nếu cần màu khác.
+
+⚠️ **Tương thích component**: Khi truyền icon cho các component libs-ui (Button, Label...) qua prop `classIconLeft`/`classIconRight`, truyền tên class đầy đủ kèm Tailwind modifier nếu cần:
+
+```html
+<libs_ui-components-buttons-button
+  [classIconLeft]="'libs-ui-icon-add before:text-[16px]'"
+/>
+```
+
+## Demo
+
+```bash
+npx nx serve core-ui
+```
+
+Xem icon được sử dụng trong các component tại các demo route:
+- `http://localhost:4500/buttons/button` — Button với icon
+- `http://localhost:4500/label` — Label với icon
+- `http://localhost:4500/dropdown` — Dropdown với icon tìm kiếm
+- `http://localhost:4500/preview-file` — Preview file với icon

package/assets/Read Me.txt

@@ -1,6 +1,6 @@
 Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
 
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs#install
 
 You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.