AnimatedIcon

한눈에#

정적 WDS 아이콘에 짧은 상태 모션을 더하는 래퍼입니다. 아이콘 자체를 다시 만들지 않고, 생성 아이콘 컴포넌트를 icon prop으로 받아 CSS 애니메이션만 적용합니다.

• CSS-only
• 5 effects
• layer hook fallback
• reduced-motion 정지

byLayer는 data-wds-icon-layer 훅이 있을 때만 레이어별 타이밍을 쓰고, 훅이 없는 아이콘은 전체 SVG fallback으로 움직입니다

사용 시점#

상태가 바뀌는 순간을 아이콘 하나로 짧게 강조할 때 사용합니다. 진행률, 로딩, 사용자 입력 같은 의미 자체를 모션에만 맡기지 않습니다.

효과#

effect="none"이면 모션 data attribute와 CSS custom property를 만들지 않습니다. 소비자가 같은 래퍼를 조건부 상태에 재사용할 때 기본값으로 안전합니다.

레이어#

레이어 주석이 있는 생성 아이콘은 primary·secondary 훅을 산출물에 포함합니다. byLayer는 이 훅을 기준으로 레이어별 타이밍을 만들고, 레이어 주석이 없는 평면 아이콘은 전체 SVG fallback으로 동작합니다. 훅은 모션과 테스트를 위한 안정 속성이라 아이콘 색상·스트로크 계약을 바꾸지 않습니다.

속도와 반복#

숫자 repeat는 0 이상의 유한 숫자만 고정 반복으로 사용합니다. 음수나 NaN 같은 값은 안전하게 1회로 정규화합니다.

Props#

접근성#

• wrapper에 aria-label 또는 aria-labelledby가 있으면 role="img"를 기본으로 붙이고, 내부 SVG는 aria-hidden으로 숨깁니다
• 접근성 이름이 없으면 생성 아이콘의 기존 aria 계약을 그대로 둡니다
• 상태 의미는 텍스트·라벨이 정본입니다 — 모션은 보조 신호입니다
• prefers-reduced-motion: reduce에서는 모든 효과가 animation: none으로 정지합니다

토큰#

component 토큰 없이 semantic 모션 토큰과 CSS custom property만 사용합니다.