دليلك الشامل: استخدام أيقونات SVG في React مع مكتبتي React Icons و Font Awesome

مقدمة: قوة الأيقونات في الواجهات الرسومية لتطبيقات React

تُعد الأيقونات وسيلة بصرية قوية للتواصل ونقل المعاني والمفاهيم دون الحاجة إلى الكلمات. يمكن استخدامها لتصنيف المحتوى، الإشارة إلى إجراء معين، أو حتى التحذير من شيء ما. ولكن كيف يمكننا دمج هذه الأيقونات، خاصة تلك المبنية على تقنية SVG، في تطبيقات React لتحسين تجربة المستخدم والتواصل البصري؟

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

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

قبل الغوص في التفاصيل العملية، دعونا نفهم ما هي SVG ولماذا تُعد خياراً ممتازاً للويب.

ما هي رسومات المتجهات القابلة للتطوير (SVG)؟

SVG هو اختصار لـ Scalable Vector Graphics، أو رسومات المتجهات القابلة للتطوير. إنها صيغة ملفات رسومية متجهة قائمة على لغة ترميز شبيهة بـ XML، تتيح للمطورين والمصممين إنشاء صور متجهة باستخدام تعريفات المسارات والأشكال الهندسية. على عكس الصور النقطية (مثل JPG و PNG) التي تعتمد على البكسلات، تعتمد صور SVG على المعادلات الرياضية، مما يمنحها مرونة فائقة.

لماذا تُعد SVG خياراً مثالياً للويب؟

صُممت SVG خصيصاً للويب. إنها معيار مفتوح أنشأته W3C لتوفير طريقة أفضل لإضافة الصور إلى صفحات الويب. إذا قمت بفتح ملف SVG على جهاز الكمبيوتر الخاص بك، فقد تتفاجأ بأنه مجرد كود نصي! هذا يلعب دوراً كبيراً في صغر حجم الملف.

عند استخدام SVG، يمكنك الاستفادة من حجمها الصغير مقارنة بملفات الصور الكبيرة التي قد تكون مطلوبة لتقديم نفس الدقة العالية. بالإضافة إلى ذلك، بما أننا نُعرف SVG كمسارات وأشكال، يمكنها التوسع أو التصغير بأي حجم نريده دون فقدان الجودة أو التشويش. هذا يجعلها مرنة للغاية للاستخدام على الويب، خاصة عند بناء تجارب متجاوبة (responsive) تتكيف مع مختلف أحجام الشاشات والأجهزة.

الجزء 0: إعداد تطبيق React جديد

لغرض هذا الشرح، يمكنك استخدام أي إطار عمل لـ React تفضله، سواء كان Create React App أو Next.js. يمكنك أيضاً استخدام مشروع موجود بالفعل. بما أننا لا نحتاج إلى أي شيء خاص لإضافة الأيقونات، سأستخدم create-react-app.

للبدء باستخدام create-react-app، يمكنك إنشاء مشروع جديد باستخدام الأمر التالي في الطرفية (terminal):

yarn create react-app [project-name]
# أو
npx create-react-app [project-name]

ملاحظة: استبدل [project-name] بالاسم الذي تريد استخدامه لمشروعك. سأستخدم my-svg-icons. بمجرد أن يصبح لديك تطبيقك الجديد أو مشروعك الحالي، سنكون جاهزين للانطلاق!

الجزء 1: إضافة أيقونات SVG باستخدام مكتبة react-icons

تثبيت مكتبة react-icons في مشروعك

للبدء باستخدام react-icons، نحتاج أولاً إلى تثبيتها في مشروعنا. داخل مجلد مشروعك، قم بتشغيل أحد الأوامر التالية:

yarn add react-icons
# أو
npm install react-icons --save

بمجرد اكتمال التثبيت، سنكون جاهزين لاستخدامها في مشروعنا.

اختيار الأيقونات لمشروعك

أحد الجوانب الرائعة في react-icons هو المكتبة الشاملة التي توفرها ضمن حزمة واحدة. ليس لدينا فقط أيقونات Font Awesome متاحة على الفور، بل لدينا أيضاً GitHub’s Octicons، Heroicons، Material Design Icons، ومجموعة كبيرة أخرى.

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

استخدام react-icons في مشروعك

بمجرد أن تجد الأيقونات التي تريد استخدامها، يمكننا الآن إضافتها إلى مشروعنا. يجعل موقع react-icons من السهل علينا البحث عن اسم الأيقونة التي نريد استيرادها إلى مشروعنا.

إذا أردنا استخدام أيقونة الصاروخ (rocket) من Font Awesome، يمكننا الانتقال إلى قسم Font Awesome في الشريط الجانبي، والبحث في الصفحة عن "rocket" (باستخدام CMD+F أو CTRL+F)، ثم النقر على الأيقونة التي ستنسخ اسمها إلى حافظتك.

يمكننا أيضاً البحث عن "rocket" في نموذج البحث في أعلى يسار الصفحة، والذي سيعرض لنا نتائج "rocket" عبر جميع مجموعات الأيقونات.

داخل مشروعنا، يمكننا الآن استيراد تلك الأيقونة. على غرار التعليمات الموجودة في الجزء العلوي من صفحة react-icons، نريد استيراد تلك الأيقونة المحددة من react-icons/fa، والذي يشير إلى وحدة Font Awesome في react-icons. أضف ما يلي إلى الجزء العلوي من الملف الذي تريد استيراد الأيقونة فيه. إذا كنت تستخدم مشروع create-react-app جديداً، يمكنك إضافته إلى الجزء العلوي من ملف src/App.js.

import { FaRocket } from 'react-icons/fa';

لاختبار هذا، دعنا نستبدل شعار React بأيقونتنا. قم بإزالة مكون <img> وبدلاً من ذلك أضف:

<FaRocket />

وإذا أعدنا تحميل الصفحة، يمكننا رؤية صاروخنا!

صاروخنا لا يدور مثل شعار React، لذا دعنا نصلح ذلك. أضف الفئة .App-logo إلى مكون FaRocket:

<FaRocket className="App-logo" />

والآن يجب أن يدور الصاروخ!

لكنه أيضاً صغير بعض الشيء. إذا نظرنا داخل ملف src/App.css، فإننا نحدد ارتفاع .App-logo ليكون 40vmin. بينما يعمل هذا، لكي تملأ أيقونتنا المساحة، نحتاج أيضاً إلى توفير عرض لها. أضف ما يلي إلى فئة .App-logo لإضافة عرض:

width: 40vmin;

ورغم أنه ربما يكون كبيراً جداً الآن، إلا أننا وصلنا إلى حجم أكثر ملاءمة ولدينا أيقونتنا!

الجزء 2: إضافة ملفات SVG يدوياً كمكون React

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

أولاً، دعنا نجد أيقونة. بينما تتوفر جميع أيقونات Heroicons داخل react-icons، دعنا نستخدمها كمثال نظراً لسهولة العثور على بعض أكواد SVG ونسخها منها. انتقل إلى heroicons.com وابحث عن أيقونة ترغب في استخدامها لهذا المثال. سأستخدم "globe" (الكرة الأرضية).

بعد العثور على الأيقونة التي تريدها، مرر مؤشر الفأرة فوق تلك الأيقونة، حيث سترى خيارات لنسخ تلك الأيقونة كـ SVG أو JSX، وقم بنسخها كـ JSX.

مع نسخ الأيقونة، قم بإنشاء ملف جديد تحت مجلد src يسمى Globe.js. داخل هذا الملف، سنقوم بإنشاء مكون جديد يسمى Globe ولصق كود SVG الخاص بنا داخل هذا المكون.

import React from 'react';

const Globe = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default Globe;

ملاحظة: عند نسخ SVG عادي إلى مكون React، قد لا يعمل "كما هو". تتضمن ملفات SVG أحياناً فئات CSS أو سمات عناصر غير صالحة مع JSX. إذا واجهت أخطاء، حاول إصلاح السمات والبحث في وحدة تحكم الويب (web console) لرؤية التحذيرات والأخطاء التي يرميها React. نظراً لأننا قمنا بالنسخ كـ JSX، فقد تمكنا من جعله يعمل على الفور.

الآن، ارجع إلى ملف src/App.js واستورد مكوننا الجديد:

import Globe from './Globe';

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

<Globe />

وإذا فتحنا متصفحنا، يمكننا رؤية كرتنا الأرضية!

لكنها كبيرة بعض الشيء. نريد تطبيق فئة .App-logo الخاصة بنا على مكون Globe، لذلك نحتاج إلى تحديث هذا المكون لقبول خاصية (prop) تسمى className. بالعودة إلى ملف src/Globe.js، أضف وسيط خاصية className:

const Globe = ( { className } ) => {

ثم، أضف خاصية جديدة مع className هذا إلى مكون <svg>:

<svg className={className}

الآن، يمكننا تحديث مكون Globe في ملف src/App.js لتضمين تلك الفئة:

<Globe className="App-logo" />

وإذا أعدنا تحميل الصفحة، يمكننا رؤية شعارنا يعود إلى الحجم الصحيح ويدور مرة أخرى!

لماذا لا ندرج أيقونات SVG كملف صورة عادي؟

بينما يمكننا تضمين أيقونات SVG كملف صورة تماماً كما يفعل React في كود create-react-app الافتراضي، فإننا نحصل على العديد من الفوائد من إضافة ملفات SVG "مضمنة" (inline) مباشرة في الكود. لسبب واحد، عند إضافة SVG مضمنة، يمكننا الوصول إلى المسارات المختلفة وتخصيصها باستخدام خصائص CSS. هذا يمنحنا مرونة أكبر لتخصيصها ديناميكياً.

كما أنها ستوفر عدداً أقل من طلبات HTTP. سيعرف المتصفح كيفية تحميل SVG، لذلك لا نحتاج إلى إزعاج المتصفح لطلب هذا الملف لتضمينه في الصفحة. ومع ذلك، لا يزال خياراً صالحاً لإضافة ملف SVG إلى الصفحة كصورة عادية إذا كانت متطلبات مشروعك تتناسب مع ذلك.

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

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

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