Biến đổi mọi icon SVG mượt mà nhờ toán lò xo

Một thư viện siêu nhẹ vừa giúp việc chuyển cảnh icon SVG trở nên mượt và dễ không tưởng.

Lập trình viên Guillermo López vừa ra mắt morphicons, một công cụ mã nguồn mở giúp biến đổi (morph) bất kỳ icon dạng nét nào sang icon khác bằng vật lý lò xo (spring physics). Dự án đã đạt 705 sao trên GitHub ngay trong tuần đầu tiên. Thay vì bắt bạn tự căn chỉnh nhóm xoay hay tạo riêng từng cặp hiệu ứng, nó dùng thuật toán căn chỉnh 2D Procrustes để tự tính góc xoay tự động.

Vì sao nó đáng chú ý: Chuyển đổi icon kiểu truyền thống thường khiến hình ảnh bị co rúm hoặc méo mó kỳ cục lúc đang chuyển cảnh, trừ khi bạn ngồi chỉnh tay từng cặp một. morphicons xử lý xong bài toán hình học này theo thời gian thực, không phụ thuộc thư viện ngoài (zero runtime dependencies) và chỉ nặng tầm 7 KB gzipped. Nó chạy tốt trên React, Vue, Svelte lẫn React Native.

Tóm lại là: bạn chỉ cần truyền icon đích vào một component duy nhất, phần còn lại cứ để nó lo. Thư viện này ăn rơ tốt với các bộ icon phổ biến như Lucide, Tabler hay Heroicons, hỗ trợ render phía server mượt mà và tự động tuân thủ cài đặt giảm chuyển động của người dùng. Bạn có thể cài ngay bằng bun add morphicons hoặc npm install morphicons.

Tạm biệt những ngày tháng ngồi code tay hiệu ứng cho nút menu đổi thành nút đóng.