Вставка SVG напрямую в код часто создаёт несогласованные props и жёстко закодированные значения. Это руководство даёт вам чистый рабочий процесс для иконок React + TypeScript.
1) Нормализуйте входные данные SVG
- Очистите ненужные группы, метаданные и встроенные стили перед конвертацией.
- Сохраните viewBox, чтобы масштабирование компонента оставалось предсказуемым.
- Переименуйте ID и маски, чтобы избежать конфликтов при отображении нескольких иконок на одной странице.
2) Создайте компонент с безопасностью типов
- Используйте TypeScript props, расширяющие SVG props, для полной поддержки IntelliSense.
- По умолчанию width/height и позволяйте переопределять из родительского компонента.
- Заменяйте фиксированные заливки на currentColor, когда иконки должны наследовать цвет текста.
3) Интегрируйте в дизайн-систему
- Храните иконки в предсказуемой папке и экспортируйте из одного barrel-файла.
- Применяйте правила линтинга или тесты для блокировки недопустимых SVG-атрибутов в CI.
- Документируйте примеры использования для семантических токенов размера и меток aria.