Use fontawesome from react

Author: naveen521kk

package.json

@@ -19,6 +19,10 @@
         "@fontsource/ibm-plex-sans": "^4.5.1",
         "@fontsource/plus-jakarta-sans": "^4.5.0",
         "@fortawesome/fontawesome-free": "^5.15.4",
+        "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-brands-svg-icons": "^5.15.4",
+        "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@fortawesome/react-fontawesome": "^0.1.16",
         "@popperjs/core": "^2.10.1",
         "babel-eslint": "^10.0.0",
         "bootstrap": "^4.6",

src/components/plugin_div.js

@@ -1,5 +1,9 @@
 import * as React from "react";
 import "./plugin_div.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPython } from '@fortawesome/free-brands-svg-icons'
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+
 export default function PluginDiv({element}) {
     let date1 = element.urls[0].upload_time_iso_8601;
     return (
@@ -17,7 +21,7 @@ export default function PluginDiv({element}) {
                     rel="noopener noreferrer"
                 >
                     <button type="button" class="btn btn-outline-primary m-1">
-                        <i class="fab fa-python"></i> PyPi Page
+                        <FontAwesomeIcon icon={faPython} /> PyPi Page
                     </button>
                 </a>
                 <a
@@ -26,7 +30,7 @@ export default function PluginDiv({element}) {
                     rel="noopener noreferrer"
                 >
                     <button type="button" class="btn btn-outline-info m-1">
-                        <i class="fas fa-home"></i> Home Page
+                        <FontAwesomeIcon icon={faHome}/> Home Page
                     </button>
                 </a>
             </div>

src/pages/index.js

@@ -2,8 +2,9 @@ import * as React from "react";
 import {ManimBanner} from "../components/manim-banner";
 import NavBar from "../components/navbar";
 import "./index.scss";
-import { Link } from "gatsby"
-
+import {Link} from "gatsby";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlayCircle, faBook } from '@fortawesome/free-solid-svg-icons'
 
 const IndexPage = () => {
     return (
@@ -22,10 +23,10 @@ const IndexPage = () => {
                 </p>
                 <div className="link-div">
                     <Link href="https://docs.manim.community">
-                        <i class="fas fa-book"></i> Documentation
+                        <FontAwesomeIcon icon={faBook}/> Documentation
                     </Link>
                     <Link href="https://docs.manim.community/en/stable/examples.html">
-                        <i class="fas fa-play-circle"></i> Examples
+                        <FontAwesomeIcon icon={faPlayCircle} /> Examples
                     </Link>
                 </div>
             </div>

yarn.lock

@@ -1078,11 +1078,44 @@
   resolved "https://registry.yarnpkg.com/@fontsource/plus-jakarta-sans/-/plus-jakarta-sans-4.5.0.tgz#79db20d5de22acc3312794f67d3ceffcb05b2f9f"
   integrity sha512-PUVYjxqIXa8tf7VyQWnRP5FsGTwTlOlmHNrbF7UQ9UOd4c25X4VGkb2ZCZsJaPt6MECXIbJYwl49LLV6Kk6BHg==
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
 "@fortawesome/fontawesome-free@^5.15.4":
   version "5.15.4"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
   integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
 
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-brands-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
+  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.16":
+  version "0.1.16"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
+  integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@gatsbyjs/reach-router@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d"