0

ما الفرق بين كتابة الايقونات بهذه الطرق؟

ما الفرق بين كتابة الأيقونات بين <svg> وبين <i> مثل 

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
</svg>

<i class="fa-regular fa-sliders"></i>

وما الفرق بين كتابة الأيقونات بالطريقة التي في السؤال الأول وبين كتابتها عل شكل component في react مثل 

<FontAwesomeIcon icon="fa-regular fa-sliders" />

0
Adnane_Kadri أضف ردا

اضافة لما اشارت اليه التعليقات السابقة فإن عناصر i يتم توصيفها في الغالب عن طريق ملف تنسيقات css على عكس عناصر SVG التي يتم تمثيلها دون الحاجة الى الى ملف تنسيقات الا لضبط بعض التنسيقات البسيطة مثل العرض والارتفاع واللون وما الى ذلك، ولذلك نجد ان استعمال عناصر SVG اسرع وافضل آداءا بالمقارنة مع عناصر i فيما يخص التعامل مع الايقونات، وذلك لأن الاولى تتطلب ملف HTML الحاوي لها لتفسيرها أما الثانية فتتطلب ملف تنسيقات او خطوط مرفق في الغالب.

اما الطريقة الأخيرة فهي بشكل بسيط مكونات React يتم تصييرها في صفحة الويب بعد تحميلها وتفسيرها وتحميل ملف جافاسكربت المسؤول عن ذلك، وهي الأخرى عناصر i يتم تصييرها عن طريق الجافاسكربت.

0
MohamedZaid999 أضف ردا

شكرا لك

0
MohamedZaid999 أضف ردا

ولكن الأستاذ عبد الباسط في التعليق السابق يقول أن i أفضل في الأداء

تكون أيقونات SVG عادةً أكبر من أيقونات الخط، حتى عند ضغطها. . تحتوي أيقونات الخط على حجم ملف صغير وتخزين مؤقت، مما يمنحك دفعة في الأداء. يمكن أن تبطئ مشكلات تحميل الخط الأداء وتسبب فشلًا في بعض الأحيان.

هل هناك فرق ملحوظ في الأداء بينهما؟ خصوصا في حالة إذا ما كان التخصيص ليس كبيرًا

0
Abdelbaset_ibrahem أضف ردا

يعتمد ذلك على حسب المشروع فإذا كانت هناك العديد من الأيقونات فيمكنك دمج جميع الأيقونات في ملف واحد svg sprite وذلك يوفر لك العديد من طلبات ال http

0
MohamedZaid999 أضف ردا

شكرا