SVG в JSX и Vue

Вставьте SVG, чтобы получить компонент React, React с TypeScript или Vue. Цвет иконки можно связать с цветом текста через currentColor, а размер — с размером шрифта.

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

Вставьте SVG или откройте файл — имя файла станет именем компонента (check-icon.svg → CheckIcon). Выберите React, React с TypeScript или Vue; результат появится сразу.

«Оптимизировать SVG перед преобразованием» убирает метаданные редакторов и лишние знаки в числах, сохраняя ID и title. Код обрабатывается в браузере и не отправляется на сервер.

Для вашего удобства рекомендую использовать полноэкранный режим.

Компонент

Преобразуем…

SVG

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле; имя файла станет именем компонента.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" class="icon">
  <title>Галочка</title>
  <g fill="none" stroke="#336699" stroke-width="2" stroke-linecap="round" style="opacity: 0.9; stroke-dasharray: 2 1">
    <path d="M5 12l4 4L19 6"/>
  </g>
</svg>

Компонент

Для преобразования включите JavaScript. Инструмент превращает SVG в компонент: stroke-widthстановится strokeWidth, class — className, а пропсы передаются на<svg>.


Что меняется в JSX


    
    
  • class → className, атрибуты с дефисом и двоеточием — в camelCase: stroke-width → strokeWidth, xml:space → xmlSpace. Атрибуты data-* и aria-* остаются как есть.
    • 
    
  • style="opacity: 0.9" → style={{ opacity: "0.9" }}, а CSS внутри <style> записывается шаблонной строкой.
    • 
    
  • xlink:href → href: в SVG 2 пространство имён xlink не нужно.
    • 
    
  • Текст записывается строковыми выражениями: значимые пробелы, кавычки и фигурные скобки сохраняются в React и Vue.
    • 
    
  • Скрипты и обработчики вроде onload удаляются — события подключают через пропсы.
    • 



В Vue атрибуты остаются в записи SVG: шаблоны Vue их понимают, а атрибуты компонента, например class и обработчики, автоматически переходят на корневой <svg>.


Цвет и размер иконки


С настройкой «Цвет через currentColor» цвета fill и stroke заменяются на currentColor — иконка берёт цвет текста и меняется вместе с ним при наведении. Значения none, ссылки на градиенты и цвета остановок градиента не трогаются. Многоцветная иконка при этом станет одноцветной: для неё настройку лучше выключить.


«Размер 1em» заменяет width и height на 1em: иконка становится размером с текст и масштабируется через font-size. viewBox сохраняется — без него размер не изменить.


JavaScript
import CheckIcon from './CheckIcon'

<button className="save">
  <CheckIcon aria-hidden="true" /> Сохранить
</button>




Вопросы и ответы


Как сделать иконку доступной?


Если иконка декоративная и рядом есть текст, передайте aria-hidden="true". Если иконка — единственное содержимое кнопки, дайте кнопке aria-label или оставьте в SVG элемент <title>.


Чем это отличается от SVGR?


SVGR — инструмент сборки, который делает то же при импорте файлов в проекте. Этот конвертер удобен, чтобы быстро получить компонент без настройки сборки или посмотреть, как SVG выглядит в JSX.


Почему id в нескольких иконках конфликтуют?


Если на странице несколько одинаковых встроенных SVG с градиентом, их id совпадут, и ссылки url(#id) могут указывать на чужой градиент. Дайте каждой иконке уникальные id или вынесите общие градиенты в один скрытый SVG.




Связанные инструменты


Уменьшить SVG отдельно можно в инструменте «Оптимизация SVG», а вставить его в стили — в «SVG в CSS».