Конвертер 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 ніколи не надсилається на сервер, і інструмент працює офлайн.