SVG to React

Утилита для конвертации SVG-файлов в React-компоненты с типизацией TypeScript.

Возможности

• Конвертация SVG-файлов в React-компоненты с поддержкой TypeScript
• Автоматическое создание компонентов, типов и конфигурации
• Поддержка цветовых тем (замена цветов на currentColor)
• Опции для управления размерами и стилями SVG
• Удобное использование через командную строку

Установка

Глобально (рекомендуется)

npm install -g svg-to-react

Локально в проекте

npm install --save-dev svg-to-react

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

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

Конвертация всех SVG-файлов в указанной директории:

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:

svg-to-react --dir src/assets/icons

Обработка с сохранением оригинальных цветов:

svg-to-react --dir src/assets/icons --keep-original-colors

Обработка с удалением размеров (для гибкого масштабирования):

svg-to-react --dir src/assets/icons --remove-size

Структура создаваемых файлов

Утилита создает следующую структуру файлов:

icons/
├── types.ts             # Типы для всех иконок
├── config.ts            # Конфигурация и экспорт всех иконок
├── IconName1/           # Директория для каждой иконки
│   └── IconName1.tsx    # Компонент иконки
└── IconName2/
    └── IconName2.tsx

Пример использования в React-проекте

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.

Ошибка при создании типов

Если возникают ошибки при создании типов, убедитесь, что в проекте установлены все необходимые зависимости:

npm install --save-dev @types/react

Лицензия

MIT