Start switch to react-icons (#1750)

hackforla · Jun 19, 2024 · eaad9b0 · eaad9b0
1 parent 7a19192
commit eaad9b0
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 36 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -50,6 +50,7 @@
  "react-datepicker": "^4.24.0",
  "react-dom": "^18.1.0",
  "react-gtm-module": "^2.0.11",
+ "react-icons": "^5.2.1",
  "react-input-mask": "^2.0.4",
  "react-jss": "^10.8.2",
  "react-loader": "^2.4.7",

diff --git a/client/src/components/About.js b/client/src/components/About.js
@@ -2,8 +2,7 @@ import React from "react";
 import { createUseStyles } from "react-jss";
 import packageInfo from "../../package.json";
 import ContentContainer from "./Layout/ContentContainer";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 const useStyles = createUseStyles({
  aboutContent: {
@@ -64,10 +63,7 @@ const About = () => {
  Learn more about{" "}
  <a href="http://www.hackforla.org" target="external">
  Hack for LA{" "}
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </p>
  <h3>Status of the TDM Calculator</h3>
@@ -87,10 +83,7 @@ const About = () => {
  target="external"
  >
  Glossary
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  <li className={classes.linklist}>
@@ -99,10 +92,7 @@ const About = () => {
  target="external"
  >
  Los Angeles City Planning, Mobility
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  <li className={classes.linklist}>
@@ -111,10 +101,7 @@ const About = () => {
  target="external"
  >
  Proposed Ordinances and Initiatives
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  <li className={classes.linklist}>
@@ -123,10 +110,7 @@ const About = () => {
  target="external"
  >
  Informational Video (January 2021)
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  <li className={classes.linklist}>
@@ -135,10 +119,7 @@ const About = () => {
  target="external"
  >
  Fact Sheet - English (January 2021)
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  <li className={classes.linklist}>
@@ -147,10 +128,7 @@ const About = () => {
  target="external"
  >
  Hoja Informativa - Español (Enero 2021)
- <FontAwesomeIcon
- icon={faExternalLinkAlt}
- className={classes.externalLinkIcon}
- />
+ <FaExternalLinkAlt className={classes.externalLinkIcon} />
  </a>
  </li>
  </ul>

diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js
@@ -3,8 +3,7 @@ import { createUseStyles } from "react-jss";
 import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faX } from "@fortawesome/free-solid-svg-icons";
+import { FaX } from "react-icons/fa6";
 
 import "./ChecklistModal.css";
 
@@ -69,7 +68,8 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
  className={classes.modal}
  >
  <span className={classes.close} onClick={toggleChecklistModal}>
- <FontAwesomeIcon icon={faX} />
+ {/* <FontAwesomeIcon icon={faX} /> */}
+ <FaX />
  </span>
  <ChecklistContent />
  </Modal>

diff --git a/client/src/components/UI/AriaModal/ModalDialog.js b/client/src/components/UI/AriaModal/ModalDialog.js
@@ -2,8 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { createUseStyles } from "react-jss";
 import AriaModal from "react-aria-modal";
-import { faX } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FaX } from "react-icons/fa6";
 
 const useStyles = createUseStyles({
  modalContainer: {
@@ -90,7 +89,7 @@ export default function ModalDialog({
  className={classes.closeButton}
  aria-label={`Close ${title} modal`}
  >
- <FontAwesomeIcon icon={faX} />
+ <FaX />
  </button>
  </div>
  )}