Конвертер SVG в React + Tailwind — Бесплатно Онлайн, Без Загрузки
Конвертируйте SVG-разметку в чистый React-компонент с классами Tailwind CSS. Удаление пространств имён, конвертация в camelCase, инъекция className-пропа. Готовый TypeScript-код мгновенно.
Часто задаваемые вопросы
Какие преобразования применяет конвертер SVG в React?
Конвертер удаляет XML-декларации, DOCTYPE, HTML-комментарии и атрибуты редакторов (пространства имён Inkscape, Sodipodi, Figma). Преобразует все атрибуты SVG из kebab-case в camelCase (например, stroke-width → strokeWidth, fill-rule → fillRule), заменяет class на className и добавляет Tailwind className-проп (w-6 h-6 text-current) на корневой элемент SVG. Результат — TypeScript-совместимый React-компонент.
Можно ли настроить имя компонента и классы Tailwind?
Да. Введите нужное имя в поле «Component name» — оно автоматически конвертируется в PascalCase. Корневой className по умолчанию «w-6 h-6 text-current» передаётся как проп, поэтому вызывающий код может его переопределить: <MyIcon className="w-12 h-12 text-blue-500" />. Spread ...props передаёт дополнительные SVG-атрибуты.
Справляется ли конвертер со сложными SVG с градиентами, масками или clip-paths?
Да. Конвертер обрабатывает все дочерние SVG-элементы и атрибуты — градиенты, маски, определения фильтров и clip-paths. Имена атрибутов с дефисами конвертируются в camelCase согласно спецификации JSX React. SVG-элементы <defs>, <linearGradient>, <mask> и <clipPath> сохраняются как есть.