Icons
MSK의 기본 아이콘 기준은 단순합니다.
Policy
| 표면 | 기본 아이콘 |
|---|---|
| Filament 관리페이지 | Heroicons |
| 사용자 웹(public/member UI) | Lucide |
| MSK UI Kit 사용자-facing primitive | Lucide |
| 브랜드/서비스 로고 | 별도 브랜드 asset |
Why Lucide
Lucide는 선형 SVG 스타일이 단순하고, vanilla JavaScript/static asset 경로가 있으며, 사용하는 아이콘만 번들에 남기는 구성이 가능합니다. 공식 문서 기준 라이선스는 ISC이고 일부 Feather 유래 아이콘은 MIT 고지를 포함한다.
참고:
Usage Rules
- 관리페이지는 Filament 기본 흐름에 맞춰 Heroicons를 유지합니다.
- 사용자 웹 신규 UI는 Lucide를 우선 사용합니다.
- Blade/Laravel 화면에서는 Core UI Kit이 등록한
lucide-*SVG set을 우선 사용합니다. - 아이콘만 있는 버튼에는
aria-label을 제공합니다. - 장식용 아이콘은
aria-hidden="true"로 표시합니다. - 외부 CDN script나 전체 icon font CSS를 기본으로 추가하지 않습니다.
- Font Awesome, Tabler, Phosphor, Iconify 등은 프로젝트별 opt-in으로 보고 라이선스와 배포 크기를 확인합니다.
Blade Usage
Core UI Kit은 blade-icons가 설치된 프로젝트에서 Lucide SVG subset을 lucide prefix로 등록합니다.
@svg('lucide-log-in', 'size-4')
@svg('lucide-layout-dashboard', 'size-4')
@svg('lucide-chevron-right', 'size-4')
<x-lucide-log-in class="size-4" />
MSK 기본 배포는 Lucide 전체 팩을 포함하지 않습니다. Core는 로그인, 대시보드, 화살표, 상태, CRUD, 검색, 사용자 계열의 공통 subset만 제공합니다.
프로젝트 전용 아이콘이 필요하면 해당 프로젝트의 resources/icons/lucide에 필요한 SVG만 추가합니다. 동일한 이름이 있으면 프로젝트 경로가 Core subset보다 우선합니다.
JavaScript Usage
Vite/JS 중심 화면은 프로젝트가 필요할 때 Lucide JS 패키지를 opt-in으로 사용할 수 있습니다. 기본 원칙은 동일합니다: CDN이나 전체 icon font가 아니라 사용하는 아이콘만 포함합니다.
Current Status
MSK UI Kit의 아이콘 정책은 ADR-105로 확정되었고, Core UI Kit은 subset SVG set 방식으로 구현합니다.