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
Abdelbaset_ibrahem أضف ردا

الفرق الرئيسي بين الأيقونات SVG وأيقونات الخط (i) هو أن الأيقونات SVG هي رسومات متجهية يمكن تكبيرها أو تصغيرها دون فقدان الجودة، بينما تعتبر أيقونات الخط خطوط يتم التعامل معها كالنص من قبل المتصفح ويمكن تنسيقها باستخدام CSS كما تقوم بتنسيق النصوص.

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

وبالنسبة للسؤال الثاني ليس هناك فرق بين الطريقتين إلا أن الطريقة الأولى تعمل من خلال ال html كما في react ولكن الطريقة الثانية تعمل مع أطر العمل مثل react ولا تعمل مع ملفات ال html

وبالطبع الطريقة الثانية أكثر مرونة وقابلية للتخصيص من الأولى

0
MohamedZaid999 أضف ردا

شكرا لك