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

Adam Ebrahim · 1 مارس 2021

أريد تثبيت أيقونات font awesome في مشروع رياكت بطريقة صحيحة من خلال npm، كنت أستهدم طريقة CDN مع المشاريع العادية ولكن لا أعرف كيف أستخدم npm لتثبيت font-awesome.

حاولت تثبيتها ولكن عندما استهدم الكود التالي لا تظهر على الإطلاق:

<i class="fa fa-spinner fa-spin">

Abdulhamid Hamsho2 · 1 مارس 2021

لايمكنك استدعاء أيقونات 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} />