SVG в React-компонент
Вставьте разметку SVG и получите готовый к импорту функциональный React-компонент с атрибутами в camelCase.
Как это работает
SVG разбирается собственным DOM-парсером браузера, поэтому он действительно
понимается как разметка, а не просто сопоставляется по шаблону. Каждое имя атрибута
преобразуется в его React/DOM-эквивалент по тому же соответствию, которое использует
сам React (stroke-width
→ strokeWidth, class → className,
xlink:href → xlinkHref и так далее), дерево
пересобирается в JSX и оборачивается в небольшой функциональный компонент. При включённой
опции «Принимать props» {...props} разворачивается на корневом элементе, так
что вызывающий код может передать width, className или обработчик
onClick обычным для React способом.
Разбор и преобразование происходят полностью в JavaScript этой страницы, работая с DOM, который браузер строит из вашего ввода. Ничего не загружается.
Частые вопросы
Что меняется при переходе от SVG к JSX?
Названия атрибутов переводятся в camelCase (stroke-width становится strokeWidth, fill-rule становится fillRule), class становится className, а самозакрывающиеся теги получают завершающий слэш, обязательный для JSX. Визуальный результат остаётся идентичным.
Можно ли управлять размером и цветом через props?
Включите «Принимать props», чтобы компонент разворачивал {...props} на корневом элементе <svg>, — тогда можно переопределить width, height, className или что угодно ещё оттуда, где вы используете компонент. Это стандартный паттерн для иконочных компонентов.
Отправляется ли мой SVG куда-либо?
Нет. Преобразование — это обычная работа со строками и атрибутами прямо в вашем браузере. Ничего не загружается.