Repolode
提交项目
Avijit07x

Avijit07x/animateicons

面向 React、Vue、Angular 和原生 JS 的 1170 个动画 SVG 图标库，支持悬停或手动触发。

在 GitHub 查看官网
Star
1,521
Fork
79
未关闭 Issue
0
最近提交
6小时前

这是什么？

AnimateIcons 是一个每个图标都带动画效果的图标库。它提供 1170 个 SVG 图标，基于 Lucide 和 Hugeicons 图标集，默认在鼠标悬停时播放动画，也支持通过代码主动触发。

图标支持设置尺寸、颜色、动画时长以及是否启用动画，并可通过 className 自定义样式。React 版本按图标集分别引入，如 @animateicons/react/lucide 或 @animateicons/react/huge。Vue 3 与 Nuxt、Angular 以及原生 JavaScript 各有独立包，原生版本也可用于 Web Components、Svelte、Solid 和 Astro。动画基于 motion 库实现，React 包已内置该依赖。

useIconHover 钩子可在用户悬停或点击按钮、链接、卡片时播放图标动画。命令行工具支持把单个图标的源码复制到项目中，项目还提供 shadcn 和 MCP 集成说明。

核心功能

  • 01提供 1170 个 SVG 图标，默认支持悬停动画。
  • 02支持设置尺寸、颜色、动画时长及开关动画。
  • 03覆盖 React、Vue 与 Nuxt、Angular、原生 JavaScript 等框架。
  • 04提供 useIconHover 钩子，可由外层按钮或卡片触发图标动画。
  • 05通过命令行把单个图标源码复制到项目中。

适用场景

  • 在 React 网页应用的按钮、导航项或通知铃铛上添加动效反馈。
  • 在 Vue 或 Nuxt 站点中使用动画图标，无需自行编写动画代码。
  • 把单个图标复制到项目中，便于直接修改定制。

快速上手

  1. 1

    安装 React 包

    pnpm add @animateicons/react
  2. 2

    导入图标并渲染

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

使用前须知

  • 图标形状基于 Lucide 和 Hugeicons，需遵守第三方声明。

收录于专题

前端框架与界面组件

标签

#icons#animation#svg#react#vue#angular#motion#ui-components#animated-icons#framer-motion

常见问题

animateicons 是什么？
面向 React、Vue、Angular 和原生 JS 的 1170 个动画 SVG 图标库，支持悬停或手动触发。 AnimateIcons 是一个每个图标都带动画效果的图标库。它提供 1170 个 SVG 图标，基于 Lucide 和 Hugeicons 图标集，默认在鼠标悬停时播放动画，也支持通过代码主动触发。
animateicons 可以免费使用吗？用的什么许可证？
animateicons 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
animateicons 还在维护吗？
活跃维护中。animateicons 最近一次提交是在 2026年11月7日。
animateicons 适合用来做什么？
在 React 网页应用的按钮、导航项或通知铃铛上添加动效反馈。 在 Vue 或 Nuxt 站点中使用动画图标，无需自行编写动画代码。 把单个图标复制到项目中，便于直接修改定制。
animateicons 怎么安装和运行？
安装 React 包: pnpm add @animateicons/react 导入图标并渲染: import { BellRingIcon } from "@animateicons/react/lucide";
在哪里获取 animateicons？
源代码和安装说明在 GitHub 上：https://github.com/Avijit07x/animateicons

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目