13 ikon · licence MIT

Animované ikony komunikace

Telefony, chatovací bubliny, tlačítka pro odeslání, hlasová schránka a RSS. Ikony hovorů pokrývají příchozí, odchozí, zmeškané a přesměrované hovory, které výpis hovorů potřebuje, a ikona odeslání zprávu po kliknutí krátce „vypustí“.

Kategorie obsahuje 13 ikon: 1 se kliknutím přepíná mezi dvěma stavy, 3 se přehrají při každém kliknutí a 9 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 Komunikace

Kde je použít

Tlačítko odeslat v chatu a formulářích komentářů
Výpisy příchozích, odchozích a zmeškaných hovorů
Tlačítka pro kontakt a podporu
Spouštěče chatovacích widgetů
Zmínky a pole pro e-mailovou adresu

Podle interakce

Animované ikony přepínané kliknutím · 1
Kliknutím se přepíná mezi dvěma stavy; když uživatel preferuje omezený pohyb, přepne se okamžitě. Phone Off.
Animované ikony na kliknutí · 3
Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. Phone, Phone Call, Send.
Animované ikony s přehráním při hoveru · 9
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. At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail.

Přidejte ikonu do aplikace

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import send from 'react-useanimations/lib/send';

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

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

npx shadcn@latest add https://useanimations.com/r/send.json

import { AnimatedSend } from '@/components/animations/send';

<AnimatedSend 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 komunikace sada obsahuje?

13 ikon: At Sign, Message Circle, Message Square, Phone, Phone Call, Phone Forwarded, Phone Incoming, Phone Missed, Phone Off, Phone Outgoing, RSS, Send a 1 další. 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 komunikace v Reactu?

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

Můžu animované ikony komunikace 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/send.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.