@edmicro/olkit-icons

Thư viện icon chính thức cho Ôn Luyện Design System dành cho Angular (18+), cung cấp hơn 13.890+ icons vector tối ưu hóa cao từ 4 bộ sưu tập: Solar, Lucide, MynaUI và OLKit.

Tree-shaking 100% — chỉ đóng gói đúng các icon được sử dụng vào bundle sản phẩm (~2-3 KB/icon).

🌟 Tính năng nổi bật

• ⚡ Tree-shaking 100%: Import trực tiếp từng icon, bundle chỉ chứa những icon bạn thực sự dùng.
• 🎯 Cú pháp Shorthand hiện đại: Đăng ký cực nhanh với cú pháp object shorthand { solar_home_2_linear, lucide_search }.
• 🔄 Tương thích ngược 2 chiều: Hỗ trợ chuẩn mới snake_case (solar_home_2_linear) lẫn định dạng cũ colon:kebab-case (solar:home-2-linear).
• 🎨 Đổi màu & Kích thước linh hoạt: Mặc định dùng currentColor ăn theo CSS color của component cha, tương thích hoàn hảo Light/Dark Mode.
• 🗂️ 4 Bộ sưu tập phong phú: Hơn 13.800+ icons đáp ứng mọi nhu cầu giáo dục, quản trị và ứng dụng học tập.

📦 Cài đặt

# Cài đặt qua NPM
npm install @edmicro/olkit-icons

# Hoặc qua Yarn / Bun / PNPM
yarn add @edmicro/olkit-icons
bun add @edmicro/olkit-icons
pnpm add @edmicro/olkit-icons

🚀 Hướng dẫn sử dụng

Cách 1: Đăng ký tại Component (Khuyên dùng - Tối ưu Tree-shaking)

Đây là cách tốt nhất để đảm bảo mỗi trang chỉ tải đúng icon cần thiết:

import { Component } from '@angular/core';
import { OlIcon, provideOlIcons } from '@edmicro/olkit-icons';

// 1. Import các icon cần dùng từ từng collection
import { solar_home_2_linear, solar_user_bold } from '@edmicro/olkit-icons/solar';
import { lucide_search, lucide_check } from '@edmicro/olkit-icons/lucide';
import { olkit_widget } from '@edmicro/olkit-icons/olkit';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [OlIcon],
  providers: [
    // 2. Đăng ký qua provideOlIcons với cú pháp Shorthand
    provideOlIcons({
      solar_home_2_linear,
      solar_user_bold,
      lucide_search,
      lucide_check,
      olkit_widget,
    }),
  ],
  template: `
    <!-- Sử dụng theo chuẩn snake_case mới (khuyên dùng) -->
    <ol-icon name="solar_home_2_linear" size="base" class="text-brand" />
    <ol-icon name="lucide_search" [size]="20" />

    <!-- Hoặc định dạng colon:kebab-case (tương thích ngược) -->
    <ol-icon name="solar:home-2-linear" size="base" />

    <!-- Icon thuộc bộ OLKit có thể gọi trực tiếp tên trần -->
    <ol-icon name="widget" size="sm" />
  `,
})
export class DashboardComponent {}

Cách 2: Đăng ký Toàn cục (Global Application)

Nếu có các icon xuất hiện xuyên suốt ứng dụng (ví dụ: header, footer, sidebar navigation), bạn có thể đăng ký tại app.config.ts:

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideOlIcons } from '@edmicro/olkit-icons';
import { solar_home_2_linear, solar_bell_linear } from '@edmicro/olkit-icons/solar';
import { lucide_menu, lucide_search } from '@edmicro/olkit-icons/lucide';

export const appConfig: ApplicationConfig = {
  providers: [
    provideOlIcons({
      solar_home_2_linear,
      solar_bell_linear,
      lucide_menu,
      lucide_search,
    }),
  ],
};

Sau khi đăng ký tại appConfig, mọi component chỉ cần thêm imports: [OlIcon] là có thể sử dụng các icon này trong template mà không cần providers lại.

Cách 3: Đăng ký lúc chạy (Dynamic Registration)

Khi cần nạp thêm icon động sau khi ứng dụng đã khởi động:

import { Component, inject } from '@angular/core';
import { OlIcon, OlIconService } from '@edmicro/olkit-icons';
import { solar_chat_round_dots_bold } from '@edmicro/olkit-icons/solar';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [OlIcon],
  template: `<ol-icon name="solar_chat_round_dots_bold" />`,
})
export class ChatComponent {
  private iconService = inject(OlIconService);

  constructor() {
    this.iconService.register({ solar_chat_round_dots_bold });
  }
}

🗂️ 4 Collections & Entry Points

Thư viện chia thành 4 bộ sưu tập riêng biệt để import trực tiếp:

// 1. Solar Icons (8.930+ icons) — Đa dạng biến thể: linear, bold, broken, duotone
import { solar_home_2_linear, solar_user_bold } from '@edmicro/olkit-icons/solar';

// 2. Lucide Icons (1.847+ icons) — Đường nét mảnh, hiện đại, chuẩn 24x24
import { lucide_search, lucide_settings, lucide_arrow_right } from '@edmicro/olkit-icons/lucide';

// 3. MynaUI Icons (2.660+ icons) — Tối giản, thanh lịch
import { mynaui_user, mynaui_calendar } from '@edmicro/olkit-icons/mynaui';

// 4. OLKit Icons (450+ icons) — Logo Ôn Luyện, giáo dục, định dạng file (pdf, xlsx, docx, zip...)
import { olkit_onluyen_logo, olkit_widget, olkit_pdf } from '@edmicro/olkit-icons/olkit';

⚙️ Bảng thuộc tính Props của <ol-icon>

| Prop | Kiểu dữ liệu | Mặc định | Mô tả | | :--- | :--- | :--- | :--- | | name | string | (bắt buộc) | Tên icon: solar_home_2_linear, solar:home-2-linear, hoặc widget | | size | 'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| number | 'base' | Kích thước theo preset hoặc pixel số (ví dụ: [size]="24") | | color | 'current' \| 'brand' \| 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'white' \| 'muted' \| string | 'current' | Màu sắc ngữ cảnh hoặc kế thừa CSS | | variant | 'linear' \| 'bold' \| 'line-duotone' \| 'bold-duotone' \| 'broken' \| 'outline' | 'linear' | Biến thể nét vẽ của Solar icon | | strokeWidth| string \| number | null | Độ dày đường nét (nếu muốn can thiệp trực tiếp) |

Kích thước Preset:

• xs: 14px (14 × 14px)
• sm: 16px (16 × 16px)
• base: 20px (20 × 20px)
• lg: 24px (24 × 24px)
• xl: 28px (28 × 28px)
• 2xl: 32px (32 × 32px)
• 3xl: 40px (40 × 40px)
• Hoặc truyền số: [size]="48" (48 × 48px)

🏷️ Quy tắc đặt tên (Naming Convention)

1. Chuẩn mới: snake_case (Khuyên dùng)

Tên biến hằng số và tên truyền vào template đồng nhất:

import { solar_bell_linear } from '@edmicro/olkit-icons/solar';
// Template: <ol-icon name="solar_bell_linear" />

2. Chuẩn tương thích: colon:kebab-case

Hỗ trợ chuyển đổi tự động cho các dự án cũ:

<ol-icon name="solar:bell-linear" />
<ol-icon name="lucide:arrow-right" />
<ol-icon name="mynaui:user" />

3. Tên trần cho OLKit Collection:

Đối với các icon thuộc bộ sưu tập nội bộ olkit, bạn có thể bỏ tiền tố olkit_:

<ol-icon name="user-circle" />
<ol-icon name="widget" />
<ol-icon name="three-squares" />
<ol-icon name="code-file" />

🧩 Tích hợp với @edmicro/olkit

Thư viện @edmicro/olkit (bộ component UI) đã tự động tích hợp sẵn các Icon lõi (Core Icons) từ @edmicro/olkit-icons (như check, close, chevron-down, danger-circle, info-circle...):

# Cài đặt cả 2 packages cho dự án Angular của bạn
npm install @edmicro/olkit @edmicro/olkit-icons

📄 License & Bản quyền

Dự án phát hành theo giấy phép MIT License — Copyright © 2026 EDMICRO.

Các bộ icon bên thứ ba giữ nguyên bản quyền gốc:

• Solar Icons: Creative Commons Attribution 4.0 International (CC BY 4.0) by 480 Design.
• Lucide Icons: ISC License.
• MynaUI Icons: MIT License.