Легко конвертировать SVG в JSX

Превращает SVG-разметку в функциональный компонент React: SVGO оптимизирует SVG в браузере, затем SVGR преобразует его на сервере. Атрибуты переводятся в camelCase (stroke-width в strokeWidth), числовые размеры становятся числами, а {...props} разворачивается на корневом <svg>.

Превратить иконку, экспортированную из Figma или Illustrator, в React-компонент.

SVG

SVGO optimization is turned on. You can turn it off or configure it in settings. Conversion runs locally in your browser. Your code is not uploaded.

Original

Result

JSX

Когда пригодится

Превратить иконку, экспортированную из Figma или Illustrator, в React-компонент.
Проверить, как SVGR перепишет SVG, прежде чем добавлять SVGR в сборочный пайплайн.

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

Вставьте SVG-разметку или загрузите файл .svg; ввод, не являющийся валидным SVG, отклоняется с ошибкой.
Откройте настройки, чтобы отключить оптимизацию SVGO или переключить плагины, такие как remove title или merge paths; превью под редактором сравнивает исходный и оптимизированный SVG.
Скопируйте компонент и переименуйте SvgComponent; передавайте className, width или fill как props.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

React-компонент (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Подробности и ограничения

SVGO работает в Web Worker в вашем браузере; затем оптимизированный SVG отправляется на эндпоинт /api/svg-to-jsx этого сайта, где SVGR генерирует компонент. Не вставляйте конфиденциальную графику.

С настройками по умолчанию удаляются комментарии, <title>, <desc> и метаданные редактора, а данные путей сокращаются (M5.000 12.000 L19.000 12.000 становится M5 12h14). Отключите оптимизацию, чтобы преобразовать SVG в исходном виде.

Строки style становятся объектами style, а class — className.

Результат рассчитан на React DOM; для react-native-svg используйте SVG to React Native.

FAQ

Почему у корневого элемента остаются width и height?

В настройках SVGO плагин remove dimensions выключен, а SVGR использует параметры по умолчанию, поэтому размеры сохраняются как числа (width={24}). Переопределяйте их через props, так как {...props} идёт после них.

Позволит ли fill="currentColor" задавать цвет из CSS?

Да. currentColor сохраняется, поэтому иконка наследует CSS-цвет родителя. Жёстко заданные цвета внутри путей не заменяются.

Почему в моём компоненте нет <title>?

Плагин SVGO remove title включён по умолчанию. Отключите его в настройках или полностью выключите оптимизацию, если <title> нужен для доступности.

Есть ли вывод на TypeScript?

Нет. Страница выводит компонент на JavaScript без аннотаций типов.

Спецификации и справка

SVGR documentation

SVG