Přejít na obsah
CS

9 ikon · licence MIT

Animované ikony pro vývojáře

Závorky kódu, terminál, větve v Gitu, commity, merge a pull requesty a k tomu servery a databáze. Vytvořené pro vývojářské nástroje, dokumentace a stavové stránky, kde jsou pojmy z Gitu a infrastruktury součástí rozhraní.

Kategorie obsahuje 9 ikon: 1 se přehrává ve smyčce a 8 se při najetí myší jednou přehraje. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Vývoj

Kde je použít

  • Stav pull requestů, merge a větví ve vývojářských nástrojích
  • Tlačítka pro úryvky kódu a embed v dokumentaci
  • Sekce o terminálu a CLI na landing pages
  • Stav serverů a databází na stavových stránkách
  • Nápovědy klávesových zkratek s klávesou Command

Podle interakce

  • Animované ikony ve smyčce · 1

    Přehrává se nepřetržitě; když uživatel preferuje omezený pohyb, zůstane na statickém prvním snímku. Terminal.

  • Animované ikony s přehráním při hoveru · 8

    Při najetí myší (mouseenter) se jednou přehraje, pokud uživatel nepreferuje omezený pohyb. Odjetí myši ji nezastaví a nové najetí během přehrávání ji nespustí znovu. Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server.

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „přehrání při hoveru“ přehraje sama. Všechny ikony v této kategorii fungují stejně: gitBranch jen nahraďte názvem ze stránky požadované ikony.

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

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

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

<AnimatedGitBranch size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony pro vývojáře sada obsahuje?

9 ikon: Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server a Terminal. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony pro vývojáře v Reactu?

Nainstalujte react-useanimations, přidejte import gitBranch from 'react-useanimations/lib/gitBranch' a vykreslete <UseAnimations animation={gitBranch} size={32} />. Ikona přehraje svou interakci „přehrání při hoveru“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/git-branch.json.

Můžu animované ikony pro vývojáře použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/git-branch.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.