Реклама мешает? Идти Без рекламы Сегодня 

Конвертер SVG в компонент React JSX

РазработчикТекст

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Конвертер SVG в компонент React JSX

Вставьте исходный SVG-код и получите чистый React-функциональный компонент обратно. Инструмент применяет детерминированное преобразование в camelCase для каждого атрибута, удаляет неподходящие для JSX синтаксисы и обрамляет результат в готовый компонент для импорта — с опциональной типизацией, опционально forwardRef-обёрнутый и опционально изменяемый через свойства. Все работает локально в вашем браузере, поэтому ваши иконки и логотипы никогда не покидают ваш компьютер.

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

Вставьте полный <svg>…</svg> код в поле ввода.
Установите имя компонента (PascalCase, как ArrowRightIcon).
Переключение TypeScript, forwardRef, масштабируемые размеры свойств и расширение свойств для соответствия вашему проекту.
Скопируйте сгенерированный JSX или скачайте его как .tsx / .jsx файл.

Возможности

camelCase атрибуты – stroke-width превращается в strokeWidth, fill-rule превращается в fillRuleи так далее по всей спецификации SVG.
Обработка запрещённых слов – class переименовывается в className, for к htmlForи xlink:href к xlinkHref.
Парсер встроенных стилей – style="color: red; font-size: 12px" преобразуется в объект стилей JSX с ключами в camelCase.
Типизация в TypeScript – генерирует React.SVGProps<SVGSVGElement> типы при включении.
Режим масштабируемого иконки – заменяет жёстко заданные значения width/height на свойства с разумными значениями по умолчанию. width и height обёртка forwardRef
– генерирует компонент с для DevTools. React.forwardRef Распространение свойств displayName – передаёт произвольные свойства на корень
таким образом, потребители могут устанавливать , ARIA или обработчики событий. <svg> Онлайн-режим по умолчанию className– SVG никогда не покидает браузер; нет загрузок, нет обращений к серверу.
Почему React и JSX переписывают имена атрибутов SVG? JSX компилируется напрямую в доступ к свойствам объекта, и идентификаторы JavaScript не могут содержать дефисы. React, следовательно, стандартизирует использование имен в camelCase, которые соответствуют DOM IDL — например,

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

потому что DOM предоставляет это как

. Несколько атрибутов ( stroke-width превращается в strokeWidth ) сталкиваются с запрещёнными словами JavaScript и переименовываются ( element.strokeWidth) для избежания конфликтов с парсером.class, forЧто делает React.forwardRef для SVG-компонента?className, htmlForПо умолчанию функциональный компонент не может получать
от родителя — React игнорирует это молча.

предоставляет родительскому компоненту доступ к базовому DOM-узлу, что необходимо, когда требуется прямой доступ к отображаемому ref для управления фокусом, измерения или интеграции с библиотеками анимаций, такими как Framer Motion или GSAP. React.forwardRef Почему SVG-элементы следует встраивать как React-компоненты, а не как встроенные изображения? <svg> Встраивание SVG в JSX даёт полный контроль над деревом DOM: вы можете тематически настраивать линии и цвета через переменные CSS, анимировать отдельные пути, менять цвета в режиме выполнения и удалять неиспользуемые иконки на этапе сборки. В
поведение как элемент растрового типа — вы не можете настраивать его внутренности с помощью родительской страницы.

Почему ширина и высота сохраняются как свойства, а не как жёстко заданные атрибуты? <img src="icon.svg"> Жёсткие пиксельные размеры фиксируют иконку на одном размере и делают её трудной для встраивания в разметку. Выдача
в виде свойств (часто в паре с оригинальным

) позволяет потребителям отображать один и тот же компонент на 16 пикселей в панели и на 48 пикселей в баннере, при этом масштабирование вектора сохраняет чёткость на любом размере. width и height MyIcon viewBoxВставьте ваш ... код здесь...