smammar100/Iconimate

🎯 Icon React động với chuyển động "có lý do"

Mỗi chuyển động đều có mục đích, không có gì di chuyển ngoài lý do.

Iconimate là bộ icon React mở nguồn, dựa trên nền tảng glyph của Phosphor — Phosphor vẽ hình, motion do chúng tôi thêm vào, suy ra từ chính hình học của từng biểu tượng. Được tinh chỉnh để hiển thị rõ rệt ở kích thước 24px.

✨ Điểm nổi bật

• Xây dựng trên lưới 256 của Phosphor: toàn bộ bộ icon chia sẻ một ngôn ngữ trực quan nhất quán.
• Animate bằng motion: sử dụng dialect chung của springs và easing curves, mọi chuyển động đều tự nhiên.
• Aware hover & focus: hỗ trợ sẵn, kèm imperative handle cho thiết bị cảm ứng.
• Nhỏ gọn & dễ đọc: hover và focus motion ngắn gọn, phù hợp hiển thị ở 24px.
• Pixel-identical tại nghỉ: thay thế icon Phosphor tĩnh bằng Iconimate không thay đổi gì cho đến khi hover.
• Phân phối qua shadcn registry: lắp chỉ những icon cần thiết.
• Hỗ trợ React 19 & Motion 12: tương thích với công nghệ mới nhất.

💡 Vì sao đáng chú ý

Khác với hầu hết bộ icon khác chỉ cung cấp SVG tĩnh, Iconimate biến mỗi biểu tượng thành một "hiệu nghiệm nhỏ" — ví dụ như chuông rung lên, neo lắc, xe cứu thương chạy qua với đèn nhấp nháy. Chuyển động không phải ngẫu nhiên — mỗi góc độ và offset đều đo từ chính đường path của glyph. Điều này giúp icon vừa sống động, vừa giữ nguyên sự thống nhất về thiết kế.

Phù hợp cho các dự án React hiện đại muốn thêm cuộc sống vào giao diện mà không mất tính tĩnh lẽng của bộ icon.

#AnimatedIcons #React #FramerMotion #PhosphorIcons #OpenSource #TiniX