Как пользоваться: SVG в JSX
- Вставьте SVG-код, откройте файл
.svgили нажмите Пример. - Укажите имя компонента и параметры: TypeScript, передачу props, удаление фиксированных размеров или замену цветов на
currentColor. - Проверьте очищенный предпросмотр, чтобы убедиться, что иконка выглядит правильно.
- Скопируйте компонент или скачайте его как файл
.jsx/.tsxи импортируйте в свой проект на React или Next.js.
Зачем конвертировать SVG для React
SVG — это XML, а JSX — это JavaScript, который лишь похож на HTML. Если вставить исходный SVG в React-компонент, обычно появляются предупреждения вида «Invalid DOM property stroke-width. Did you mean strokeWidth?» или ошибка сборки для атрибутов с пространствами имён, таких как xlink:href и inkscape:label. Этот конвертер переписывает разметку в корректный JSX и оборачивает её в компонент.
Что конвертируется
| SVG | JSX |
|---|---|
class="icon" | className="icon" |
stroke-width="2", fill-rule, stop-color | strokeWidth="2", fillRule, stopColor |
xlink:href="#a", xml:space | xlinkHref="#a", xmlSpace |
style="fill-opacity: .5; stroke-linecap: round" | style={{ fillOpacity: 0.5, strokeLinecap: 'round' }} |
data-* и aria-* | Остаются без изменений (React ожидает здесь дефисы) |
<?xml?>, <!DOCTYPE>, комментарии, <metadata>, служебные атрибуты редакторов (Inkscape, Sodipodi, Sketch) | Удаляются |
onclick и другие встроенные обработчики, <script> | Удаляются — строковые обработчики не поддерживаются в React |
Делаем иконки гибкими
Если включена опция Spread props, компонент заканчивается на {...props} в элементе <svg>, поэтому вы можете передавать className, width, aria-label или обработчики событий: <HeartIcon className="h-6 w-6" />. Опция Remove width/height позволяет задавать размер иконки через CSS (если атрибута viewBox нет, он добавляется на основе исходного размера). Colors → currentColor заменяет заливки и обводки, поэтому иконка наследует цвет текста — это идеально для наборов одноцветных иконок. Опция TypeScript типизирует props как SVGProps<SVGSVGElement>.
Доступность
Для декоративных иконок рядом с текстом добавьте aria-hidden="true". Для самостоятельных иконок с важным смыслом оставьте элемент <title> или передайте role="img" вместе с aria-label.
Конфиденциальность и безопасность
Конвертация полностью выполняется в вашем браузере — SVG никогда не покидает ваше устройство. Предпросмотр очищается: скрипты, foreignObject, встроенные обработчики событий и внешние ссылки удаляются до отрисовки. Работаете с процессом сборки? Такие инструменты, как SVGR, делают то же самое на этапе сборки; эта страница предназначена для быстрой конвертации отдельных иконок. Если же нужно использовать SVG как фоновое изображение в CSS, попробуйте SVG в CSS.
Также ищут как: svg в react, svg в tsx, react svg компонент, svgr онлайн, конвертер jsx, svg иконка react, classname, next.js svg.
Инструменты, которые хорошо сочетаются с SVG в JSX
- HTML в Markdown — Вставьте HTML или скопируйте текст прямо с веб-страницы, из Google Docs или письма, и получите аккуратный Markdown, который можно сразу использовать в README, вики или статическом сайте.
- JSON в TypeScript — Вставьте образец JSON, например ответ API или конфиг, и получите готовые интерфейсы TypeScript с вложенными типами, необязательными свойствами и union-типами.
- Изображение в Base64 — Превратите PNG, JPEG, SVG, WebP или GIF в Base64 Data URI с готовыми CSS и HTML или вставьте строку Base64, чтобы просмотреть и скачать изображение.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
Часто задаваемые вопросы
Почему React выдаёт предупреждение «Invalid DOM property class»?
class — зарезервированное слово в JavaScript, поэтому React использует className. То же относится к SVG-атрибутам с дефисами: их нужно записывать в camelCase (stroke-width → strokeWidth). Этот инструмент делает такие замены автоматически.Что использовать: xlinkHref или href?
href из SVG 2, а xlink:href считается устаревшим. React по-прежнему принимает xlinkHref, поэтому сконвертированный код продолжит работать; можно перейти на href, если не нужно поддерживать очень старые браузеры.Как поменять цвет иконки через CSS?
color родительского элемента, поэтому className="text-red-500" или style={{ color: "red" }} перекрасит её.Работает ли результат в Next.js и Vite?
Подходит ли это для React Native?
react-native-svg, который использует компоненты с заглавной буквы, например <Svg> и <Path>. Атрибуты в camelCase из этого инструмента — хорошая отправная точка, но элементы придётся переименовать.