Repolode
Предложить
Avijit07x

Avijit07x/animateicons

Библиотека из 1 170 анимированных SVG-иконок для React, Vue, Angular и обычного JavaScript: анимация запускается при наведении или по запросу.

Открыть на GitHubСайт
Звёзды
1,521
Форки
79
Открытые issues
0
Последний коммит
6 часов назад

Что это?

AnimateIcons — библиотека иконок со встроенной анимацией. В ней 1 170 SVG-иконок на основе наборов Lucide и Hugeicons, и по умолчанию каждая анимируется при наведении. Разработчики также могут запускать анимацию из кода.

Иконки принимают props для размера, цвета и длительности анимации, а также для её включения и отключения; для стилизации можно передать className. В React пакет подключается отдельно для каждого набора, например @animateicons/react/lucide или @animateicons/react/huge. Отдельные пакеты доступны для Vue 3 и Nuxt, Angular и обычного JavaScript; последний также работает с web components, Svelte, Solid и Astro. Анимация построена на библиотеке motion, которая входит в состав React-пакета.

Хук useIconHover запускает анимацию иконки, когда пользователь наводит курсор на окружающую её кнопку, ссылку или карточку либо нажимает на них. Команда CLI позволяет скопировать исходный код отдельной иконки в проект; в документации также описана интеграция с shadcn и MCP.

Ключевые возможности

  • 01Предоставляет 1 170 SVG-иконок с анимацией, которая по умолчанию запускается при наведении.
  • 02Поддерживает props для размера, цвета, длительности анимации, а также её включения и отключения.
  • 03Предлагает пакеты для React, Vue и Nuxt, Angular и обычного JavaScript.
  • 04Включает хук useIconHover для анимации иконок при наведении на окружающую их кнопку или карточку.
  • 05Позволяет скопировать исходный код отдельной иконки в проект с помощью команды CLI.

Сценарии использования

  • Добавление анимации в качестве отклика для кнопок, элементов навигации или колокольчиков уведомлений в веб-приложении на React.
  • Использование анимированных иконок на сайте Vue или Nuxt без написания кода анимации.
  • Копирование отдельной иконки в кодовую базу для последующей прямой настройки.

Быстрый старт

  1. 1

    Установите пакет React

    pnpm add @animateicons/react
  2. 2

    Импортируйте значок и отобразите его

    import { BellRingIcon } from "@animateicons/react/lucide";

Что важно знать

  • Формы значков основаны на Lucide и Hugeicons, поэтому применяются уведомления о сторонних компонентах.

В подборках

Фронтенд-фреймворки и UI-компоненты

Темы

#icons#animation#svg#react#vue#angular#motion#ui-components#animated-icons#framer-motion

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

Что такое animateicons?
Библиотека из 1 170 анимированных SVG-иконок для React, Vue, Angular и обычного JavaScript: анимация запускается при наведении или по запросу. AnimateIcons — библиотека иконок со встроенной анимацией. В ней 1 170 SVG-иконок на основе наборов Lucide и Hugeicons, и по умолчанию каждая анимируется при наведении. Разработчики также могут запускать анимацию из кода.
animateicons можно использовать бесплатно? Какая у него лицензия?
animateicons распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
animateicons всё ещё поддерживается?
Активно поддерживается. Последний коммит в animateicons — 7 нояб. 2026 г..
Для чего можно использовать animateicons?
Добавление анимации в качестве отклика для кнопок, элементов навигации или колокольчиков уведомлений в веб-приложении на React. Использование анимированных иконок на сайте Vue или Nuxt без написания кода анимации. Копирование отдельной иконки в кодовую базу для последующей прямой настройки.
Как установить animateicons?
Установите пакет React: pnpm add @animateicons/react Импортируйте значок и отобразите его: import { BellRingIcon } from "@animateicons/react/lucide";
Где скачать animateicons?
Исходный код и инструкции по установке — на GitHub: https://github.com/Avijit07x/animateicons

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты