npm package: @ozzzpo/svg-to-react
Description: package that converts SVGs to React components
Author: @ozzzpo
Latest version: 1.0.0

# SVG to React

Утилита для конвертации SVG-файлов в React-компоненты с типизацией TypeScript.

## Возможности

- Конвертация SVG-файлов в React-компоненты с поддержкой TypeScript
- Автоматическое создание компонентов, типов и конфигурации
- Поддержка цветовых тем (замена цветов на currentColor)
- Опции для управления размерами и стилями SVG
- Удобное использование через командную строку

## Установка

### Глобально (рекомендуется)

```bash
npm install -g svg-to-react
```

### Локально в проекте

```bash
npm install --save-dev svg-to-react
```

## Использование

### Базовое использование

Конвертация всех SVG-файлов в указанной директории:

```bash
svg-to-react --dir путь/к/директории/с/svg
```

### Опции командной строки

| Опция                   | Описание                                            | По умолчанию                 |
|-------------------------|-----------------------------------------------------|------------------------------|
| `-d, --dir <path>`      | Путь к директории с SVG-файлами                     | `./icons` или из `.env`      |
| `-n, --name <name>`     | Имя компонента (опционально)                        | Имя файла (в PascalCase)     |
| `--remove-size`         | Удалить атрибуты width и height                     | `false`                      |
| `--keep-original-colors` | Сохранить оригинальные цвета SVG                    | `false` (использует currentColor) |

### Примеры

#### Обработка всех SVG в директории `src/assets/icons`:

```bash
svg-to-react --dir src/assets/icons
```

#### Обработка с сохранением оригинальных цветов:

```bash
svg-to-react --dir src/assets/icons --keep-original-colors
```

#### Обработка с удалением размеров (для гибкого масштабирования):

```bash
svg-to-react --dir src/assets/icons --remove-size
```

## Структура создаваемых файлов

Утилита создает следующую структуру файлов:

```
icons/
├── types.ts             # Типы для всех иконок
├── config.ts            # Конфигурация и экспорт всех иконок
├── IconName1/           # Директория для каждой иконки
│   └── IconName1.tsx    # Компонент иконки
└── IconName2/
    └── IconName2.tsx
```

### Пример использования в React-проекте

```tsx
import React from 'react';
import { IconType } from './icons/types';
import { iconComponents } from './icons/config';

const IconExample: React.FC = () => {
  // Используем компонент напрямую
  const { Menu } = iconComponents;
  
  return (
    <div>
      <h1>Иконки</h1>
      
      {/* Через компонент */}
      <Menu size={24} color="red" />
      
      {/* Через тип */}
      {iconComponents[IconType.menu]({ size: 32, color: "blue" })}
    </div>
  );
};

export default IconExample;
```

## Настройка через .env

Можно настроить директорию по умолчанию через файл `.env`:

```
ICONS_DIR=путь/к/директории/с/иконками
```

## Возможные проблемы и решения

### SVG не корректно преобразуется

Убедитесь, что SVG файл правильно форматирован. Некоторые редакторы могут добавлять лишние атрибуты или метаданные.

Решение: Очистите SVG перед конвертацией с помощью инструментов типа SVGO.

### Ошибка при создании типов

Если возникают ошибки при создании типов, убедитесь, что в проекте установлены все необходимые зависимости:

```bash
npm install --save-dev @types/react
```

## Лицензия

MIT