Конвертер SVG в JSX

Что такое Конвертер SVG в JSX?

Конвертер SVG в JSX — это бесплатный браузерный инструмент, превращающий обычную SVG-разметку в корректный React JSX, который можно сразу вставить в компонент. React ожидает DOM-атрибуты в camelCase (strokeWidth, clipPath, fillRule), использует className вместо class и требует атрибут style как объект из свойств в camelCase, а не строку — этот инструмент исправляет всё это автоматически. Фронтенд-разработчики и дизайнеры пользуются им при экспорте иконок из Figma, Illustrator или набора иконок. Включите необязательную очистку, чтобы удалить комментарии, метаданные редактора и XML-объявления, и выберите, будет ли вывод встроенным JSX или функциональным, memo()- либо forwardRef-компонентом, типизированным через React.SVGProps.

Как пользоваться Конвертер SVG в JSX

1. Вставьте SVG-разметку в поле ввода или перетащите файл .svg в зону сброса.
2. Посмотрите преобразованный JSX в поле вывода — атрибуты приведены к camelCase, class стал className, встроенный style стал объектом style, а пустые теги самозакрыты.
3. Откройте «Настройки» и выберите «Вывод компонента»: встроенный JSX, функциональный компонент, memo()-компонент или forwardRef-компонент.
4. Задайте поле «Имя компонента», чтобы управлять именем в обёртке (например, MyIcon).
5. Включите «Пропсы TypeScript», чтобы типизировать компонент через React.SVGProps, или включите «Очистить SVG», чтобы сначала удалить комментарии и метаданные редактора.
6. Нажмите «Копировать», чтобы скопировать JSX, затем вставьте его в свой проект React или Next.js.

Примеры

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Часто задаваемые вопросы

Что конвертер меняет в моём SVG?

Он переименовывает атрибуты с дефисами и пространством имён в camelCase-форму React (stroke-width в strokeWidth, xlink:href в xlinkHref), превращает class в className, переписывает строку встроенного style в объект style JSX с ключами в camelCase и самозакрывает пустые элементы вроде path и rect, чтобы они были корректным JSX.

Как работают опции вывода компонента?

Выберите встроенный JSX, чтобы поместить разметку куда угодно, или оберните её как функциональный, memo()- или forwardRef-компонент с введённым вами именем компонента. forwardRef-компонент получает ref, прикреплённый к корневому svg. Включите «Пропсы TypeScript», чтобы типизировать любую обёртку через React.SVGProps и раскрыть {...props}.

Преобразует ли он встроенные стили?

Да. Атрибут style="fill:red;stroke-width:2" переписывается в объект style JSX вида style={{ fill: "red", strokeWidth: "2" }}, с именами свойств в camelCase и значениями как строками. CSS-переменные (--var) сохраняются как строковые ключи.

Что делает очистка в стиле SVGO?

Когда «Очистить SVG» включено, инструмент удаляет XML-объявления, DOCTYPE, комментарии, <metadata>, пространства имён редактора вроде inkscape: и sodipodi:, а также атрибут version у svg, затем сжимает пробелы — всё это до запуска преобразования в JSX.

Загружается ли мой SVG куда-либо?

Нет. Перетаскивание файла или вставка разметки запускают чистое преобразование строки целиком в вашем браузере, поэтому ваш SVG никогда не отправляется на сервер, и инструмент работает офлайн.