yoicon-library

YoIcon Library

Библиотека из 200 анимированных иконок на основе Lottie с прозрачным фоном и контурным стилем.

Установка

npm install yoicon-library
# или
yarn add yoicon-library

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

Импорт отдельных иконок

import { AddIcon, CheckIcon, HomeIcon } from 'yoicon-library';

function App() {
  return (
    <div>
      <AddIcon width={32} height={32} />
      <CheckIcon width={48} height={48} loop={false} />
      <HomeIcon width={24} height={24} autoplay={false} />
    </div>
  );
}

Использование базового компонента

import { LottieIcon } from 'yoicon-library';
import customAnimationData from './custom-animation.json';

function App() {
  return (
    <LottieIcon 
      animationData={customAnimationData}
      width={64}
      height={64}
      loop={true}
      autoplay={true}
    />
  );
}

Доступные иконки

Библиотека включает 200+ иконок:

• AbcIcon
• AddIcon
• AddBoxIcon
• AddCircleIcon
• AddTaskIcon
• AllDoneIcon
• AppsIcon
• ArrowBackIcon
• CheckIcon
• CloseIcon
• DeleteIcon
• DownloadIcon
• FavoriteIcon
• HomeIcon
• MenuIcon
• SearchIcon
• SettingsIcon
• StarIcon
• И многие другие...

Props

LottieIconProps

Prop	Тип	По умолчанию	Описание
animationData	any	-	JSON данные Lottie анимации
width	number | string	24	Ширина иконки
height	number | string	24	Высота иконки
loop	boolean	true	Зацикливать анимацию
autoplay	boolean	true	Автоматически запускать анимацию
className	string	-	CSS класс
style	React.CSSProperties	-	Inline стили

Особенности

• ✅ Прозрачный фон
• ✅ Контурный стиль (белые линии)
• ✅ Плавные анимации
• ✅ TypeScript поддержка
• ✅ Tree-shaking friendly
• ✅ Легковесная библиотека

Разработка

# Установка зависимостей
npm install

# Сборка
npm run build

Лицензия

MIT