File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ComponentType } from 'react';
import {
FoxCalendarStarIcon,
FoxChartBarIcon,
FoxHouseIcon,
FoxIdentificationCardIcon,
FoxMedalIcon,
FoxNutIcon,
FoxPencilSimpleIcon,
FoxPhoneCallIcon,
FoxPottedPlantIcon,
FoxShieldCheckIcon,
FoxSquaresFourIcon,
FoxUserSquareIcon,
FoxUsersThreeIcon,
FoxWrenchIcon,
type FoxIconProps,
} from '@fox/core/icons';
/**
* 메뉴 아이콘 이름(백엔드가 주는 문자열) → @fox 아이콘 컴포넌트.
*
* 화이트리스트로 두는 이유 — @fox에는 아이콘이 1,512종 있고, 이름으로 동적 import를 하면
* 번들러가 무엇이 쓰일지 몰라 전부 싣게 된다. 여기 적힌 것만 번들에 들어간다.
*
* 목록은 시안 1depth가 쓰는 세트다. 백엔드가 새 이름을 보내면 여기에 한 줄 추가한다 —
* 모르는 이름이 와도 화면은 깨지지 않고 기본 아이콘으로 그려진다.
*/
const ICONS: Record<string, ComponentType<FoxIconProps>> = {
house: FoxHouseIcon,
'users-three': FoxUsersThreeIcon,
'user-square': FoxUserSquareIcon,
'potted-plant': FoxPottedPlantIcon,
'pencil-simple': FoxPencilSimpleIcon,
medal: FoxMedalIcon,
'identification-card': FoxIdentificationCardIcon,
'calendar-star': FoxCalendarStarIcon,
nut: FoxNutIcon,
'shield-check': FoxShieldCheckIcon,
'phone-call': FoxPhoneCallIcon,
'chart-bar': FoxChartBarIcon,
wrench: FoxWrenchIcon,
};
/** 모르는 이름이 왔을 때. 메뉴가 통째로 사라지는 것보다 낫다. */
const FALLBACK = FoxSquaresFourIcon;
interface SidebarMenuIconProps {
name: string;
}
/** 시안 1depth 아이콘은 Fill 굵기다. */
export function SidebarMenuIcon({ name }: SidebarMenuIconProps) {
const Icon = ICONS[name] ?? FALLBACK;
return <Icon weight="fill" />;
}