كيفية إستخدام font awesome مع react؟

لايمكنك استدعاء أيقونات font-awesome بهذه الطريقة باستخدام ريكت.

فعند استخدامك لهذه المكتبة في تطبيق ريكت يجب عليك إحضار الأيقونات على شكل Component كما وعليك استدعاء الملفات الخاصة به من حزمة الـ node_modules.

فمثلًا يمكنك استدعاء الأيقونة التي ذكرت باستخدام هذه الطريقة.

أولًا عليك استدعاء المكون FontAwesomeIcon من خلال الكود التالي:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

ومن ثم يجب عليك أيضًا استدعاء الأيقونة التي ترغب من ملف الأيقونات فمثلًا لاستخدام الأيقونة search يمكنك جلبها من مجلد free-solid-svg-icons من خلال هذه الطريقة:

import { faSearch } from "@fortawesome/free-solid-svg-icons";

بالنسبة للأيقونة spinner فيمكنك البحث عليها داخل مجلدات fortawesome@ عليها.

ومن ثم يمكنك استدعاء هذا الـ component داخل الصفحة باستخدام هذه الطريقة:

<!-- ايقونة البحث  -->
<FontAwesomeIcon icon={faSearch} />

<!-- الايقونة التي تريد بعد استدعائها من ملفها الصحيح -->

<FontAwesomeIcon icon={faSpinner} />

بهذه الطريقة يمكنك استدعاء أيقونات هذه المكتبة باستخدام ريكت.