Icon

Mọi app Tasco dùng một bộ icon: Tabler Icons qua package @tabler/icons-vue. Nét mảnh đều (stroke 2px), góc bo nhẹ, hợp với font Quicksand. @tasco/ui dùng bộ này cho toolbar của bảng và các drawer, app tạo từ CLI đã cài sẵn.

<script setup lang="ts">
import {
  IconDownload,
  IconFilter,
  IconHome,
  IconPlus,
  IconReload,
  IconSettings,
} from '@tabler/icons-vue'
import { CTooltip } from '@tasco/ui'

// Icon kèm nhãn nằm trong slot #icon (16px); nút chỉ có icon (18px) bắt buộc có aria-label và tooltip cùng nội dung.
const sizes = [12, 16, 18, 20, 24] as const
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
      <CButton variant="primary">
        <template #icon>
          <IconPlus :size="16" />
        </template>
        Thêm mới
      </CButton>
      <CButton variant="outline">
        <template #icon>
          <IconFilter :size="16" />
        </template>
        Lọc
      </CButton>
      <CTooltip title="Xuất dữ liệu">
        <CButton
          variant="text"
          aria-label="Xuất dữ liệu"
        >
          <template #icon>
            <IconDownload :size="18" />
          </template>
        </CButton>
      </CTooltip>
      <CTooltip title="Tải lại">
        <CButton
          variant="text"
          aria-label="Tải lại"
        >
          <template #icon>
            <IconReload :size="18" />
          </template>
        </CButton>
      </CTooltip>
      <CTooltip title="Thiết lập bảng">
        <CButton
          variant="text"
          aria-label="Thiết lập bảng"
        >
          <template #icon>
            <IconSettings :size="18" />
          </template>
        </CButton>
      </CTooltip>
    </div>

    <div style="display: flex; align-items: flex-end; gap: 24px; color: var(--tasco-color-text-secondary)">
      <div
        v-for="size in sizes"
        :key="size"
        style="display: flex; flex-direction: column; align-items: center; gap: 4px"
      >
        <IconHome :size="size" />
        <small>{{ size }}px</small>
      </div>
    </div>
  </div>
</template>

Dùng trong code

<script setup lang="ts">
import { IconPlus } from '@tabler/icons-vue'
</script>

<template>
  <CButton variant="primary">
    <template #icon>
      <IconPlus :size="16" />
    </template>
    Thêm mới
  </CButton>
</template>

• Import theo tên (IconPlus, IconTrash…) — bundler chỉ giữ icon thật sự dùng.
• Tên icon tra ở tabler.io/icons, đổi sang PascalCase và thêm tiền tố Icon: trash → IconTrash, arrow-up → IconArrowUp.
• Icon trong menu là render function: icon: () => h(IconHome, { size: 18 }) — xem app.config › tasco.

Cỡ

Cỡ	Dùng cho
12px	Nút nhỏ bên trong nhãn (✕ của CTag)
16px	Icon đi kèm chữ: trong nút, trong ô nhập, trong danh sách
18px	Nút chỉ có icon trên toolbar; icon menu sidebar
20px	Nút chỉ có icon trên header của khung app
24px trở lên	Minh hoạ trạng thái (rỗng, lỗi)

Giữ stroke mặc định 2px. Không phóng to icon để làm điểm nhấn — dùng màu hoặc vị trí.

Màu

Icon lấy màu chữ của phần tử cha (currentColor), nên tự đổi theo chế độ tối và theo trạng thái hover, disabled của nút. Muốn đổi màu thì đặt color bằng token cho phần tử cha — không truyền mã màu vào prop color của icon.

<span style="color: var(--tasco-color-success-text)">
  <IconCircleCheck :size="16" /> Đã duyệt
</span>

Icon theo hành động

Cùng hành động thì cùng icon trong mọi app. Nhóm đang dùng là icon component của core đã dùng — giữ nguyên khi làm màn hình mới. Nhóm khuyến nghị chưa có trong component nhưng nên dùng thống nhất.

Hành động	Icon	Nhóm
Thêm mới	IconPlus	Đang dùng (CTable)
Tìm kiếm	IconSearch	Đang dùng
Lọc	IconFilter	Đang dùng
Xuất dữ liệu	IconDownload	Đang dùng
Tải lại	IconReload	Đang dùng
Thiết lập	IconSettings	Đang dùng
Kéo để sắp xếp	IconGripVertical	Đang dùng
Chuyển lên / xuống	IconArrowUp / IconArrowDown	Đang dùng
Đóng, bỏ	IconX	Đang dùng (CTag)
Trang chủ	IconHome	Đang dùng (template CLI)
Sửa	IconPencil	Khuyến nghị
Xoá	IconTrash	Khuyến nghị
Xem chi tiết	IconEye	Khuyến nghị
Nhập từ file	IconUpload	Khuyến nghị
In	IconPrinter	Khuyến nghị
Sao chép	IconCopy	Khuyến nghị
Thêm thao tác	IconDots	Khuyến nghị
Quay lại	IconArrowLeft	Khuyến nghị

Icon có cần chữ đi kèm không

• Có chữ là mặc định. Người dùng mới hiểu ngay, trình đọc màn hình đọc được nhãn.
• Chỉ icon khi hành động quen thuộc, lặp lại nhiều, chỗ hẹp — toolbar bảng, cột thao tác. Khi đó bắt buộc có aria-label và tooltip cùng nội dung.
• Không dùng icon cho hành động phá huỷ mà không có chữ, trừ trong cột thao tác đã có hộp thoại xác nhận.

Không nên

• Thêm bộ icon thứ hai (Font Awesome, Material, @ant-design/icons-vue) — hai phong cách nét vẽ trên cùng màn hình.
• Dùng emoji thay icon.
• Tự vẽ SVG cho thứ đã có trong Tabler. SVG riêng chỉ cho logo và hình minh hoạ.
• Dùng một icon cho hai hành động khác nhau, hoặc hai icon cho cùng một hành động.

Liên quan

• CButton — slot #icon, nút chỉ có icon.
• Khả năng tiếp cận — nhãn cho nút chỉ có icon.
• Câu chữ — nhãn đi kèm icon.