morphicons 是一个零运行时依赖的库,为描边图标(如 Lucide、Tabler、Heroicons 等)提供任意图标之间的通用形变动画,基于 2D Procrustes 对齐与极坐标插值自动产生弹簧物理形变。

Stars

24

7 天增长

暂无数据

Fork 数

0

开放 Issue

0

开源协议

MIT

最近更新

2026-08-01

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它用闭式求解的形状相似度让旋转成为自然涌现的属性,而不是人工声明旋转组;同时核心不接触 DOM,提供 React、原生 DOM 与纯计算三层接口,并在性能与包体积控制上表现出色。

适合谁使用

  • 需要制作图标交互动画的 React 开发者
  • 使用 Lucide、Tabler、Heroicons、Iconoir 的前端工程师
  • 维护设计系统或图标库的开发者
  • 需要手势或滚动驱动图标形变的动效开发者

典型使用场景

  • 汉堡菜单与关闭按钮之间的动画切换
  • 导航栏和工具栏中带弹簧物理的图标过渡
  • 通过进度值实现滚动或拖拽中的图标形变
  • 在共享 24×24 网格上跨图标库进行形变

项目优势

  • 无需手写旋转组,Procrustes 对齐自动识别旋转关系
  • 零运行时依赖,动画帧内无数字分配,打包体积小
  • 可替换 lucide-react 的 React 组件,默认支持 SSR 与 reduced-motion
  • 核心不接触 DOM,同一套核心可扩展 React Native 等适配器

使用前须知

  • 仅适用于描边图标;填充或描边填充类图标在中途形变时视觉不正确
  • 图标数据必须是字面量 d 或 IconNode 形式,不能带 transform,且两端点需在同一坐标系或使用 fitIcon
  • 仅支持 ESM,React 为可选 peer 依赖且要求 React >=18

README 快速开始

Usage

项目描述

Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~6 KB gzip.

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

NUber-dev
精选
NUber-dev GitHub avatar

YTubic

YTubic is a fast, responsive, open-source YouTube Music desktop client for Windows, Linux, and macOS that uses direct InnerTube API communication and aggressive caching to provide instant navigation and playback.

Web 开发前端框架
226
TanStack
精选
TanStack GitHub avatar

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web 开发前端框架
14,861
react
精选
react GitHub avatar

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web 开发前端框架
246,741