사용법
여러 Tabler 아이콘이 일정한 간격으로 교차 전환돼요.
인터페이스
AnimatedIconsProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| icons* | ReactNode[] | — | 순환할 아이콘 목록 |
| label* | string | — | 아이콘 그룹 접근성 라벨 |
| interval | number | 1800 | 아이콘 교체 간격(ms) |
| duration | number | 320 | 전환 길이(ms) |
| initialIndex | number | 0 | 초기 아이콘 인덱스 |
| onIndexChange | (index: number) => void | — | 아이콘 인덱스 변경 콜백 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
AnimatedIcons 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { AnimatedIcons } from "@goldtreedev/ui";