الصق SVG مباشرة في الكود يؤدي غالبًا إلى سمات غير متسقة وقيم مشفرة. يمنحك هذا الدليل سير عمل أيقونات React + TypeScript نظيفًا.
1) تسوية إدخال SVG
- نظف المجموعات غير الضرورية والبيانات الوصفية والأنماط المضمنة قبل التحويل.
- حافظ على viewBox حتى يبقى تحجيم المكون قابلًا للتنبؤ.
- أعد تسمية المعرفات والأقنعة لتجنب التعارض عند عرض أيقونات متعددة على صفحة واحدة.
2) إنشاء مكون آمن النوع
- استخدم سمات TypeScript تمتد سمات SVG للدعم الكامل لـ IntelliSense.
- عيّن width وheight افتراضيين مع السماح بالتجاوز من المكوّن الأب.
- استبدل التعبئات الثابتة بـ currentColor عندما يجب أن ترث الأيقونات لون النص.
3) التكامل في نظام التصميم
- خزّن الأيقونات في مجلد واضح وصدّرها من ملف barrel واحد.
- تطبيق قواعد lint أو اختبارات لمنع سمات SVG غير الصالحة في CI.
- توثيق أمثلة الاستخدام للرموز الحجمية الدلالية وتسميات aria.