Zolkit

SVG в компонент

Превратите любой SVG в готовый к production компонент React или Vue — с size prop, JSX-атрибутами и без зависимостей.

Фреймворк
Input
Результат

Конвертировать SVG в компоненты React или Vue мгновенно

Перенос SVG в React или Vue означает ручное переименование атрибутов, добавление size prop и очистку XML-преамбул. Конвертер SVG в компонент Zolkit делает всё это автоматически — вставьте SVG и получите чистый типизированный компонент за секунды.

Корректные JSX-атрибуты

Автоматически преобразует имена SVG-атрибутов в их JSX-эквиваленты: stroke-width → strokeWidth, fill-rule → fillRule, class → className и другие.

Мгновенная конвертация

Результат обновляется по мере ввода. Чистый JavaScript — без обращений к серверу, без тяжёлых библиотек, без WASM. Быстрая обработка в браузере.

Поддержка React и Vue

Генерируйте типизированный функциональный компонент React с SVGProps или Vue SFC с блоком script setup Composition API. Переключайтесь между фреймворками одним кликом.

100% приватно

SVG-код никогда не покидает ваш браузер. Всё конвертируется в памяти без сервера, логирования и сбора данных.

Бесплатно навсегда

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

Встроенный size prop

Каждый сгенерированный компонент принимает size prop (по умолчанию 24), управляющий шириной и высотой — легко использовать в любом масштабе в вашей дизайн-системе.

Как конвертировать SVG в компонент

  1. 1

    Вставьте SVG-код в панель ввода или перетащите .svg-файл на неё.

  2. 2

    Введите имя компонента и выберите целевой фреймворк — React (TSX) или Vue (SFC).

  3. 3

    Скопируйте сгенерированный код компонента или нажмите «Скачать» для сохранения как .tsx или .vue файл.

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

Какие имена SVG-атрибутов преобразуются для React?

Все дефисные SVG-атрибуты преобразуются в camelCase: stroke-width → strokeWidth, fill-rule → fillRule, clip-rule → clipRule, stroke-linecap → strokeLinecap и так далее. Особые случаи class → className и xlink:href → href также обрабатываются.

Почему в выводе Vue имена атрибутов не преобразуются?

Шаблоны Vue нативно поддерживают kebab-case имена атрибутов на SVG-элементах — браузер и компилятор Vue корректно обрабатывают stroke-width. Преобразование не нужно, поэтому вывод Vue ближе к исходному SVG.

Что делает size prop?

Сгенерированный компонент заменяет фиксированные значения width и height SVG на size prop (по умолчанию 24). Это позволяет использовать компонент в любом размере: <MyIcon size={32} /> или <MyIcon size={16} />.

Можно ли использовать React-компонент с пользовательскими SVG-атрибутами?

Да. React-компонент расширяет React.SVGProps<SVGSVGElement>, поэтому вы можете передавать любой допустимый SVG-атрибут как prop: fill, stroke, className, aria-label и другие. Спред {...props} на корневом <svg> передаёт их все.

Что происходит с SVG-элементами без дочерних, например <path>?

Распространённые пустые SVG-элементы (path, circle, rect, ellipse, line, stop и другие), записанные как <elem></elem> в источнике, автоматически преобразуются в самозакрывающуюся форму <elem />, требуемую JSX.

Работает ли инструмент с многоцветными или сложными SVG?

Да — конвертер обрабатывает все элементы и атрибуты SVG, а не только простые иконки с одним путём. Градиенты, фильтры, маски и группы сохраняются. Результат — полный SVG, обёрнутый в компонент, без упрощений.