GlyphsProvider

Todae는 아이콘 세트를 제공하지 않습니다. 그래도 닫기 버튼의 X 모양이나 체크박스의 체크 표시처럼, 몇몇 파트는 온전해 보이려면 글리프가 필요해서 Todae가 직접 그립니다. GlyphsProvider는 그 안의 모든 요소에 대해 이 글리프를 정하므로, 대신 사용하는 아이콘 라이브러리의 아이콘을 쓸 수 있습니다. 바꿀 키만 전달하세요. 생략한 키는 가장 가까운 상위 GlyphsProvider에서 가져오고, null은 Todae 자체 글리프로 되돌립니다. 요소는 렌더링하지 않습니다.

import { Check, ChevronDown, ChevronRight, Ellipsis, X } from 'lucide-react';

<GlyphsProvider
  glyphs={{
    close: <X />,
    check: <Check />,
    chevron: <ChevronDown />,
    separator: <ChevronRight />,
    ellipsis: <Ellipsis />,
  }}
>
  <App />
</GlyphsProvider>

같은 파트를 Todae 자체 글리프와 Lucide, Phosphor, Tabler로 보여 줍니다.

파트 자체의 내용이 있으면 그것이 우선합니다. 닫기 파트의 children, Chip.Root와 ChipList.Root의 removeIcon, Field.ChipInput의 chipRemoveIcon, Pagination.Ellipsis의 children, Breadcrumbs.Root의 separator가 그렇습니다. useGlyphs()는 현재 적용되는 글리프를 반환하므로 직접 만든 컴포넌트에서 쓸 수 있습니다.

글리프

chevron은 아래쪽을 가리키게 그리세요. 닫힌 디스클로저나 트리 항목은 이를 텍스트 쪽으로, 닫힌 nav 가지는 행의 끝 쪽으로, 달 버튼은 그 달 쪽으로 돌립니다. sort는 위쪽을 가리키게 그리세요. 내림차순 열은 이를 돌립니다. separator는 왼쪽에서 오른쪽으로 읽는 페이지에서 다음 항목을 가리키게, back은 왼쪽에서 오른쪽으로 읽는 줄의 시작 쪽인 왼쪽을 가리키게 그리세요. 오른쪽에서 왼쪽으로 읽는 페이지에서는 둘 다 좌우가 뒤집힙니다. Field.Select에서 chevron은 브라우저가 ::picker-icon을 지원하고 select가 필드의 마지막 파트일 때 브라우저의 선택기 아이콘 위에 놓입니다. 그렇지 않으면 브라우저의 아이콘이 그대로 남습니다. 선택된 <option> 옆의 체크 표시는 브라우저 자체의 것입니다.

아이콘 라이브러리가 렌더링하는 것처럼 svg나 img인 글리프는 아이콘 자체의 size나 width와 상관없이 파트가 주는 상자의 크기를 따릅니다. 닫기 파트, Attachment.Remove, Conversation.ScrollButton, Composer.Submit에서는 button.icon.size, 칩에서는 chip.icon.size, select와 날짜·시각 선택기에서는 field.icon.size, 달력의 달 버튼에서는 calendar.nav.icon.size, Drilldown.Back에서는 drilldown.back.icon.size, 연월에서는 calendar.heading.icon.size, 트리에서는 tree.chevron.size, nav 가지에서는 nav.chevron.size, 단계 표시에서는 steps.icon.size, 정렬 버튼에서는 table.sort.icon.size, 체크박스에서는 상자 전체, 그 밖에서는 텍스트와 비슷한 크기의 상자입니다. currentColor로 그린 아이콘은 파트의 텍스트 색을 따릅니다.

라디오의 점, 스위치의 손잡이, 스피너, 선택된 탭의 막대는 글리프가 아니라 토큰으로 그리는 모양이므로 여기에 없습니다.

@tounsoo/todae/breadcrumbs 같은 서버 진입점의 Breadcrumbs, Pagination, Disclosure는 컨텍스트 없이 서버에서 렌더링하므로 항상 Todae 자체 글리프를 그립니다. provider를 쓰려면 @tounsoo/todae에서 가져오세요.

접근성을 지키는 조합

Todae가 맡는 것: 모든 글리프를 접근 가능한 이름에서 뺍니다. 글리프는 aria-hidden 요소 안에 있거나, 칩의 제거 버튼처럼 aria-label로 이름이 붙은 버튼 안에 있습니다. 내용이 없는 닫기 파트는 StringsProvider의 close나 dismiss 문자열로, Attachment.Remove는 removeAttachment로 이름이 붙고, tooltip을 전달하지 않으면 툴팁을 보여 주지 않습니다.

직접 제공할 것: 정하는 모든 키에, 뜻하는 바가 그대로 읽히는 아이콘을 주세요. close에는 X 모양, check에는 체크 표시입니다. 이름은 Todae가 정하므로, 다른 뜻의 아이콘을 쓰면 그림과 이름이 어긋납니다.

주의할 점: '×' 같은 텍스트를 글리프로 쓰지 마세요. 파트의 글꼴로 그려지므로 다른 아이콘과 어울리지 않을 수 있습니다. svg 아이콘을 쓰세요.

언제 쓰나요

GlyphsProvider

언제: 디자인 시스템이 아이콘 라이브러리를 쓰고, Todae의 X 모양, 체크, chevron, 구분 기호, 줄임표를 앱 전체나 일부에서 그 라이브러리에 맞추고 싶을 때.

쓰지 않을 때: Button.Icon, Field.Icon, Alert.Icon 같은 슬롯의 아이콘 → 거기에 바로 넣으세요. 닫기 버튼이나 칩 하나에만 다른 아이콘 → 그 파트의 내용이나 removeIcon으로 전달하세요.

useGlyphs

언제: 닫기 X처럼 GlyphsProvider가 Todae 파트에 설정한 글리프를 자체 컴포넌트도 그려야 할 때.

쓰지 않을 때: 내 컴포넌트만 쓰는 아이콘 → 아이콘 라이브러리.

Props