사이징

컴포넌트 치수는 @refineui/tokens의 componentSizes를 통해 Foundation 사이즈 스텝을 별칭합니다. React 스타일에 컨트롤 높이나 아이콘 박스를 하드코딩하지 마세요.

무엇을 쓸까

레이어	목적
foundationSizes	전역 사이즈 스텝 (Foundation의 단일 소스)
componentSizes	Web Kit 치수 별칭 → Foundation 키
iconSizes	글리프 크기 px (xxsmall … xxlarge)

아이콘 크기

토큰	px
xxsmall	12
xsmall	16
small	20
medium	24
large	28
xlarge	32
xxlarge	48

예시

컨트롤 높이(버튼, 인풋)와 오버레이 너비는 --refineui-size-button-min-height-md, --refineui-size-dialog-max-width 같은 CSS 변수로 해석됩니다. 커스텀 크롬을 조합하는 경우가 아니면 제품 CSS에서 그 변수를 읽기보다 컴포넌트 props(size="md")를 우선하세요.

import { iconSizes } from "@refineui/tokens";
import { WebIcon } from "@refineui/react";

<WebIcon name="search" size={iconSizes.small} />