Avijit07x/animateicons

これは何？

主な機能

• 01デフォルトでホバー時にアニメーションするSVGアイコンを1,170種類提供します。
• 02size、color、duration、およびアニメーションの有効・無効をpropsで指定できます。
• 03React、VueとNuxt、Angular、プレーンJavaScript向けのパッケージを提供します。
• 04周囲のボタンやカードに応じてアイコンをアニメーションさせるuseIconHoverフックを備えています。
• 05CLIコマンドを使って、個別のアイコンのソースをプロジェクトにコピーできます。

ユースケース

• ReactのWebアプリで、ボタン、ナビゲーション項目、通知ベルに動きによるフィードバックを加える。
• アニメーションコードを書かずに、VueまたはNuxtのサイトでアニメーションアイコンを使う。
• 直接カスタマイズしたいコードベースに、個別のアイコンをコピーする。

クイックスタート

1. 1

   React パッケージをインストールする

   pnpm add @animateicons/react
2. 2

   アイコンをインポートしてレンダリングする

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

使う前に知っておきたいこと

• !アイコンの形状は Lucide と Hugeicons に由来するため、サードパーティに関する表示が適用されます。

収録されている特集

トピック

よくある質問

animateicons とは？

ホバー時または任意のタイミングで動く、1,170種類のアニメーションSVGアイコンを提供するReact、Vue、Angular、プレーンJavaScript向けライブラリ。 AnimateIconsは、すべてのアイコンに動きが組み込まれたアイコンライブラリです。LucideとHugeiconsのアイコンセットをベースにした1,170種類のSVGアイコンを収録し、各アイコンはデフォルトでホバー時にアニメーションします。コードから命令的にアニメーションを再生することもできます。

animateicons は無料で使えますか？ライセンスは？

animateicons は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

animateicons は今もメンテナンスされていますか？

活発にメンテナンス中。animateicons の最終コミットは 2026年11月7日 です。

animateicons は何に使えますか？

ReactのWebアプリで、ボタン、ナビゲーション項目、通知ベルに動きによるフィードバックを加える。 アニメーションコードを書かずに、VueまたはNuxtのサイトでアニメーションアイコンを使う。 直接カスタマイズしたいコードベースに、個別のアイコンをコピーする。

animateicons のインストール方法は？

React パッケージをインストールする: pnpm add @animateicons/react アイコンをインポートしてレンダリングする: import { BellRingIcon } from "@animateicons/react/lucide";

animateicons はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Avijit07x/animateicons