‏morphicons؛ تبدیل نرم هر آیکون SVG به آیکون دیگه

morphicons یه کتابخونهٔ کوچیکه برای انیمیشن تبدیل آیکون‌های SVG به همدیگه. تو معرفی خود پروژه اومده که آیکون‌های Lucide، Tabler، Heroicons، Iconoir و چند ست دیگه چون همه‌شون روی گرید ۲۴×۲۴ کشیده شدن، مستقیم به هم مورف می‌شن و برای ست‌هایی با گرید متفاوت هم تابع fitIcon هست.

نکتهٔ فنی اصلی، حل مسئلهٔ تشابه بهینهٔ دو شکل به شکل بسته‌ست (همون Procrustes دوبعدی). یعنی اگه دو آیکون زیر چرخش هم‌نهشت باشن، کتابخونه فقط می‌چرخونتشون و اگه نباشن، تو فریم هم‌ترازشده مورف می‌کنه. به گفتهٔ سازنده، همین باعث می‌شه کسی لازم نباشه دستی بگه کدوم جفت آیکون باید چرخشی رفتار کنه.

از نظر عدد و رقم، هستهٔ کتابخونه ۶.۵ کیلوبایت gzip شده‌ست، صفر وابستگی زمان اجرا داره، پلن هر مورف زیر یک میلی‌ثانیه حساب می‌شه و همهٔ آیکون‌های روی صفحه از یه requestAnimationFrame مشترک استفاده می‌کنن. فنرها هم قابل قطع‌شدن وسط کارن و گوشه‌ها موقع سکون تیز می‌مونن.

آیکون‌ها به‌جای کامپوننت، به‌عنوان داده مصرف می‌شن: یه اتریبیوت d یا فرمت IconNode لوسید. چون هسته اصلاً به DOM دست نمی‌زنه، ری‌اکت، ویو، اسولت، React Native، Next.js و جاوااسکریپت خالی همه به یه اندازه درایور درجه‌یک حساب می‌شن. کل کاری که تو ری‌اکت لازمه اینه:

import { MorphIcon } from "morphicons/react";
import { Menu, X } from "lucide"; // data, not components

<MorphIcon icon={open ? X : Menu} />

نه رَپری لازمه، نه key، نه تعریف جفت from/to و نه هیچ کانفیگ اضافه‌ای؛ کافیه آیکون‌ها رو عوض کنی.

نکات کلیدی:

• تبدیل نرم بین آیکون‌های استروک از ست‌های مختلف، چون همه روی گرید ۲۴×۲۴ هستن
• چرخش بهینه با حل بستهٔ Procrustes دوبعدی، بدون تعریف دستی گروه‌های چرخش
• هستهٔ ۶.۵ کیلوبایتی gzip، صفر وابستگی، پلن هر مورف زیر یک میلی‌ثانیه
• یک rAF مشترک برای همهٔ آیکون‌های صفحه و فنرهای قابل قطع‌شدن
• آیکون به‌عنوان داده (d یا IconNode)، بدون آداپتور برای هر کتابخونه