animateicons v0.12.0 动画图标库中文版下载多平台（1500+ 图标 hover 即动）

获取下载链全程约 1 分钟

1. 打开微信，搜索「软件教程管家」关注，或长按下方二维码关注
2. 回复关键词 animateicons 复制关键词（提取码 qjku）
3. 公众号自动回复网盘链接，点击即可保存下载

打开微信扫一扫关注
或搜索【软件教程管家】

官方渠道：GitHub 仓库

做 Web 界面时，按钮、菜单、输入框旁的图标大多是静态 SVG，排版整齐但略显死板。想让铃铛在 hover 时晃一下、发送箭头在点击时缩一下，通常得自己挑图标、再手写 transition 或 keyframes，每个动效都要单独调时长和缓动。animateicons 是把这件事收进组件库的动画图标库：1500 余枚自带动效的矢量图标，形状基于 Lucide 与 Hugeicons，动画由 motion 引擎预先打包进组件，导入即用，默认 hover 就播放。本篇讲清它和静态图标库的区别、怎么装，以及装完先调哪几个 props。

软件信息

版本选择：先说结论

大多数项目直接走 npm 包安装，随版本升级最省心；想自己改动画、把图标源码捏在手里的项目，用 shadcn CLI 把单枚图标拷进工程；不用框架的静态页面，直接用原生 JS 包。

动画图标安装步骤

1. 按项目包管理器安装 React 主包：pnpm add @animateicons/react（npm、yarn 同理），motion 运行时已经打进包里，不用单独装。
2. 从对应路径导入组件：Lucide 风格走 @animateicons/react/lucide，Hugeicons 风格走 /huge 路径，写 import 时先定好团队统一用哪一套，别混着用。
3. 把图标当普通组件放进按钮、菜单里，鼠标移上去默认就播放一次动画，不用额外写事件。
4. 需要改尺寸、颜色、时长时传 props：尺寸默认 24，颜色默认跟随文字色，时长默认 1 秒，先在项目里定一套统一值。
5. 想把图标源码拷进项目时，用 shadcn CLI 一键加进组件目录，或用 npx 命令把单枚图标源码直接拷进来，拷进来后升级不强制走 npm 包。

装完必调的 4 个 props

没有图形界面要配置，animateicons 的“设置”就是下面这 4 组 props，装完先在项目里统一掉：

1. 尺寸与时长先统一定值：props 里尺寸默认 24、时长默认 1 秒。入口就是组件的 props，团队先定一套值（比如图标统一 20、时长统一 0.6 秒），别每个图标单独调，否则同一页面上的动效节奏会忽快忽慢。
2. 颜色跟随文字色：颜色默认继承 currentColor，换主题、换按钮状态时不用逐个改色。体感差别在于，图标颜色永远和旁边文字一致，视觉上不会出现图标一个色、文字一个色的脱节。
3. 触发模式按场景选：默认 hover 播放，图标自身 hover 只覆盖光标落在 SVG 上的窄区域；实际界面常希望整个按钮或卡片在 hover 时带动旁边图标一起动，这时用库提供的 useIconHover 钩子，把图标实例挂到外层容器的 mouseenter 或 click 上，触发模式可选 hover、click 或 both，也支持把多枚图标编排成序列。
4. 动画开关留给需要的场景：props 里有是否开启动画的开关。不需要动效的场景（比如数据密集的表格操作列）直接关掉，页面安静很多；照顾偏好减弱动效的用户时，这一个开关比全局 CSS 覆盖省事。

注意事项与常见问题

• 还是 0.x 版本，API 可能变：React 主包目前是 v0.12.0，处于 1.0 之前，升级前先看 changelog，别在发版当天无脑升大版本。
• Angular 有版本门槛：Angular 包目前只支持 20、21、22 三个大版本号，更老的工程需要先升框架，不能直接装。
• 图标形状不是原创的：SVG 路径保持 Lucide 与 Hugeicons 原作者的形状，项目方只是在此基础上叠加时间轴，第三方声明见仓库里的 THIRD_PARTY_NOTICES.md，商用前看一眼声明没有坏处。
• MCP server 要自己配：项目配了 MCP server，编码 Agent 接入后可用自然语言按用途搜图标，再由 Agent 直接把组件写进工程。这部分需要在 AI 客户端里自己配置 MCP 地址，搜出来的结果仍需本人确认再进工程。
• 拷源码和装 npm 包是两条升级线：用 shadcn CLI 或 npx 把单枚图标源码拷进项目后，组件归项目自己持有，后续升级不强制走 npm 包，改动也要自己维护；团队要先定好走哪条线，别一半图标走包、一半走源码。
• 图标数量以仓库为准：库内图标在 1500 枚以上，两套来源的风格差异明显——Lucide 一侧是社区常用的线性描边风格，Hugeicons 一侧是相对饱满的轮廓造型，做 UI 设计时按现有视觉风格二选一即可。

适合谁、不适合谁

适合做 Web 界面、想给按钮和菜单图标加微动效的前端团队：不用自己挑图标、写 keyframes，导入组件、传几个 props 就能让铃铛晃一下、箭头缩一下，多框架覆盖也省了跨栈重复实现。

不适合只要静态图标、不想多引一个 motion 运行时的项目——静态场景下 Lucide 原版更轻；也不适合还在 Angular 老版本上、短期内不打算升级框架的工程。

和静态图标库怎么分工：静态库负责“有个图标就行”的地方，animateicons 负责“图标要动一下才有反馈”的地方，比如主操作按钮、空状态插画旁的提示图标。同一项目里两者可以共存，按交互强度分，不是非此即彼。

获取下载链接：微信关注公众号「软件教程管家」，回复【animateicons】自动获取网盘链接。

推广

关注「软件教程管家」

回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。

相关推荐

开发Kubai Icons中文版下载|Windows（AI编码Agent统一风格动画图标库）办公Dalibre书库管理中文版下载|多平台（Go原生轻量calibre客户端）开源项目iSponsorBlockTV 赞助跳过中文版下载|多平台（电视看 YouTube 自动跳过赞助片头）学习教程家卷 exam2pdf v0.1.4中文版下载|多平台（家庭试卷采集整理打印批阅错题一体）学习教程Pyomo 下载|多平台（优化建模）学习教程Phaser 下载|多平台（2D游戏开发）