Icon
Exem UI 디자인 시스템의 202개 아이콘입니다.
Icon Browser
202 / 202개
Usage
Import & Alias
개별 아이콘을 named import로 가져옵니다. 컴포넌트명 또는 Icon 접미사 alias를 사용할 수 있습니다.
import { AccountTree } from '@exem-ui/react/icon';
import { AccountTreeIcon } from '@exem-ui/react/icon'; // aliasType
아이콘마다 지원하는 type이 다릅니다. 3종(regular, light, fill)을 모두 지원하는 아이콘, 일부만 지원하는 아이콘, 단일 스타일만 존재하는 아이콘이 있습니다.
regular / light / fill 모두 지원
regular
light
fill
<Dashboard type="regular" /> <Dashboard type="light" /> <Dashboard type="fill" />
regular / light만 지원 (fill 없음)
regular
light
<ArrowDown type="regular" /> <ArrowDown type="light" />
단일 스타일 — type prop 없이 사용
Oracle
ToolsSymbol
DashboardSymbol
RootFinderSymbol
<Oracle /> <ToolsSymbol /> <DashboardSymbol /> <RootFinderSymbol />
Sizes
size prop으로 아이콘 크기를 지정합니다. 기본값은 20입니다.
12
16
20
24
<Bulb size={12} /> // xs
<Bulb size={16} /> // sm
<Bulb size={20} /> // md (default)
<Bulb size={24} /> // lgSize 기반 동적 Default Type
type을 명시하지 않으면 size에 따라 자동으로 결정됩니다. 작은 아이콘(≤18)은 regular, 큰 아이콘(≥19)은 light가 기본값입니다.
size에 따른 기본 type 자동 결정
16 → regular
24 → light
// size ≤ 18 → type 기본값: regular
// size ≥ 19 → type 기본값: light
<Notification size={16} /> // regular
<Notification size={24} /> // lighttype을 명시하면 size 기본값을 무시하고 override
24 (light)
24 → regular
24 → fill
16 (regular)
16 → light
<Notification size={24} /> // light (기본값)
<Notification size={24} type="regular" /> // regular로 override
<Notification size={24} type="fill" /> // fill로 override
<Notification size={16} /> // regular (기본값)
<Notification size={16} type="light" /> // light로 override