Перейти к содержимому
RU

144 иконки · interaction="hover-replay"

Иконки с разовой анимацией при наведении

Эти иконки проигрываются один раз, когда на них наводится курсор, и доигрывают сами, поэтому быстрое движение мыши по панели инструментов не превращается в дёрганую анимацию. Так устроена большая часть набора: стрелки, файлы, устройства, погода и логотипы брендов, которые оживают при наведении.

Все иконки со взаимодействием «Повтор при наведении»

Как это работает

Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново.

Если включено уменьшение движения, наведение не запускает анимацию. Касание сенсорного экрана hover-анимацию не запускает, а фокус с клавиатуры запускает, если иконка находится внутри фокусируемого элемента. Всё это берёт на себя React-компонент — вам остаётся только выбрать иконку.

Где использовать

  • Списки возможностей и таблицы тарифов
  • Ссылки со стрелками и кнопки призыва к действию
  • Кнопки панелей инструментов в редакторах и дашбордах
  • Карточки в сетке лендинга
  • Ссылки в футере и контакты

По категориям

  • Навигация · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • Действия · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • Контент · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • Медиа · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • Редактирование текста · 2

    Hash, List

  • Связь и общение · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • Устройства · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • Погода · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • Карты и геолокация · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • Интернет-магазин · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • Графики · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • Разработка · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • Дизайн и макеты · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • Фигуры и математика · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • Соцсети · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • Другое · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

Использование в React

Перечисленные здесь иконки проигрывают это взаимодействие по умолчанию. Его можно задать и любой другой иконке — через проп interaction.

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

// Settings по умолчанию использует 'hover'
<UseAnimations animation={settings} interaction="hover-replay" size={32} />

Пусть на наведение реагирует вся карточка или ссылка, а не только иконка: с render-пропом события вешаются на ваш элемент, и фокус с клавиатуры тоже запускает анимацию.

import trendingUp from 'react-useanimations/lib/trendingUp';

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Рост за неделю
    </a>
  )}
/>

Все пропсы описаны в документации. Вне React иконки — это файлы Lottie JSON; на странице Lottie-иконки показано, как воссоздать взаимодействия с помощью lottie-web.

Частые вопросы

Какие иконки используют взаимодействие «Повтор при наведении»?

144 иконки: Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down и ещё 129. Разовая анимация при наведении обычно оживляет ссылки со стрелками, списки возможностей, кнопки панелей инструментов и карточки лендинга.

Что происходит, если у пользователя включено уменьшение движения?

Если включено уменьшение движения, наведение не запускает анимацию. React-компонент читает prefers-reduced-motion и реагирует на изменение настройки, так что писать для этого код не нужно.

Как изменить взаимодействие иконки?

Каждая иконка проигрывает то взаимодействие, для которого её нарисовали. Передайте interaction="hover-replay", чтобы так же вела себя любая другая иконка, или другое значение ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay'), чтобы сменить его. Воспроизведение настраивается пропсами autoplay, loop и speed.