SVG в компонент React
Вставьте SVG — получите готовый к импорту компонент JSX или TSX.
или перетащите файл / вставьте код ниже
Компонент React
Результат появится здесь
Как это работает
- 1Вставьте код SVG или перетащите файл .svg.
- 2Включите вывод в TypeScript и задайте имя компонента.
- 3Скопируйте сгенерированный компонент в свой код.
Бесплатно, без регистрации и водяных знаков — всё работает локально в вашем браузере, поэтому файлы никогда не покидают компьютер.
Частые вопросы
Что именно конвертируется?
Атрибуты переводятся в camelCase (stroke-width → strokeWidth), class становится className, а остальные пропсы пробрасываются в корень, чтобы можно было передавать размер и цвет.
Стоит ли сначала оптимизировать SVG?
Да — сначала прогоните его через оптимизатор SVG, компонент выйдет меньше и чище. Два инструмента разделяет один клик.