@libs-ui/icon-font

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

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:

// 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>

<!-- 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

<!-- 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

<!-- 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

<!-- 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)

<!-- 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

<!-- 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:

<!-- 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

<!-- 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:

<libs_ui-components-buttons-button
  [classIconLeft]="'libs-ui-icon-add before:text-[16px]'"
/>