Конвертер SVG в React JSX / TSX

Как сделать значок частью текста

Компонент значка проще всего использовать повторно, если он получает цвет и размер из места размещения. Замените жёстко заданные цвета fill или stroke на currentColor, чтобы значок наследовал цвет окружающего текста, и удалите width и height, сохранив viewBox, чтобы размер задавался через CSS или className. Перед этим пропустите файл через очиститель SVG, чтобы удалить метаданные редактора, которые иначе попадут в ваш bundle.

ID, стили и доступность

Градиенты, маски и контуры обрезки указываются через id. Если отрисовать один и тот же компонент дважды, на странице появятся дублирующиеся ID, и второй экземпляр может ссылаться на градиент первого. Если значок их использует, создавайте уникальные ID с помощью React useId.

Элемент <style> внутри SVG нарушает работу JSX, потому что его фигурные скобки воспринимаются как выражения; перенесите эти правила в атрибуты или таблицу стилей. Для декоративного значка добавьте aria-hidden="true", а для значка со смысловой нагрузкой — role="img" и <title>.

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

1. Вставьте исходную разметку SVG.
2. Настройте имя компонента, интерфейсы TypeScript и передачу пропсов.
3. Скопируйте готовый код компонента React.

Конфиденциальность и ограничения

Преобразование разметки выполняется исключительно в JavaScript на стороне клиента.