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

أيضاً هناك إختلاف في الإستخدام من ناحية الإستخدام مثلاً تختلف الأيقونات التي نستخدم فيها "SVG" عن استخدام "i" في الغرض الذي تستخدمان لأجله وكيفية تمثيل الأيقونات.

نستخدم "SVG" لتمثيل رسوميات متجهة قابلة للتغيير في الحجم والتي يمكن تحريرها بشكل مرن، كما نستخدم "SVG" بشكل أساسي في تصميم صفحات الويب والتطبيقات الإلكترونية لإنشاء أيقونات ورسوميات أخرى.

بينما نستخدم الوسم "i" لتمثيل النصوص التي تحتوي على رموز أيقونية أو رموز تحذيرية أو رموز أخرى ذات معنى خاص. وعادة ما تستخدم "i" في تصميم صفحات الويب لتوضيح معاني مختلفة، مثل إظهار رموز أيقونية في عناوين صفحة الويب أو لإظهار رموز التحذير في النص.

أما بخصوص السؤال الثاني نلاحظ عند كتابة الأيقونات بالطريقة التي في السؤال الأول، يتم إدراج رمز HTML أو SVG مباشرة في ملف HTML أو CSS الخاص بالصفحة. وعند الرغبة في تغيير شكل الأيقونة أو إضافة خصائص إليها، يتم استخدام CSS أو JavaScript لتحديد الأسلوب الجديد ، بينما عند كتابة الأيقونات على شكل component في React، يتم إنشاء component جديدة لتمثيل الأيقونة، ويتم تحديد شكل الأيقونة وخصائصها داخل ملف JavaScript أو TypeScript. ويمكن استخدام هذه الأيقونات في جميع أجزاء تطبيق React، ويمكن تعديلها وإعادة استخدامها بسهولة.

0
MohamedZaid999 أضف ردا

شكرا لك