Icon

Icon

이름, 이미지, 커스텀 요소를 같은 크기와 정렬 규칙으로 표시하는 기본 요소입니다.

이름으로 사용

name prop에 common-icons 키를 지정하는 방식을 권장합니다. stroke 아이콘은 currentColor로 부모 색상을 상속합니다.

이미지 · 커스텀 요소

src로 이미지 아이콘을 렌더하거나, as로 루트 요소를 지정하고 img·svg·컴포넌트를 기본 슬롯으로 전달할 수 있습니다.

프로필

크기

기본 크기는 icon 클래스만 사용합니다. icon_sm · icon_lg · icon_xl로 스케일을 조절합니다.

색상

공통 color_* 클래스를 조합합니다. 버튼·배지·알림 등 다른 컴포넌트와 동일한 클래스명을 사용합니다.

텍스트와 함께

icon_inline으로 텍스트와 수직 정렬을 맞춥니다. 텍스트에는 ml_sm으로 간격을 둡니다. 의미 있는 아이콘은 aria-label을 지정합니다.

변경 사항이 자동 저장됩니다.

업로드가 완료되었습니다.

원형 · 사각 배경

icon_circle · icon_square로 아이콘에 배경을 적용합니다. color_*로 색상을 지정합니다.

아이콘 버튼

icon_button으로 클릭 가능한 아이콘 버튼을 만듭니다. aria-label을 반드시 지정합니다.

펄스

icon_pulse로 알림·상태 강조 애니메이션을 적용합니다. icon_circle과 함께 사용합니다.

그룹

icon_group으로 여러 아이콘을 나란히 배치합니다.

홍길동님이 댓글을 남겼습니다.

로딩

icon_spin으로 회전 애니메이션을 적용합니다. 로딩 상태 표시에 사용합니다.

프로젝트에서 제공하는 stroke SVG 아이콘 전체입니다. viewBox 0 0 24 24 · stroke-width 2 기준입니다.

search
plus
minus
close
check
edit
trash
delete
copy
save
download
upload
share
link
external-link
filter
refresh
undo
redo
printer
paperclip
arrow-left
arrow-right
arrow-up
arrow-down
chevron-left
chevron-right
chevron-up
chevron-down
menu
more-vertical
more-horizontal
grid
list
home
settings
user
users
mail
phone
bell
message
send
info
help-circle
alert-circle
alert-triangle
check-circle
x-circle
star
heart
bookmark
thumb-up
eye
eye-off
lock
unlock
log-in
log-out
calendar
clock
folder
file
image
camera
map-pin
globe
cart
credit-card
tag
sun
moon
cloud
book
zoom-in
zoom-out
maximize
loader

API · Props

Prop타입기본값설명
namestringcommon-icons 갤러리 키. 지정 시 기본 슬롯 대신 미리 정의된 stroke 경로를 렌더합니다
srcstring | object이미지 아이콘 경로. 단독 사용하거나 as="img"와 조합합니다
altstring''src 이미지의 대체 텍스트. 장식용 이미지는 빈 문자열을 사용합니다
asstring | Componentimg 또는 커스텀 루트 요소. 커스텀 요소에서는 기본 슬롯으로 임의 콘텐츠를 전달합니다
size'sm' | 'md' | 'lg' | 'xl'md아이콘 크기. md는 icon만, 나머지는 icon_sm · icon_lg · icon_xl
colorstring공통 color_* 클래스 (currentColor 상속)
inlinebooleanfalse텍스트와 수직 정렬 (icon_inline)
spinbooleanfalse회전 애니메이션 (icon_spin)
buttonbooleanfalse클릭 가능한 아이콘 버튼 (icon_button + button 태그)
circlebooleanfalse원형 배경 (icon_circle)
squarebooleanfalse사각 배경 (icon_square)
pulsebooleanfalse펄스 애니메이션 (icon_pulse, circle과 함께)
aria-labelstringbutton·의미 있는 아이콘 시 접근성 라벨
rippleboolean클릭 파장(ripple). button prop일 때만 적용 · true 활성 · false 비활성 · 미지정 시 button일 때 활성

장식용 아이콘은 aria-hidden="true"가 자동 적용됩니다. 의미 있는 아이콘·버튼은 aria-label을 지정하세요.

API · Slots

슬롯설명
default기본 모드에서는 SVG path·circle, as 모드에서는 img·svg·컴포넌트 등 임의 콘텐츠
path커스텀 SVG 도형 슬롯. name보다 우선합니다
imageimg 등 이미지 슬롯. path·name보다 우선합니다

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스설명
iconSVG·img·커스텀 루트 기본 크기
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-xl1rem · 1.25rem · 1.5rem · 2rem아이콘 지름
--icon-spin-duration0.8s회전 주기
--icon-circle-size · --icon-circle-size-sm · --icon-circle-size-lg2.25rem · 1.75rem · 2.75rem원형 배경 크기
--icon-pulse-duration1.5s펄스 애니메이션 주기