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