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

شكرا لك