Morphicons: biến icon này thành icon khác thật mượt, không cần viết animation
Tóm tắt
Morphicons là thư viện giúp các icon SVG biến hình mượt mà sang nhau (ví dụ Menu → X, Play → Pause) bằng chuyển động mô phỏng lò xo. Nó dùng được với các bộ icon phổ biến như Lucide, Tabler, Heroicons và không kéo theo dependency nặng.
Vì sao đáng dùng?
Đổi icon bằng xoay hoặc fade trông “giật cục”. Morphing — nét vẽ uốn dần từ hình này sang hình kia — cho người dùng thấy rõ trạng thái vừa thay đổi, nhưng tự code thì khó vì hai icon thường có số điểm path khác nhau.
| Tính năng | Ý nghĩa |
|---|---|
| Spring physics | Chuyển động tự nhiên, có quán tính, thay vì easing tuyến tính. |
| Tương thích bộ icon phổ biến | Lucide, Tabler, Heroicons — không phải đổi tech stack. |
| Zero dependencies | Tự tính chuyển đổi hình dạng, không kéo thư viện runtime nặng. |
| Đa nền tảng | Có bản cho JavaScript thuần, React và Vue. |
Áp dụng thế nào?
- Dùng cho các nút đổi trạng thái: menu/đóng, play/pause, thêm/đã thêm, sáng/tối.
- Giữ thời lượng 150–300ms để hiệu ứng có ý nghĩa mà không làm chậm thao tác.
- Luôn đổi kèm
aria-label(vd. “Mở menu” → “Đóng menu”) vì người dùng trình đọc màn hình không thấy hiệu ứng.
Liên kết: morphicons (npm) · Demo trên CSS Script