İçeriğe geç
TR

9 ikon · MIT lisanslı

Animasyonlu geliştirici ikonları

Kod parantezleri, bir terminal, Git branch’leri, commit’ler, merge’ler ve pull request’ler; ayrıca sunucular ve veritabanları. Git ve altyapı terimlerinin arayüzün parçası olduğu geliştirici araçları, dokümantasyon siteleri ve durum sayfaları için tasarlandı.

9 ikondan 1 tanesi kesintisiz döngüde oynar ve 8 tanesi hover’da bir kez oynar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Geliştirme kategorisindeki tüm ikonlar

Nerede kullanılır

  • Geliştirici araçlarında pull request, merge ve branch durumu
  • Dokümantasyonda kod parçacığı ve embed düğmeleri
  • Landing page’lerde terminal ve CLI bölümleri
  • Durum sayfalarında sunucu ve veritabanı sağlığı
  • Command tuşuyla klavye kısayolu ipuçları

Etkileşime göre

  • Döngüsel animasyonlu ikonlar · 1

    Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Terminal.

  • Hover’da oynayan animasyonlu ikonlar · 8

    Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Hover’da tekrar) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: gitBranch yerine ikonun sayfasındaki adı yazın.

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

<AnimatedGitBranch size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Geliştirme kategorisinde hangi ikonlar var?

9 ikon: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server ve Terminal. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu geliştirici ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import gitBranch from 'react-useanimations/lib/gitBranch' satırını ekleyin ve <UseAnimations animation={gitBranch} size={32} /> ile render edin. İkon kendi etkileşimini (Hover’da tekrar) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/git-branch.json komutunu çalıştırın.

Bu animasyonlu geliştirici ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/git-branch.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.