Icon
이름, 이미지, 커스텀 요소를 같은 크기와 정렬 규칙으로 표시하는 기본 요소입니다.
이름으로 사용
name prop에 common-icons 키를 지정하는 방식을 권장합니다.
이미지 · 커스텀 요소
src로 이미지 아이콘을 렌더하거나, as로 루트 요소를 지정하고 img·svg·컴포넌트를 children으로 전달할 수 있습니다.
크기
기본 크기는 icon 클래스만 사용합니다. icon_sm · md(기본) · icon_lg · icon_xl로 스케일을 조절합니다.
색상
공통 color_* 클래스를 조합합니다. 버튼·배지·알림 등 다른 컴포넌트와 동일한 클래스명을 사용합니다.
텍스트와 함께
inline prop으로 icon_inline 클래스를 적용해 텍스트와 수직 정렬을 맞춥니다. 텍스트에는 ml_sm으로 간격을 둡니다. 의미 있는 아이콘은 ariaLabel을 지정합니다.
변경 사항이 자동 저장됩니다.
업로드가 완료되었습니다.
원형 · 사각 배경
circle · square prop으로 icon_circle · icon_square 배경을 적용합니다. color로 색상을 지정합니다.
아이콘 버튼
button prop으로 icon_button 클릭 가능한 아이콘 버튼을 만듭니다. ariaLabel을 반드시 지정합니다.
펄스
pulse prop으로 icon_pulse 알림·상태 강조 애니메이션을 적용합니다. circle과 함께 사용합니다.
그룹
icon_group으로 여러 아이콘을 나란히 배치합니다.
홍길동님이 댓글을 남겼습니다.
로딩
spin prop으로 icon_spin 회전 애니메이션을 적용합니다. 로딩 상태 표시에 사용합니다.
자주 쓰는 아이콘
프로젝트에서 제공하는 stroke SVG 아이콘 전체입니다. viewBox 0 0 24 24 · stroke-width 2 기준입니다. name prop으로 common-icons 갤러리 키를 지정합니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
name | string | — | common-icons 갤러리 키. 지정 시 children 대신 미리 정의된 stroke 경로를 렌더합니다 |
src | string | StaticImport | — | 이미지 아이콘 경로. 단독 사용하거나 as="img"와 조합합니다 |
alt | string | '' | src 이미지의 대체 텍스트. 장식용 이미지는 빈 문자열을 사용합니다 |
as | React.ElementType | — | img 또는 커스텀 루트 요소. 커스텀 요소에서는 children으로 임의 콘텐츠를 전달합니다 |
size | 'sm' | 'md' | 'lg' | 'xl' | md | 아이콘 크기. md는 icon만, 나머지는 icon_sm · icon_lg · icon_xl |
color | string | — | 공통 color_* 클래스 (currentColor 상속) |
inline | boolean | false | 텍스트와 수직 정렬 (icon_inline) |
spin | boolean | false | 회전 애니메이션 (icon_spin) |
button | boolean | false | 클릭 가능한 아이콘 버튼 (icon_button + button 태그) |
circle | boolean | false | 원형 배경 (icon_circle) |
square | boolean | false | 사각 배경 (icon_square) |
pulse | boolean | false | 펄스 애니메이션 (icon_pulse, circle과 함께) |
ariaLabel | string | — | button·의미 있는 아이콘 시 접근성 라벨 |
ripple | boolean | — | 클릭 파장(ripple). button prop일 때만 적용 · true 활성 · false 비활성 · 미지정 시 button일 때 활성 |
장식용 아이콘은 aria-hidden="true"가 자동 적용됩니다. 의미 있는 아이콘·버튼은 ariaLabel을 지정하세요.
API · Children
| Children / Prop | 설명 |
|---|---|
children | 기본 모드에서는 SVG path·circle, as 모드에서는 img·svg·컴포넌트 등 임의 콘텐츠 |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
icon | SVG 루트 기본 크기 |
icon_sm · icon_lg · icon_xl | 크기 변형 |
icon_inline | 텍스트 인라인 정렬 |
icon_spin | 회전 애니메이션 |
icon_button | 아이콘 버튼 래퍼 |
icon_circle · icon_square | 배경 형태 |
icon_circle-sm · icon_circle-lg | 원형 배경 크기 |
icon_pulse | 펄스 강조 |
icon_group | 여러 아이콘 가로 배치 컨테이너 |
color_* | 공통 색상 유틸 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--icon-size-sm · --icon-size · --icon-size-lg · --icon-size-xl | 1rem · 1.25rem · 1.5rem · 2rem | 아이콘 지름 |
--icon-spin-duration | 0.8s | 회전 주기 |
--icon-circle-size · --icon-circle-size-sm · --icon-circle-size-lg | 2.25rem · 1.75rem · 2.75rem | 원형 배경 크기 |
--icon-pulse-duration | 1.5s | 펄스 애니메이션 주기 |