storybook

iconography

hệ thống icon chia 2 bộ với 2 vai trò: lucide (line stroke, 2px) cho navigation & feature; ibm carbon (shape fill, glyph 16px) cho data, action & status. icon nằm trong box — box xác định vùng bấm và căn chỉnh.

lucide — line stroke

stroke-based icons, 2px stroke width. dùng cho navigation (menu, tab, breadcrumb) và feature (search, filter, export). icon lấp đầy box.

so sánh kích thước
search
settings
user
home
menu
chevron
plus
trash
edit
file-text
download
upload
eye
lock
bell
logout

carbon — shape fill

fill-based icons từ IBM Carbon. dùng cho data (metric, indicator), action (add, edit, delete), và status (success, warning, error). glyph 16px luôn căn giữa trong box.

so sánh kích thước
add
checkmark
close
information
warning
star
favorite

kích thước box

box là vùng chứa icon. bốn kích thước dùng chung cho cả 2 bộ.

--size-icon-sm box 20px — lucide 20px, carbon 16px
--size-icon-md box 24px — lucide 24px, carbon 16px
--size-icon-lg box 32px — lucide 32px, carbon 16px
--size-icon-xl box 40px — lucide 40px, carbon 16px

cách dùng trong astro

import trực tiếp component Icon hoặc IconFill và icon từ package. dùng trong file .astro hoặc react component.

---
import { Icon } from '@1thay/core';
import { Search } from 'lucide-react';
import { AddFilled } from '@carbon/icons-react';
---

<!-- trong template astro -->
<Icon size="md"><Search /></Icon>
<IconFill size="sm"><AddFilled /></IconFill>

nhúng từ storybook

dùng component StoryEmbed để nhúng bộ icon từ storybook qua iframe. phù hợp khi muốn hiển thị interactive demo hoặc so sánh trực quan với storybook controls.

---
import StoryEmbed from '@1thay/core/components/StoryEmbed.astro';
---

<StoryEmbed
  storyId="components-icon--lucide-set"
  height="300px"
  title="bộ lucide — storybook"
/>
lucide set — nhúng từ storybook
carbon set — nhúng từ storybook

cập nhật bộ icon

lucide

  1. kiểm tra phiên bản: npm list lucide-react
  2. xem changelog tại lucide.dev
  3. cập nhật: npm install lucide-react@latest
  4. typescript sẽ báo lỗi nếu icon bị đổi tên — sửa import cho khớp
  5. verify: npm run build-storybook

ibm carbon

  1. kiểm tra phiên bản: npm list @carbon/icons-react
  2. xem changelog tại carbondesignsystem.com
  3. cập nhật: npm install @carbon/icons-react@latest
  4. carbon dùng suffix Filled cho shape fill — kiểm tra tên import
  5. verify: npm run build-storybook