Конвертер SVG в React
Превращайте SVG-файлы в компоненты React, которые можно вставить в проект. TypeScript или JavaScript, с пропсами size и title.
Как конвертировать SVG в React
Три шага, около десяти секунд. Ничего не загружается.
Перетащите SVG-файлы
Выберите TypeScript или JavaScript
Скопируйте или скачайте
Другие бесплатные инструменты
Конвертируйте, оптимизируйте и упаковывайте иконки прямо в браузере. Ничего не загружается.
- SVG в PNGЧёткие PNG любого размера, один файл или сотни.Открыть инструмент
- PNG в SVGТрассировка PNG или JPG в чистый вектор.Открыть инструмент
- PNG в ICOФайлы .ico для фавиконок с размерами от 16 до 256 px.Открыть инструмент
- Фавиконка и иконки приложенийНаборы для сайта, Chrome, iOS и Android.Открыть инструмент
- Оптимизатор SVGМеньшие SVG-файлы без видимых потерь.Открыть инструмент
- SVG-спрайтМного иконок в одном файле sprite.svg.Открыть инструмент
- Создатель стикеровФайлы стикеров для WhatsApp и Telegram.Открыть инструмент
- Аниматор иконокАнимированный SVG, Lottie, GIF, стикеры Telegram.Открыть инструмент
- SVG в JPGПлоские JPG-изображения любого размера.Открыть инструмент
- SVG в WebPКомпактные WebP из векторов.Открыть инструмент
- PNG в WebPСжатие картинок для веба.Открыть инструмент
- PNG в JPGМеньшие фото с белым или цветным фоном.Открыть инструмент
- JPG в PNGPNG без потерь из фото.Открыть инструмент
- WebP в PNGPNG-файлы, которые открываются везде.Открыть инструмент
- ICO в PNGДостаньте иконку из фавиконки.Открыть инструмент
- JPG в SVGТрассировка фото и логотипов в векторы.Открыть инструмент
- SVG в VueОднофайловые компоненты с пропом size.Открыть инструмент
- SVG в SvelteКомпоненты Svelte с пропом size.Открыть инструмент
- SVG в React NativeТипизированные компоненты react-native-svg.Открыть инструмент
- SVG в data URIВстроенный SVG для CSS и тегов img.Открыть инструмент
- SVG в PDFВекторные PDF, которые чётко печатаются.Открыть инструмент
- PNG в PDFОдна картинка на страницу, A4 или Letter.Открыть инструмент
- JPG в PDFФотографии как страницы PDF, готовые к печати.Открыть инструмент
- Lottie в GIFАнимированные GIF из файлов .json или .lottie.Открыть инструмент
- Текст в faviconИнициалы как favicon.ico и иконки приложения.Открыть инструмент
- Эмодзи в faviconЛюбой эмодзи как favicon в один клик.Открыть инструмент
SVG в React: вопросы
Остались сомнения? Прочитайте лицензию или напишите нам.
Одна функция на иконку, возвращающая SVG как JSX. Принимает size, title и любой SVG-проп, например className или onClick.
Одноцветные иконки используют currentColor, поэтому берут цвет окружающего текста. Задайте его через CSS или проп color.
Да. Компоненты — обычный React без зависимостей, поэтому работают в Next.js, Vite и Remix.
Id делаются уникальными через useId из React, поэтому несколько иконок с градиентами могут быть на одной странице без конфликтов.