Семнадцать самостоятельных иконок-переключателей с микроанимацией. По нажатию каждая переходит во второе состояние и обратно: боковая панель расширяет полоску, скобки кода разъезжаются, замок открывается, корзина поднимает крышку, колокольчик качается, а самолётик улетает и возвращается.
Каждая иконка — отдельный компонент, растягивается на размер родителя и берёт цвет из текущего цвета текста, поэтому её легко положить в любую кнопку или плитку.
Скопируйте эти файлы в components/animated-icons-toggle/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { BellIcon, TrashIcon } from "@/components/animated-icons-toggle/animated-icons-toggle";
export function Toolbar() {
return (
<div className="flex gap-2">
<div className="size-12 rounded-xl bg-muted">
<BellIcon />
</div>
<div className="size-12 rounded-xl bg-muted">
<TrashIcon />
</div>
</div>
);
}className?Классы иконки (есть у всех иконок набора)
Тип string
copyText?CopyIcon: текст, который копируется в буфер
Тип string·По умолчанию "Скопировано из Astra"
color?SpinnerIcon: цвет лучей
Тип string·По умолчанию "white"
size?SpinnerIcon: размер, px
Тип number·По умолчанию 20