Name: Animated Icons
Rating: 5.0 (303 reviews)

项目概述

Animated Icons 为全球最流行的三大开源图标库——Lucide (1,933+ 款)、Iconoir (1,383+ 款) 与 Heroicons (324+ 款)，赋予了丝滑细腻的微交互动效。涵盖超过 3600 款矢量图标，支持悬停弹性形变、点击涟漪、线条描边绘制与循环旋转，为现代 Web 界面注入灵动生机。

核心特性

🎨 3600+ 款全量动效覆盖：完整重构 Lucide、Iconoir 与 Heroicons，保持标准图标命名规范一致。
🕹️ 灵活的动效触发模式：开箱即用支持悬停 (Hover)、点击 (Click)、常驻循环 (Loop) 或通过 React Props 程序化控制。
🌈 双色调 (Dual-Tone) 深度定制：支持自由配置主色、辅色、透明度层级，并无缝继承 Tailwind CSS 颜色类名。
📦 按需引入与 Tree-Shaking：通过模块化 NPM 包按需导入，确保未引用的图标完全零额外打包体积负担。

快速上手与示例代码

# 安装 Lucide 动态 React 图标包
npm install @animated-color-icons/lucide-react

import React from 'react';
import { Heart, Bell, Settings, Download } from '@animated-color-icons/lucide-react';

export function ActionToolbar() {
  return (
    <div className="flex items-center gap-4 p-4 rounded-2xl bg-neutral-900 border border-neutral-800">
      <button className="p-2 text-white hover:text-rose-400 transition-colors cursor-pointer">
        <Heart size={24} trigger="hover" />
      </button>
      <button className="p-2 text-white hover:text-amber-400 transition-colors cursor-pointer">
        <Bell size={24} trigger="hover" />
      </button>
      <button className="p-2 text-white hover:text-teal-400 transition-colors cursor-pointer">
        <Download size={24} trigger="click" />
      </button>
    </div>
  );
}

技术选型建议与适用场景

侧边栏导航与卡片微交互：将原本呆板的静态图标一键升级为带有物理弹性反馈的高级微交互控件。
低成本体验升级：完全沿用 Lucide 现有的组件调用习惯与 API 命名，无需重新学习或重写底层 SVG。

Animated Icons

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

23rd

Great UI

Rewamp UI