İçeriğe geç
TR

8 ikon · MIT lisanslı

Animasyonlu şekil ve matematik ikonları

Daireler, kareler, üçgenler, altıgenler, bir sekizgen ve bölme işaretleri. Çizim uygulamalarında şekil aracı, hesap makinesinde operatör ya da diyagramlarda ve onboarding adımlarında nötr işaret olarak kullanın.

8 ikonun tamamı 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.

Şekiller ve matematik kategorisindeki tüm ikonlar

Nerede kullanılır

  • Beyaz tahta ve çizim uygulamalarında şekil araçları
  • Hesap makinesi ve formül editörü operatörleri
  • Diyagramlarda madde ve adım işaretleri
  • Quiz ve oyun arayüzleri

Etkileşime göre

  • 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. Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle.

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: hexagon yerine ikonun sayfasındaki adı yazın.

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

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

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

npx shadcn@latest add https://useanimations.com/r/hexagon.json
import { AnimatedHexagon } from '@/components/animations/hexagon';

<AnimatedHexagon 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

Şekiller ve matematik kategorisinde hangi ikonlar var?

8 ikon: Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square ve Triangle. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu şekil ve matematik ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import hexagon from 'react-useanimations/lib/hexagon' satırını ekleyin ve <UseAnimations animation={hexagon} 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/hexagon.json komutunu çalıştırın.

Bu animasyonlu şekil ve matematik 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/hexagon.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.