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

Конвертер SVG в React/JSX превращает необработанные файлы SVG в повторно используемые компоненты React. Он создан для разработчиков, которым нужны более чистые компоненты иконок, фирменные знаки, иллюстрации продуктов и элементы дизайн-систем без необходимости вручную исправлять каждый атрибут SVG. Вставьте разметку SVG или загрузите файл .svg в кодировке UTF-8, выберите необходимые опции React, а затем скопируйте сгенерированный компонент в свой проект.

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

1. Вставьте или загрузите SVG. Вставьте полный файл SVG в редактор или загрузите файл .svg в кодировке UTF-8.
2. Назовите компонент. Введите имя компонента React в формате PascalCase, например AlertIcon или BrandMark.
3. Выберите опции React. Выберите TypeScript, forwardRef, React.memo, доступность заголовка, преобразование стилей, очистку и опции распределения пропсов.
4. Конвертируйте в JSX. Нажмите Конвертировать в React-компонент, чтобы сгенерировать готовый для копирования код JSX.
5. Проверить и скопировать. Перед копированием в проект React просмотрите сводку конвертации, предупреждения и сгенерированный код.

Что обрабатывает конвертер

Советы по созданию лучших компонентов React SVG

По возможности сохраняйте оригинальный viewBox, поскольку он управляет масштабированием SVG. Для систем иконок значения width="1em" и height="1em" позволяют иконке наследовать размер текста, при этом сохраняя возможность переопределять размеры с помощью пропсов. Используйте понятное имя компонента в формате PascalCase, делайте декоративные SVG доступными с помощью aria-hidden, когда это уместно, и используйте проп title для значимых иконок, передающих информацию.

FAQ

Что именно меняет этот конвертер SVG в React?

Он анализирует SVG XML и перезаписывает атрибуты SVG в дружественный для React JSX, включая className, атрибуты SVG в формате camelCase, необязательные объекты стилей, пропсы, forwardRef, доступность title и синтаксис экспорта.

Можно ли загрузить файл SVG?

Да. Вы можете загрузить файл .svg в кодировке UTF-8 или вставить разметку SVG. Загруженные файлы считываются как text и конвертируются в JSX на сервере.

Очищает ли он код SVG?

Очистка включена по умолчанию. Конвертер удаляет теги script, встроенные обработчики событий и ссылки javascript: так, что сгенерированный компонент безопаснее проверять перед использованием.

Зачем конвертировать атрибуты стилей в объекты?

React ожидает, что проп style будет объектом при написании JSX. Преобразование строк стилей в объекты обеспечивает чистую компиляцию вывода и сохраняет имена свойств CSS в формате camelCase.

Каков наилучший формат имени компонента?

Используйте PascalCase, например AlertIcon или BrandMark. Конвертер очищает недопустимые символы и гарантирует, что результат начинается с валидного идентификатора компонента React.