Преобразовать SVG в компонент React

Вставьте SVG и получите готовый компонент React (.tsx) со всеми атрибутами в camelCase (className, strokeWidth...) и передачей пропса props.

Пример:

Имя компонента

Исходный SVG

Что именно делает это преобразование?

JSX (используемый в React) не принимает атрибуты HTML/SVG в kebab-case, такие как stroke-width или class: их нужно писать в camelCase (strokeWidth, className). Этот инструмент автоматически переписывает все атрибуты SVG по этому правилу и оборачивает результат в функциональный компонент на TypeScript, готовый к копированию в проект на React.

Принимает ли сгенерированный компонент собственные пропсы (цвет, размер)?

Да, компонент передаёт все полученные пропсы ({...props}) прямо в тег <svg>: вы можете передавать className, width, height, onClick и так далее из родительского компонента, как и для любого SVG-элемента.

Работает ли компонент в чистом JavaScript (без TypeScript)?

Сгенерированный файл написан на TypeScript (с типизацией пропсов), но достаточно удалить строку импорта типа и аннотацию : SVGProps<SVGSVGElement>, чтобы использовать его в обычном JavaScript-проекте.

100% локальная обработка: компонент генерируется целиком в вашем браузере, ваш SVG никогда не отправляется на сервер.