Преобразование SVG в JSX

Преобразует исходную SVG-разметку в готовый к вставке React-компонент. Он переписывает атрибуты SVG в совместимые с React props в camelCase (class в className, stroke-width в strokeWidth, xlink:href в xlinkHref и многие другие), преобразует встроенные строки стилей в объекты стилей React, самозакрывает пустые элементы и фигуры SVG и удаляет пространство имён по умолчанию xmlns="http://www.w3.org/2000/svg".

1. Вставьте вашу SVG-разметку (должна содержать <svg> и </svg>) в поле ввода 2. Нажмите Prettify для автоматического форматирования отступов разметки перед преобразованием (необязательно) 3. Задайте Имя компонента (по умолчанию SvgComponent, только буквенно-цифровые символы и подчёркивание) 4. При необходимости включите директиву "use client" и/или хук useMemo 5. Нажмите Convert для создания JSX-компонента и скопируйте его в буфер обмена

Поле Имя компонента управляет экспортируемым идентификатором. Если флажок "use client" установлен, вывод начинается с "use client" на отдельной строке и экспортируется по умолчанию без props; в противном случае он экспортируется как именованный const, принимающий props и возвращающий svg. При включённом useMemo SVG-разметка оборачивается в useMemo(() => (...), []). Ввод должен содержать как <svg, так и </svg>, иначе преобразование отклоняется с ошибкой некорректного SVG.