Přejít na obsah
CS

10 ikon · licence MIT

Animované ikony designu a layoutu

Mřížky, sloupce, vrstvy, oříznutí, pero a kurzor pro editory a page buildery. Patří do panelů nástrojů, kde uživatel skládá obsah, přepíná mezi zobrazením mřížky a tabulky nebo vybírá kreslicí nástroj.

Kategorie obsahuje 10 ikon: 3 se přehrají při každém kliknutí a 7 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 Design a layout

Kde je použít

  • Přepínače zobrazení mřížky, seznamu a tabulky
  • Panely vrstev v grafických a prezentačních nástrojích
  • Nástroje oříznutí a výřezu v editorech obrázků
  • Page buildery a výběr rozvržení
  • Úchyty pro přesouvání tažením

Podle interakce

  • Animované ikony na kliknutí · 3

    Při každém kliknutí se jednou přehraje od začátku, pokud uživatel nepreferuje omezený pohyb. Crop, Mouse Pointer, Scissors.

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

    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. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

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ě: layers jen nahraďte názvem ze stránky požadované ikony.

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

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

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

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

<AnimatedLayers 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 designu a layoutu sada obsahuje?

10 ikon: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors a Table. 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 designu a layoutu v Reactu?

Nainstalujte react-useanimations, přidejte import layers from 'react-useanimations/lib/layers' a vykreslete <UseAnimations animation={layers} 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/layers.json.

Můžu animované ikony designu a layoutu 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/layers.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.