21 иконка · interaction="hover"

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

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

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

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

Проигрывается вперёд на mouseenter и назад на mouseleave.

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

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

Пункты боковой панели и меню навигации
Кнопки удаления, которые приподнимают крышку ещё до клика
Ссылки на настройки и профиль
Кнопки увеличения и уменьшения масштаба
Ссылки на соцсети в футере

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

Действия · 11
Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out
Контент · 7
Archive, Copy, Mail, Share, User minus, User plus, User X
Соцсети · 3
Instagram, YouTube, YouTube V2

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

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

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

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

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

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

<UseAnimations
  animation={archive}
  render={(eventProps, animationProps) => (
    <a href="/archive" {...eventProps}>
      <span {...animationProps} /> В архив
    </a>
  )}
/>

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

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

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

21 иконка: Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out, Archive, Copy, Mail, Share и ещё 6. Анимацию при наведении обычно используют для пунктов навигации, кнопок удаления, настроек, управления масштабом и ссылок на соцсети.

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

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

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

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