Does the converter run scripts or event handlers from my SVG?

No. Every input is sanitized first: script and foreignObject elements, on* event attributes, javascript: URLs, and external references are removed and listed. The preview shows only the sanitized markup as an image.

What is the difference between JSX and TSX output?

Both produce the same markup. TSX output with spread props imports the SVGProps type and types the props parameter as SVGProps , and the file downloads with a .tsx extension.

Which colors does the currentColor option replace?

Solid fill and stroke values in attributes or inline styles are replaced with currentColor. none, transparent, gradient or pattern references such as url(#id), and CSS variables are left unchanged.

Is the output optimized like SVGO?

No. The cleanup option removes comments and whitespace-only text between elements. Path data, precision, and element structure are not rewritten, so run a dedicated optimizer first if you need smaller paths.

SVG to JSX

Convert SVG markup into clean React JSX or TSX components

Исходный SVG

Перетащите файл .svg сюда

Файлы SVG до 5 МБ.

Также можно вставить из буфера обмена.

Параметры преобразования

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

PascalCase, например ArrowRightIcon.

Формат вывода

Обернуть в компонент React

Передавать props в <svg>

Удалить width и height

Использовать currentColor для fill и stroke

Дополнительные параметры

Убрать лишние пробелы

Удаляет комментарии и текст из одних пробелов между элементами. Это безопасная очистка, а не полноценный оптимизатор SVG.

Удалить комментарии

Сохранить title и атрибуты ARIA

Отключите для декоративных иконок: title, desc, role и атрибуты ARIA удаляются, добавляется aria-hidden.

Доступный заголовок (необязательно)

Заменяет корневой title и добавляет role="img".

Компонент React

Здесь появится сгенерированный компонент.

Очищенный предпросмотр

Вставьте разметку SVG или загрузите файл, чтобы увидеть предпросмотр.

SVG в изображениеКонвертируйте SVG в чёткие PNG, JPEG, WebP или AVIF любого размера Генератор блобовОрганичные SVG-блобы из воспроизводимого сида Генератор SVG-волнОдиночные и многослойные SVG-волны для разделителей с адаптивным выводом

Что делает SVG to JSX

SVG to JSX превращает разметку SVG в компонент React или обычный элемент JSX. Атрибуты переводятся в имена React (class → className, stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, xlink:href → xlinkHref), строки встроенных стилей становятся объектами style, а viewBox всегда сохраняется, чтобы иконка правильно масштабировалась.

Как пользоваться

1.Вставьте разметку SVG, перетащите или выберите файл .svg либо загрузите пример.
2.Проверьте очищенный предпросмотр и список удалённых небезопасных элементов.
3.Задайте имя компонента и выберите вывод JSX или TSX.
4.При необходимости включите обёртку, передачу props, удаление width/height и currentColor.
5.Скопируйте код или скачайте его как файл .jsx или .tsx.

Описание параметров

Передача props пробрасывает className, размер и обработчики событий из компонента в корневой <svg>; TSX добавляет тип SVGProps<SVGSVGElement>. Удаление width и height позволяет управлять размером через CSS и viewBox. currentColor заменяет сплошные цвета fill и stroke, чтобы иконка наследовала цвет текста; none, transparent, градиенты (url(...)) и переменные CSS не меняются. Очистка пробелов удаляет комментарии и текст из одних пробелов между элементами — это безопасная очистка, а не полноценный оптимизатор SVG. Для декоративных иконок отключите атрибуты доступности: title, desc, role и ARIA удаляются и добавляется aria-hidden. Для значимых иконок введите заголовок — будет добавлен role="img".

Безопасность и ограничения

Любой ввод очищается перед предпросмотром и преобразованием: <script>, <foreignObject>, обработчики событий вроде onclick, URL javascript:, ссылки на внешние изображения и ресурсы, а также неподдерживаемые элементы удаляются и перечисляются. Объявления DOCTYPE и XML-сущности отклоняются. Предпросмотр показывает только очищенную разметку как изображение, поэтому ничего из SVG не выполняется. Размер текста SVG ограничен 5 МБ. Неподдерживаемые элементы отбрасываются, поэтому при конвертации сложных иллюстраций сравните предпросмотр с оригиналом.

SVG to JSX

Связанные инструменты