Lucide Animated

项目概述

Lucide Animated（lucide-animated.com / pqoqubbw/icons）是全球最火热的开源动态图标库之一，拥有超过 8,000+ GitHub Stars。它在广受喜爱的 Lucide Icons 视觉体系之上，深度结合 Motion（原 Framer Motion）动效引擎，为 350+ 款经典图标赋予了富有弹性的物理微动效。

核心特性

• ✨ 350+ 款精致动态图标：涵盖铃铛摇摆、齿轮转动、对勾绘制、搜索放大镜缩放等几乎所有常用 UI 场景。
• ⚡️ shadcn 官方 Registry 支持：直接运行 npx shadcn add "https://lucide-animated.com/r/{icon}.json" 即可一键注入源码。
• 🎬 Motion 物理微动效引擎：基于声明式弹簧曲线与时间轴编排，动效自然灵动且不干扰用户操作节奏。
• 🛠️ 全量 TypeScript 与自包含架构：单文件组件无多余层级，支持自由调整尺寸（size）、颜色与触发模式。

快速上手与示例代码

# 通过 shadcn CLI 一键引入动态铃铛图标
npx shadcn@latest add "https://lucide-animated.com/r/bell.json"

import React from 'react';
import { BellIcon } from '@/components/icons/bell';

export function NotificationBell() {
  return (
    <button className="p-2 rounded-xl bg-card border border-border hover:bg-muted/80 transition-colors group cursor-pointer">
      <BellIcon size={20} className="text-foreground group-hover:text-primary transition-colors" />
    </button>
  );
}

技术选型建议与适用场景

• 非常适合：既有项目已采用 Lucide Icons、希望为核心交互按钮（收藏、点赞、下载、删除、通知）提升微交互质感的现代 Web 应用。
• 核心优势：与 Lucide 原版完全同构，在视觉风格一致的前提下带来极具辨识度的“质感飞跃”。