كيفية استخدام react-icons لإضافة Font Awesome في تطبيق React

مقدمة: لماذا تحتاج الأيقونات في تطبيقات React؟

عند تطوير واجهات المستخدم باستخدام React، تصبح الأيقونات جزءاً أساسياً من تجربة الاستخدام. فهي تساعد على توضيح الوظائف، وتسهيل التنقل، وإبراز العناصر المهمة داخل التطبيق دون الحاجة إلى نصوص طويلة. ومن بين أشهر مكتبات الأيقونات المتاحة، تبرز Font Awesome بوصفها خياراً واسع الانتشار ومرناً في الاستخدام.

لكن بدلاً من تثبيت حزم متعددة وربطها يدوياً داخل المشروع، يمكن الاعتماد على مكتبة react-icons التي توفّر طريقة مبسطة وفعالة لاستيراد الأيقونات واستخدامها كمكوّنات جاهزة داخل React.

ما الذي ستتعلمه في هذا الدليل؟

• ما هي مكتبة react-icons؟
• ما المقصود بأيقونات Font Awesome؟
• كيفية إعداد بيئة العمل لمشروع React.
• طريقة تثبيت react-icons.
• كيفية استيراد الأيقونات واستخدامها داخل التطبيق.
• كيفية عرض أكثر من أيقونة من نفس المكتبة أو من مكتبات مختلفة.
• طرق تنسيق الأيقونات داخل React.
• أكواد الاستيراد الخاصة بمكتبات الأيقونات المختلفة.

ما هي مكتبة react-icons؟

مكتبة react-icons هي مكتبة خفيفة تتيح لك استخدام عدد كبير من مكتبات الأيقونات الشهيرة داخل تطبيقات React عبر واجهة موحدة. بدلاً من التعامل مع ملفات أيقونات منفصلة أو حزم معقدة، يمكنك استيراد الأيقونات التي تحتاجها فقط واستخدامها مباشرة كمكوّنات.

من أبرز مزايا هذه المكتبة:

• سهولة الاستيراد والاستخدام داخل مكوّنات React.
• إمكانية تنسيق الأيقونات بنفس أسلوب تنسيق العناصر الأخرى.
• استيراد الأيقونات المستخدمة فقط، مما يساعد على تقليل الحمل غير الضروري.
• دعم عدد كبير من المكتبات مثل Font Awesome وBootstrap Icons وMaterial Design Icons وغيرها.

ما هي أيقونات Font Awesome؟

تُعد Font Awesome واحدة من أشهر مكتبات الأيقونات في تطوير الويب. وهي توفّر رسومات متجهية SVG قابلة للتكبير والتصغير وتغيير الألوان دون فقدان الجودة. لهذا السبب تُستخدم بكثرة في أزرار الواجهة، القوائم، بطاقات الخدمات، ونماذج الاستخدام المختلفة.

في المشاريع التقليدية، قد يتطلب استخدام Font Awesome داخل React تثبيت عدة حزم وإعدادات إضافية. أما مع react-icons، فالأمر يصبح أبسط بكثير، إذ يمكنك استيراد الأيقونة المطلوبة مباشرة من خلال سطر واحد فقط.

كيفية إعداد بيئة التطوير لمشروع React

إذا لم تكن قد أنشأت مشروع React بعد، يمكنك إعداد البيئة بسهولة عبر الخطوات التالية:

1. ثبّت Node.js على جهازك إذا لم يكن مثبتاً مسبقاً.
2. افتح نافذة الطرفية Terminal.
3. نفّذ الأمر التالي لإنشاء تطبيق React:

npm i -g create-react-app fonts-app

بعد ذلك انتقل إلى مجلد المشروع:

cd fonts-app/

ثم شغّل بيئة التطوير المحلية:

npm start

الآن افتح مجلد src من داخل المحرر، ثم عدّل الملف App.js أو أنشئ مكوّناً جديداً حسب بنية مشروعك.

كيفية تثبيت react-icons في React

لتثبيت المكتبة داخل المشروع، افتح الطرفية من داخل مجلد المشروع ونفّذ الأمر التالي:

npm install react-icons

بعد اكتمال التثبيت، تصبح المكتبة جاهزة للاستخدام مباشرة.

كيفية استيراد أيقونات Font Awesome باستخدام react-icons

لكل مكتبة أيقونات داخل react-icons صيغة استيراد خاصة بها. بالنسبة إلى Font Awesome، يكون الاستيراد من المسار التالي:

import { IconName } from "react-icons/fa";

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

كيفية استخدام الأيقونات داخل تطبيق React

بعد اختيار الأيقونة من مكتبة Font Awesome، قم باستيرادها داخل الملف ثم اعرضها كمكوّن React عادي.

مثال عملي على استخدام أيقونة واحدة

import React, { Component } from 'react' ;
import { FaHeart } from "react-icons/fa" ;

class Like extends Component {
  render() {
    return <FaHeart />
  }
}

export default Like;

بمجرد إضافة <FaHeart /> داخل دالة العرض، ستظهر الأيقونة على الصفحة لأنك استوردتها مسبقاً من المكتبة الصحيحة.

ملاحظة مهمة: يجب أن يتطابق اسم الأيقونة مع مكتبة الاستيراد. لا يمكنك استيراد أيقونة من Bootstrap Icons مثلاً باستخدام مسار react-icons/fa.

كيفية استخدام أكثر من أيقونة من نفس المكتبة

إذا كنت تحتاج إلى أكثر من أيقونة من Font Awesome، فلا حاجة إلى تكرار سطر الاستيراد نفسه. يكفي إضافة الأسماء داخل الأقواس المعقوفة.

مثال على استيراد أيقونتين من Font Awesome

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;

class Like extends Component {
  render() {
    return (
      <div>
        <FaHeart />
        <FaRegHeart />
      </div>
    )
  }
}

export default Like

كيفية استخدام أيقونات من مكتبات مختلفة في نفس المشروع

في بعض الحالات، قد لا تجد جميع الأيقونات المطلوبة داخل مكتبة واحدة. هنا تظهر فائدة react-icons، إذ يمكنك الدمج بين أكثر من مكتبة بسهولة، مثل Font Awesome وBootstrap Icons.

مثال على استيراد أيقونات من مكتبتين مختلفتين

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;
import { BsHeartFill, BsHeart } from "react-icons/bs" ;

class Icons extends Component {
  render() {
    return (
      <div>
        <FaHeart />
        <FaRegHeart />
        <BsHeartFill />
        <BsHeart />
      </div>
    )
  }
}

export default Icons

نصيحة تقنية: لا تكثر من الاعتماد على مكتبات متعددة إلا عند الحاجة الفعلية، حتى تحافظ على تنظيم الواجهة وتقلل أي تأثير محتمل على الأداء.

كيفية عرض الأيقونات بشكل متجاور Inline

يمكنك جعل الأيقونات تظهر بشكل متجاور عبر وضعها داخل العنصر نفسه دون فواصل بنيوية إضافية تسبب توزيعاً مختلفاً. المثال التالي يوضّح الفكرة:

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;
import { BsHeartFill, BsHeart } from "react-icons/bs" ;

class Like extends Component {
  render() {
    return (
      <div>
        <FaHeart />
        <FaRegHeart />
        <BsHeartFill />
        <BsHeart />
      </div>
    )
  }
}

export default Like

كيفية تنسيق Font Awesome icons داخل React

غالباً ستحتاج إلى تعديل الحجم أو اللون أو المسافات لتتوافق الأيقونات مع تصميم الواجهة. وتمنحك react-icons مرونة كبيرة في هذا الجانب.

من أشهر طرق التنسيق:

• استخدام Inline Styles.
• تغيير الحجم عبر عناصر العناوين مثل h1 وh6.
• استخدام كائنات Object Styles.
• التنسيق عبر ملف CSS.
• استخدام IconContext.

1) تنسيق الأيقونات باستخدام Inline Styles

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

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;

class Like extends Component {
  render() {
    return (
      <div>
        <FaHeart style={{color: 'red', fontSize: '50px'}} />
        <FaRegHeart style={{color: 'green', fontSize: '50px'}} />
      </div>
    )
  }
}

export default Like

لاحظ أن الخصائص داخل React تُكتب بصيغة camelCase مثل fontSize بدلاً من font-size.

2) تغيير حجم الأيقونات باستخدام وسوم العناوين

يمكنك أيضاً جعل الأيقونة ترث حجم عنصر العنوان الذي توضع بداخله.

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;

class Like extends Component {
  render() {
    return (
      <div>
        <h1><FaHeart style={{color: 'red'}} /></h1>
        <h6><FaRegHeart style={{color: 'green'}} /></h6>
      </div>
    )
  }
}

export default Like

3) تنسيق الأيقونات باستخدام Object Styles

إذا كنت ستعيد استخدام نفس التنسيق مع أكثر من أيقونة، فمن الأفضل تخزين الخصائص في كائن مستقل.

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;

const fontStyles = {
  color: 'blue',
  fontSize: '80px'
};

class Like extends Component {
  render() {
    return (
      <div>
        <FaHeart style={fontStyles} />
        <FaRegHeart style={fontStyles} />
      </div>
    )
  }
}

export default Like

4) تنسيق الأيقونات عبر ملف CSS

عند العمل على مشروع يحتوي على عدد كبير من الأيقونات، يكون استخدام ملف CSS أكثر تنظيماً وقابلية للصيانة.

// style.css file
.yellow {
  font-size: 80px;
  color: yellow;
}

.purple {
  font-size: 80px;
  color: purple;
}

import React, { Component } from 'react' ;
import { FaHeart, FaRegHeart } from 'react-icons/fa' ;
import "./style.css" ;

class Like extends Component {
  render() {
    return (
      <div>
        <FaHeart className='yellow' />
        <FaRegHeart className='purple' />
      </div>
    )
  }
}

export default Like

5) تنسيق الأيقونات باستخدام IconContext

تُعد IconContext من الطرق العملية لتطبيق تنسيق موحد على مجموعة من الأيقونات دون تكرار الخصائص.

import React from 'react' ;
import { IconContext } from "react-icons" ;

const Like = () => {
  return (
    <IconContext.Provider value={{ style: { color: '#f4a200', fontSize: '50px' } }}>
      <div>
        <FaHeart />
        <FaRegHeart />
      </div>
    </IconContext.Provider>
  );
}

export default Like;

يمكنك تمرير خصائص تنسيق مختلفة داخل IconContext.Provider مثل اللون والحجم وحتى display عند الحاجة.

أكواد استيراد مكتبات الأيقونات المختلفة في react-icons

إذا كنت تريد استخدام مكتبات أخرى غير Font Awesome، فإليك جدولاً مختصراً لأشهر مسارات الاستيراد:

أفضل ممارسات استخدام react-icons في مشاريع React

• استورد فقط الأيقونات التي تستخدمها فعلياً.
• حافظ على التناسق البصري بين الأيقونات من حيث الحجم والأسلوب.
• استخدم مكتبة واحدة قدر الإمكان لتجنب التباين في التصميم.
• اعتمد على CSS أو IconContext عند وجود عدد كبير من الأيقونات.
• اختر الأيقونات الواضحة دلالياً حتى لا تؤثر سلباً في تجربة المستخدم.

الخلاصة التقنية

تُعد react-icons من أفضل الحلول العملية لإدارة الأيقونات داخل تطبيقات React، لأنها تختصر خطوات التثبيت والاستيراد وتمنحك مرونة كبيرة في العرض والتنسيق. وإذا كان هدفك هو استخدام Font Awesome بسرعة وكفاءة، فهذه المكتبة توفّر مساراً نظيفاً وسهل الصيانة. ومن الناحية التقنية، أنصح بالتركيز على تقليل عدد المكتبات المستخدمة، والاعتماد على تنسيق موحد، واختيار الأيقونات التي تدعم تجربة المستخدم فعلاً بدلاً من استخدامها كعناصر تجميلية فقط.