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
/**
* 메뉴 아이콘 이름(백엔드가 주는 문자열) → `fox-ico` 클래스.
*
* 백엔드는 `users-three`처럼 kebab-case로 주고 폰트 클래스는 시안 이름 그대로인
* `fox-ico-UsersThree`라서 여기서 변환만 한다. 화이트리스트가 필요 없다 — 폰트는 통째로
* 하나라 어떤 이름이 와도 번들이 커지지 않는다.
*
* 다만 없는 이름이면 글리프가 비어 보이므로, 시안 1depth 세트에 있는 이름만 통과시키고
* 나머지는 기본 아이콘으로 떨어뜨린다.
*/
/** 시안 1depth가 쓰는 세트. 백엔드가 새 이름을 보내면 여기에 한 줄 추가한다. */
const KNOWN = new Set([
'house',
'users-three',
'user-square',
'potted-plant',
'pencil-simple',
'medal',
'identification-card',
'calendar-star',
'coins',
'nut',
'shield-check',
'phone-call',
'chart-bar',
'wrench',
]);
/** 모르는 이름이 왔을 때. 메뉴가 통째로 사라지는 것보다 낫다. */
const FALLBACK = 'SquaresFour';
function toPascalCase(name: string): string {
return name
.split('-')
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join('');
}
interface SidebarMenuIconProps {
name: string;
}
/** 시안 1depth 아이콘은 Fill 굵기다. */
export function SidebarMenuIcon({ name }: SidebarMenuIconProps) {
const glyph = KNOWN.has(name) ? toPascalCase(name) : FALLBACK;
return (
<i className={`fox-ico fox-ico--fill fox-ico-${glyph}`} aria-hidden="true" />
);
}