Langsung ke konten
ID

9 ikon · Berlisensi MIT

Ikon animasi developer

Kurung kode, terminal, branch Git, commit, merge, dan pull request, plus server dan database. Dibuat untuk developer tools, situs dokumentasi, dan halaman status yang antarmukanya memang memakai istilah Git dan infrastruktur.

Dari 9 ikon di kategori ini, 1 berputar terus-menerus dan 8 diputar sekali saat di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon pengembangan

Tempat memakainya

  • Status pull request, merge, dan branch di developer tools
  • Tombol cuplikan kode dan embed di dokumentasi
  • Bagian terminal dan CLI di landing page
  • Kesehatan server dan database di halaman status
  • Petunjuk pintasan keyboard dengan tombol Command

Berdasarkan interaksi

  • Ikon animasi loop · 1

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Terminal.

  • Ikon animasi yang diputar saat hover · 8

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi putar sekali saat hover bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti gitBranch dengan nama yang tertera di halaman ikonnya.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import gitBranch from 'react-useanimations/lib/gitBranch';

<UseAnimations animation={gitBranch} size={32} />

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

npx shadcn@latest add https://useanimations.com/r/git-branch.json
import { AnimatedGitBranch } from '@/components/animations/git-branch';

<AnimatedGitBranch size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi developer apa saja yang tersedia?

9 ikon: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server, dan Terminal. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi developer ini di React?

Instal react-useanimations, tambahkan import gitBranch from 'react-useanimations/lib/gitBranch', lalu render <UseAnimations animation={gitBranch} size={32} />. Ikon menjalankan interaksi putar sekali saat hover bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/git-branch.json sebagai gantinya.

Bisakah ikon animasi developer ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/git-branch.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.