itshover

悬停图标

基于 React 和 Motion 构建的动画图标库。图标设计旨在有目的地运动，而非单纯装饰。

特性

• 动效优先设计 — 每个图标在交互时都会产生动画，基于 motion/React 构建
• React 组件 — 即插即用组件，兼容 Next.js、shadcn 及现代工具链
• 完全可定制 — 复制源码、修改动画、调整描边宽度和颜色
• 开源 — MIT 许可，社区所有

快速开始

通过 CLI

npx shadcn@latest add https://itshover.com/r/[icon-name].json

手动安装

1. 安装依赖：

npm install motion

1. 从 icons/ 目录中复制任意图标组件到你的项目中

2. 导入并使用：

import GithubIcon from "@/icons/github-icon";

export default function Example() {
  return <GithubIcon className="h-6 w-6" />;
}

图标库

186 个动画图标,涵盖: - UI 基本元素(箭头、勾选、导航) - 社交(GitHub、Twitter、Discord、LinkedIn) - 技术(Docker、Node.js、Python、TypeScript) - 操作(复制、发送、购物车、设置) - 货币(比特币、以太币、美元、卢比) - 状态(警报、通知、加载状态)

1. 包裹在 React 组件中的 SVG
2. 使用 motion/React 在悬停时触发的动画
3. 通过 ref 转发导出，以实现命令式控制

链接

• 网站：itshover.com
• GitHub：[GitHub.com/itshover/itshover](https:/