CSS로 SVG 아이콘 애니메이션 넣기

작은 모션 하나가 아이콘을 살아있게 만듭니다 — 돌아가는 스피너, 호버에 톡 튀는 하트, 스스로 그려지는 외곽선. 이 모든 걸 라이브러리 없이 순수 CSS로 할 수 있습니다.

한 가지 규칙: SVG는 인라인이어야 합니다

CSS는 DOM에 있는 것만 스타일링할 수 있습니다. <img src="icon.svg">로 불러온 아이콘은 블랙박스라 CSS가 내부 path에 닿지 못합니다. 애니메이션을 주려면 마크업을 페이지에 직접 넣으세요(인라인 <svg>…</svg>, 또는 SVG를 렌더하는 React 컴포넌트). 그러면 모든 <path>, <circle>과 <svg> 자체가 스타일 대상이 됩니다.

호버 트랜지션

가장 단순하고 유용한 효과 — 호버 시 부드러운 변형이나 색 변화. 트랜지션은 아이콘에, 트리거는 컨테이너에 두세요:

.icon-btn svg { transition: transform .2s ease, color .2s ease; }
.icon-btn:hover svg { transform: scale(1.15); color: #6366f1; }

회전 로더

키프레임 애니메이션으로 어떤 아이콘이든 계속 회전시킬 수 있습니다 — 로딩 상태에 딱입니다. <svg>의 viewBox가 중앙 정렬돼 있어야 가운데를 축으로 돕니다:

/* Inline SVG only — CSS can't reach inside <img src="icon.svg"> */
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

라인 드로잉 효과

외곽선(stroke) 아이콘은 선이 스스로 그려지게 할 수 있습니다. stroke-dasharray를 path 길이로 두고, offset을 가득 줘서 숨긴 상태로 시작한 뒤 offset을 0으로 애니메이션하면 됩니다. 24px 아이콘엔 대략 100이면 충분하고, 정확한 타이밍이 필요하면 JS의 path.getTotalLength()로 실제 길이를 읽으세요.

/* "Draw" a stroked icon by animating its dash offset */
.draw path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

Reduced motion 존중

어떤 사용자는 모션에 멀미를 느끼거나 정적인 화면을 선호합니다. 미디어 쿼리로 비필수 애니메이션을 끄면 한 줄로 접근성을 챙길 수 있습니다:

@media (prefers-reduced-motion: reduce) {
  .spinner, .draw path { animation: none; }
}

Icony에서 깔끔한 외곽선 SVG를 받아 인라인으로 붙여넣으면 위 스니펫이 그대로 동작합니다. 모핑이나 시퀀스 타임라인 같은 무거운 연출은 Motion·GSAP 같은 라이브러리를 쓰고, 호버·스피너·드로잉 정도는 CSS만으로 충분합니다.