Анимированные иконки наведения

Три маленькие иконки с живой реакцией. Шеврон при наведении сдвигается вправо и дорисовывает себе хвост, превращаясь в стрелку. Три полоски меню по нажатию сходятся в крестик, а средняя гаснет.

Динамик по нажатию качается и перечёркивается косой линией, а повторное нажатие убирает черту. Иконки растягиваются на размер родителя и берут текущий цвет текста.

Вручную

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

import { ArrowRightIcon, MenuCloseIcon } from "@/components/animated-icons-hover/animated-icons-hover";

export function Nav() {
return (
  <div className="flex gap-2">
    <button className="size-10 rounded-lg bg-muted">
      <MenuCloseIcon />
    </button>
    <a className="size-10 rounded-lg bg-muted">
      <ArrowRightIcon />
    </a>
  </div>
);
}

Пропсы