guillermolg00/morphicons

What it solves

morphicons 提供了一种在两个不同的基于描边的图标（例如来自 Lucide、Tabler 或 Heroicons 的图标）之间实现动画过渡的方法，使得一个图标能够平滑地“变形”为另一个。它通过使用数学对齐来寻找两个形状之间最自然的路径，从而消除了手动定义旋转组或处理在插值过程中缩小或剪切的形状的需求。

How it works

library 使用 2D Procrustes analysis 和极坐标插值来以闭式解求解形状之间的最佳相似度。这确保了如果两个图标在旋转下是全等的，过渡将表现为旋转而非扭曲的变形。它支持三种操作模式：uncontrolled（当 prop 改变时自动进行动画）、controlled（为手势或滚动提供显式进度）以及 imperative（使用 handle 通过代码触发动画）。

Who it’s for

使用 React、Vue、Svelte、React Native 或纯 HTML/Web Components 的前端开发者，他们希望获得高质量、基于物理效果的图标动画，而无需复杂的配置或运行时依赖。

Highlights

• Universal Compatibility: 与任何基于描边的图标数据（Lucide、Tabler、Heroicons、Iconoir 等）兼容。
• Multi-Framework Support: 为 React、Vue、Svelte、React Native 和 Astro 提供专用绑定，此外还有 vanilla JS DOM driver。
• Physics-Based: 使用弹簧物理效果实现平滑、自然的过渡。
• Zero Runtime Dependencies: 核心逻辑独立于任何框架。
• Flexible Output Targets: 可以渲染到 inline SVGs、CSS masks（通过 maskTarget）或 2D Canvas（通过 canvasTarget）。
• Accessibility First: 内置对 reduced-motion OS 设置的支持。