Avijit07x/animateicons

어떤 프로젝트인가요?

핵심 기능

• 01호버하면 기본적으로 애니메이션이 재생되는 SVG 아이콘 1,170개를 제공합니다.
• 02크기, 색상, 재생 시간, 애니메이션 활성화 여부를 props로 설정할 수 있습니다.
• 03React, Vue와 Nuxt, Angular, 순수 JavaScript용 패키지를 제공합니다.
• 04주변 버튼이나 카드의 동작에 맞춰 아이콘을 애니메이션으로 재생하는 useIconHover 훅을 제공합니다.
• 05CLI 명령으로 개별 아이콘의 소스 코드를 프로젝트에 복사할 수 있습니다.

활용 사례

• React 웹 앱의 버튼, 내비게이션 항목 또는 알림 벨에 모션 피드백을 추가할 때.
• 애니메이션 코드를 직접 작성하지 않고 Vue 또는 Nuxt 사이트에서 애니메이션 아이콘을 사용할 때.
• 직접 수정하고 싶은 코드베이스에 개별 아이콘을 복사해 넣을 때.

빠른 시작

1. 1

   React 패키지 설치

   pnpm add @animateicons/react
2. 2

   아이콘을 가져와 렌더링

   import { BellRingIcon } from "@animateicons/react/lucide";

사용 전 알아둘 점

• !아이콘 모양은 Lucide 및 Hugeicons를 기반으로 하므로 타사 고지 사항이 적용됩니다.

포함된 컬렉션

토픽

자주 묻는 질문

animateicons은(는) 무엇인가요?

호버하거나 코드로 재생할 수 있는 애니메이션 SVG 아이콘 1,170개를 제공하는 React, Vue, Angular, 순수 JavaScript 라이브러리입니다. AnimateIcons는 모든 아이콘에 모션이 내장된 아이콘 라이브러리입니다. Lucide와 Hugeicons 세트를 기반으로 한 SVG 아이콘 1,170개를 제공하며, 기본적으로 각 아이콘은 호버할 때 애니메이션이 재생됩니다. 개발자는 코드에서 애니메이션을 직접 실행할 수도 있습니다.

animateicons은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

animateicons은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

animateicons은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. animateicons의 마지막 커밋은 2026년 11월 6일입니다.

animateicons은(는) 어디에 사용할 수 있나요?

React 웹 앱의 버튼, 내비게이션 항목 또는 알림 벨에 모션 피드백을 추가할 때. 애니메이션 코드를 직접 작성하지 않고 Vue 또는 Nuxt 사이트에서 애니메이션 아이콘을 사용할 때. 직접 수정하고 싶은 코드베이스에 개별 아이콘을 복사해 넣을 때.

animateicons는 어떻게 설치하나요?

React 패키지 설치: pnpm add @animateicons/react 아이콘을 가져와 렌더링: import { BellRingIcon } from "@animateicons/react/lucide";

animateicons은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Avijit07x/animateicons