Об этом инструменте
Инструмент SVG в JSX-компонент преобразует сырую разметку SVG в чистый React-компонент, как это делает SVGR, но целиком в вашем браузере, без загрузки на сервер. Вставьте иконку, экспортированную из дизайн-инструмента, и получите компонент, который можно импортировать и стилизовать. Он разбирает SVG через DOMParser и сообщает понятную ошибку, если разметка некорректна.
Каждый дефисный или пространственно-именованный атрибут SVG приводится к своему имени в React — stroke-width в strokeWidth, fill-rule в fillRule, clip-path в clipPath, stop-color в stopColor, xlink:href в xlinkHref, xmlns:xlink в xmlnsXlink — тогда как атрибуты data-* и aria-* остаются как есть. Инлайн-строки стилей становятся объектами style, пустые элементы вроде path и circle самозакрываются, а пропсы пробрасываются на корневой <svg {...props}>, чтобы компонент оставался настраиваемым. Опциональные переключатели позволяют заменить жёстко заданные значения fill и stroke на currentColor (чтобы иконка наследовала цвет текста), убрать width и height, чтобы она масштабировалась под свой контейнер, и обернуть компонент в forwardRef, чтобы открыть доступ к нижележащему узлу <svg>.
Выберите вывод на JavaScript или TypeScript: вариант TypeScript типизирует пропсы как React.SVGProps<SVGSVGElement>, а при включённом forwardRef использует forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Компонент выдаётся как экспортируемая стрелочная функция (export const Icon = (props) => (...)) с выбранным вами именем и отступом, готовая к вставке в модуль иконок.