Перейти к основному содержимому

SVG в React

Преобразуйте SVG в React, JSX или TSX.

Превратите файлы SVG в разметку JSX, готовый к импорту компонент React в TypeScript или JavaScript или модуль, который экспортирует SVG в виде строки. Конвертер исправляет атрибуты JSX, преобразует встроенные стили, сохраняет viewBox и поддерживает пакетную загрузку.

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

Редактирование значений по умолчанию для новых файлов

Результат

Готовый модуль: импорты, компонент и экспорт.

Модуль

Задаёт имя компонента, экспортируемой константы и создаваемого файла. По умолчанию берётся имя файла в PascalCase.

Язык

Оборачивает компонент, чтобы ref доходил до элемента svg.

Раскрывает React.SVGProps<SVGSVGElement> на корневом элементе svg, после атрибутов из файла.

Экспорт
Оптимизация

Запускает безопасный пресет оптимизатора перед созданием результата.

Убирает width и height у корневого элемента, чтобы размер компонента задавался из CSS или из переданных пропсов. viewBox сохраняется всегда.

Оформление

Заменяет каждую заливку и обводку, где назван цвет, чтобы графика наследовала свойство CSS color. fill="none" остаётся нетронутым.

Предпросмотр

Нет предпросмотра. Добавьте и выберите файлы, чтобы увидеть результат.

Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.

Что такое SVG?

SVG (Scalable Vector Graphics) - это XML-формат векторных изображений. Вместо пикселей SVG математически описывает фигуры, контуры, заливки и обводки, поэтому может отображаться в любом размере без потери качества.

SVG - стандартный векторный формат для веба. Все современные браузеры поддерживают его напрямую; оформление можно задавать через CSS, а анимацию - через JavaScript или SMIL. SVG часто компактен для логотипов, иконок и иллюстраций, однако сложные файлы могут быть большими.

Когда конвертировать SVG в React

Сборщики расходятся в том, что даёт импорт файла .svg: встроенную разметку, URL или вообще ничего без подходящего загрузчика. Компонент, который лежит в репозитории рядом с остальным кодом, снимает этот вопрос. Иконка превращается в обычный JSX: он проверяется типами, вычищается при tree-shaking и принимает пропсы, как любой другой компонент. Конвертация берёт на себя и то, что нужно JSX, но чего нет в сыром SVG: stroke-width становится strokeWidth, class становится className, xlink:href становится xlinkHref, а строка встроенных стилей превращается в объект. Включите «Использовать currentColor», и каждая заливка и обводка унаследует свойство CSS color, поэтому одного компонента хватит на все цвета, в которых вы его используете.

Как конвертировать SVG в React онлайн

  1. 1

    Перетащите SVG-файлы или нажмите ВЫБРАТЬ ФАЙЛЫ, чтобы добавить их в очередь. До 40 за раз.

  2. 2

    Выберите «JSX», «React Component» или «Строка SVG», затем задайте имя компонента, язык и нужен ли currentColor. Сгенерированный код обновляется, как только вы меняете параметры.

  3. 3

    Скопируйте код из предпросмотра или нажмите СОХРАНИТЬ ВСЁ, чтобы скачать по одному файлу на каждый SVG; когда в очереди больше одного файла, они упаковываются в один ZIP-архив.

Приватность: ваши файлы не покидают браузер

Преобразование выполняется локально в вашем браузере с использованием JavaScript и WebAssembly. Загрузка файлов или преобразование на стороне сервера не выполняются, поэтому добавляемые вами файлы остаются на вашем устройстве.

Локальная обработка помогает защитить конфиденциальные логотипы, внутренние документы и неопубликованные изображения клиентов. Страницы и код преобразования кэшируются по мере их использования, поэтому уже открытые вами инструменты могут продолжать работать без подключения к сети.

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

Чем отличаются три варианта результата?

«JSX» даёт голую разметку svg, чтобы вставить её внутрь компонента, который у вас уже есть. «React Component» даёт готовый модуль вместе с импортами и экспортом, который можно сразу сохранить как HomeIcon.tsx или HomeIcon.jsx. «Строка SVG (TypeScript)» представляет собой модуль .ts, который экспортирует разметку обычной строкой: для вставки в HTML, в шаблоны писем и во всё, что не связано с React.

Принимает ли компонент пропсы вроде className и onClick?

Да, пока включена «Передача пропсов». Компонент принимает React.SVGProps<SVGSVGElement> и раскрывает их на корневом элементе svg после атрибутов из файла, поэтому className, style, onClick, width и aria-label применяются и перекрывают то, что было записано в файле. Включите ещё и forwardRef, и ref будет доходить до самого элемента svg.

Что меняет параметр «Использовать currentColor»?

Каждая заливка и обводка, где назван конкретный цвет, заменяется на currentColor, поэтому графика рисуется тем цветом, к которому приводит свойство CSS color, и передача color="red" в компонент работает. fill="none" остаётся нетронутым и по-прежнему означает «не закрашивать». По умолчанию параметр выключен, потому что многоцветная иллюстрация при его включении сводится к одному цвету.