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

شكرا لك

0
osama_ziyadah

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

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

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

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

0
MohamedZaid999

شكرا لك

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

شكرا

0
Mustafa_Suleiman

يجب ملاحظة أن تطبيقات React تستخدم مكتبة FontAwesome لإدارة الأيقونات، والتي تستخدم أيقونات SVG عوضًا عن أيقونات الخط (i).

لذلك، يمكن استخدام الأيقونات SVG في React بنفس الطريقة التي تم استخدامها في السؤال الأول، ولكن يجب تثبيت مكتبة FontAwesome واستخدامها كمكون React.

على سبيل المثال، يمكن استخدام FontAwesome في React كالتالي:

  1. تثبيت مكتبة FontAwesome باستخدام npm:
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

2- استيراد الأيقونات ومكون FontAwesome في ملف React:

import { faSliders } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


function MyComponent() {
  return (
    <FontAwesomeIcon icon={faSliders} />
  )
}

المثال يستخدم FontAwesome ويستخدم أيقونة SVG (faSliders) عوضًا عن أيقونة الخط (i) التي تم استخدامها في السؤال الثاني.

وهناك العديد من المكتبات التي تستخدم في تطوير الويب وتوفر أيقونات جاهزة للاستخدام، وإليك بعض المكتبات الشهيرة :

  1. Font Awesome: تعتبر واحدة من أشهر مكتبات الأيقونات وتحتوي على أكثر من 7,000 أيقونة مجانية ومدفوعة.
  2. Material Icons: تقدمها شركة Google وتحتوي على أكثر من 1,000 أيقونة متعددة الأحجام والأشكال.
  3. Ionicons: تحتوي على أكثر من 1,200 أيقونة مجانية ومتعددة الأحجام والأشكال.
  4. Bootstrap Icons: تقدمها شركة Bootstrap وتحتوي على أكثر من 1,500 أيقونة مجانية ومتعددة الأحجام والأشكال.
  5. Feather Icons: تحتوي على أكثر من 700 أيقونة مجانية ومتعددة الأحجام والأشكال.
  6. Heroicons: تحتوي على أكثر من 400 أيقونة مجانية ومتعددة الأحجام والأشكال.
  7. Remix Icons: تحتوي على أكثر من 2,000 أيقونة مجانية ومتعددة الأحجام والأشكال.
0
MohamedZaid999

شكرا لك