guillermolg00/morphicons

What it solves

morphicons は、2つの異なるストロークベースのアイコン（Lucide、Tabler、Heroicons など）間の遷移をアニメーション化し、一方から他方へスムーズに「モーフィング」させる方法を提供します。数学的な整列を使用して2つの形状間の最も自然な経路を見つけることで、回転グループを手動で定義したり、補間中に形状が縮小したり歪んだりする問題を回避できます。

How it works

このライブラリは、2D Procrustes analysis と極座標補間を使用して、形状間の最適な類似性を閉形式で解決します。これにより、2つのアイコンが回転によって合同であれば、遷移が歪んだモーフィングではなく回転として表示されるようになります。3つの動作モードをサポートしています：uncontrolled（プロップが変更されたときに自動的にアニメーション化）、controlled（ジェスチャーやスクロールのための明示的な進捗）、および imperative（ハンドルを使用してコード経由でアニメーションをトリガー）です。

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 専用のバインディングに加え、バニラ JS DOM ドライバーを提供します。
• Physics-Based: スムーズで自然な遷移のためにスプリング物理学を使用します。
• Zero Runtime Dependencies: コアロジックはどのフレームワークにも依存しません。
• Flexible Output Targets: インライン SVG、CSS マスク（maskTarget 経由）、または 2D Canvas（canvasTarget 経由）にレンダリングできます。
• Accessibility First: OS の reduced-motion 設定への組み込みサポートが含まれています。