Replace icons (#33)

* Replace icons with react-icons * Update package.json * Remove eslint config
rvillanueva · Dec 6, 2023 · 2d7860e · 2d7860e
1 parent 51de5c0
commit 2d7860e
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -4,26 +4,28 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-regular-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.7",
     "framer-motion": "^10.16.14",
     "p5": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
     "react-p5": "^1.3.21",
     "react-router-dom": "^5",
     "react-transition-group": "^4.3.0"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@vitejs/plugin-react": "^4.2.1",
+    "dotenv": "^8.2.0",
+    "prettier": "^3.1.0",
+    "vite": "^5.0.5",
+    "vitest": "^1.0.1"
+  },
   "scripts": {
     "dev": "npx vite serve src",
     "preview": "npx vite preview --port 3000",
     "build": "yarn install --frozen-lockfile && npx vite build src"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -40,13 +42,5 @@
     "plugins": [
       "@babel/plugin-proposal-export-default-from"
     ]
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.5",
-    "@vitejs/plugin-react": "^4.2.1",
-    "dotenv": "^8.2.0",
-    "prettier": "^3.1.0",
-    "vite": "^5.0.5",
-    "vitest": "^1.0.1"
   }
 }
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,30 +1,42 @@
-import React from 'react';
-import './navbar.css';
-import {CSSTransition} from 'react-transition-group';
-import {Link} from 'react-router-dom';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faBars} from '@fortawesome/free-solid-svg-icons';
+import React from "react";
+import "./navbar.css";
+import { CSSTransition } from "react-transition-group";
+import { Link } from "react-router-dom";
+import { FaBars } from "react-icons/fa6";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 
-function Navbar({hideLogo, toggleDrawer, isScrolledDown}) {
+function Navbar({ hideLogo, toggleDrawer, isScrolledDown }) {
   return (
-    <div className={`navbar${isScrolledDown ? ' navbar--scrolled' : ''}`}>
+    <div className={`navbar${isScrolledDown ? " navbar--scrolled" : ""}`}>
       <div className="navbar__left">
         <CSSTransition
           mountOnEnter
           in={!hideLogo}
           timeout={750}
-          classNames="fade-in-logo">
-          <Link to="/" className="navbar__logo">Ryan Villanueva</Link>
+          classNames="fade-in-logo"
+        >
+          <Link to="/" className="navbar__logo">
+            Ryan Villanueva
+          </Link>
         </CSSTransition>
       </div>
       <div className="navbar__right">
         <div className="navbar__links">
-          <Link className="navbar__link" to="/about">About</Link>
-          <a className="navbar__link" href="https://medium.com/@ryanjvillanueva">Blog</a>
-          <Link className="navbar__link" to="/contact">Contact</Link>
+          <Link className="navbar__link" to="/about">
+            About
+          </Link>
+          <a
+            className="navbar__link"
+            href="https://medium.com/@ryanjvillanueva"
+          >
+            Blog
+          </a>
+          <Link className="navbar__link" to="/contact">
+            Contact
+          </Link>
         </div>
         <div className="navbar__drawer-toggle" onClick={toggleDrawer}>
-          <FontAwesomeIcon icon={faBars} />
+          <FaBars />
         </div>
       </div>
     </div>

diff --git a/src/components/Overlay/Overlay.jsx b/src/components/Overlay/Overlay.jsx
@@ -1,49 +1,55 @@
-import React from 'react';
-import './overlay.css';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faTimes} from '@fortawesome/free-solid-svg-icons';
-import {CSSTransition} from 'react-transition-group';
+import React from "react";
+import "./overlay.css";
+import { FaXmark } from "react-icons/fa6";
+import { CSSTransition } from "react-transition-group";
 
 function stopClick(e) {
   e.preventDefault();
   e.stopPropagation();
 }
 
-function Overlay({close, project}) {
-  if(!project) return <div className="overlay" onClick={() => close()}>
-    <button className="close-overlay-btn" onClick={close}>
-      <FontAwesomeIcon icon={faTimes} />
-    </button>
-    Project not found.
-  </div>;
+function Overlay({ close, project }) {
+  if (!project)
+    return (
+      <div className="overlay" onClick={() => close()}>
+        <button className="close-overlay-btn" onClick={close}>
+          <FaXmark />
+        </button>
+        Project not found.
+      </div>
+    );
   return (
     <CSSTransition
       mountOnEnter
       in={!!project}
       timeout={500}
-      classNames="fade-in-portfolio">
+      classNames="fade-in-portfolio"
+    >
       <div className="overlay" onClick={() => close()}>
-        <button className="close-overlay-btn" onClick={e => {
+        <button
+          className="close-overlay-btn"
+          onClick={(e) => {
             stopClick(e);
             close();
-          }}>
-          <FontAwesomeIcon icon={faTimes} />
+          }}
+        >
+          <FaXmark />
         </button>
         <div className="project-card" onClick={stopClick}>
           <div className="project-card__heading">
             <h1 className="project-card__heading__title">{project.title}</h1>
           </div>
           <div className="project-card__image-container">
-            <img className="project-card__image" alt={project.title} src={project.thumbnailUrl}/>
-          </div>
-          <div className="project-card__description">
-            {project.description}
+            <img
+              className="project-card__image"
+              alt={project.title}
+              src={project.thumbnailUrl}
+            />
           </div>
+          <div className="project-card__description">{project.description}</div>
         </div>
       </div>
     </CSSTransition>
-
-
   );
 }
 

diff --git a/src/pages/Contact/ContactPage.jsx b/src/pages/Contact/ContactPage.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import "./contact-page.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons";
+import { FaEnvelopeOpenText } from "react-icons/fa6";
 import { CSSTransition } from "react-transition-group";
 
 class ContactPage extends React.Component {
@@ -26,7 +25,7 @@ class ContactPage extends React.Component {
             classNames="envelope-animation"
           >
             <div className="contact-envelope">
-              <FontAwesomeIcon icon={faEnvelopeOpenText} />
+              <FaEnvelopeOpenText />
             </div>
           </CSSTransition>
           <div className="contact__text">

diff --git a/src/pages/Home/components/Portfolio/portfolio.css b/src/pages/Home/components/Portfolio/portfolio.css
@@ -27,7 +27,7 @@
 
 .portfolio__item__thumbnail {
   background-color: rgb(231, 231, 231);
-  border-radius: 6px;
+  border-radius: 20px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

diff --git a/yarn.lock b/yarn.lock
@@ -368,39 +368,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz#c8285183dbdb17008578dbacb6e22748709b4822"
   integrity sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==
 
-"@fortawesome/fontawesome-common-types@^0.2.25":
-  version "0.2.25"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
-  integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
-
-"@fortawesome/fontawesome-svg-core@^1.2.25":
-  version "1.2.25"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz#24b03391d14f0c6171e8cad7057c687b74049790"
-  integrity sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.25"
-
-"@fortawesome/free-regular-svg-icons@^5.11.2":
-  version "5.11.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.11.2.tgz#6edfc5c230094be3b9070fef048c01aa321a8428"
-  integrity sha512-k0vbThRv9AvnXYBWi1gn1rFW4X7co/aFkbm0ZNmAR5PoWb9vY9EDDDobg8Ay4ISaXtCPypvJ0W1FWkSpLQwZ6w==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.25"
-
-"@fortawesome/free-solid-svg-icons@^5.11.2":
-  version "5.11.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz#2f2f1459743a27902b76655a0d0bc5ec4d945631"
-  integrity sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.25"
-
-"@fortawesome/react-fontawesome@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.7.tgz#c004ca75c15c5a1218101e8f042b8da8dec0c4b5"
-  integrity sha512-AHWSzOsHBe5vqOkrvs+CKw+8eLl+0XZsVixOWhTPpGpOA8WQUbVU6J9cmtAvTaxUU5OIf+rgxxF8ZKc3BVldxg==
-  dependencies:
-    prop-types "^15.5.10"
-
 "@jest/schemas@^29.6.3":
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
@@ -1164,7 +1131,7 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.2:
+prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1181,6 +1148,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-icons@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"
+  integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"