مشكلة في تثبيت Font Awesome مع Gatsby؟

يمكنك اتباع الطريقة التالية:

تقوم على إضافى التنسيقات وقت الترجمة compile time باستخدام  Gatsby Server Rendering APIs.

سنعتمد على gatsby-plugin-fontawesome-css حيث سنقوم بتثبيتها من خلال:

# التنصيب
npm install --save gatsby-plugin-fontawesome-css
# ملف الاعددات gatsby-config.js في مجلد المشروع الرئيسي
touch gatsby-config.js

ثم نضيف للملف gatsby-config.js ما يلي:

module.exports = {
  plugins: [`gatsby-plugin-fontawesome-css`],
}

ستعمل في development and production mode

يمكنك أن تستعمل مكتبة react-icons لإضافة كل أيقونات font awesome بالإضافة إلى مجموعة كبيرة جدًا من الأيقونات الأخرى، يمكنك تثبيت محتبة react-icons من خلال الأمر:

npm install react-icons --save

ثم قم بإستخدامها كالتالي (مثال من موقع المكتبة الرسمي):

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

أسرع طريقة لاستخدام fontawsome icons في مشروع gatsby هي عن طريق react-icons قم بتثبيت المكتبة 

npm -i --save react-icons

ثم يمكنك استخدامها بسهولة بهذه الطريقة 

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

export default function main() {
  return (
    <div>
      <FaCoffe />//اضافة الأيقونة
    </div>
  );
}