Replace Fontawesome Pro by React-Icons/FA (#93)

* Fontawesome -> ReactIcons cleanup

* No need for npmrc anymore

* Complete migration

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/layout/containers/WithTopBarContainer.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import TopBar from '../top-bar/TopBar';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ReactNode } from 'react';
 
 type OwnProps = {
   children: JSX.Element;
   title: string;
-  icon: IconProp;
+  icon: ReactNode;
 };
 
 const StyledContainer = styled.div`

front/src/layout/navbar/NavItem.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ReactNode } from 'react';
 
 type OwnProps = {
   label: string;
   to: string;
   active?: boolean;
-  icon: IconProp;
+  icon: ReactNode;
 };
 
 type StyledItemProps = {
@@ -50,7 +49,7 @@ function NavItem({ label, icon, to, active }: OwnProps) {
       active={active}
       aria-selected={active}
     >
-      <FontAwesomeIcon icon={icon} />
+      {icon}
       <StyledItemLabel>{label}</StyledItemLabel>
     </StyledItem>
   );

front/src/layout/navbar/Navbar.tsx

@@ -5,11 +5,7 @@ import { Workspace } from '../../interfaces/workspace.interface';
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
-import { faUser } from '@fortawesome/pro-regular-svg-icons';
-import {
-  faBuildings,
-  faBullseyeArrow,
-} from '@fortawesome/pro-regular-svg-icons';
+import { FaRegUser, FaRegBuilding, FaBullseye } from 'react-icons/fa';
 
 const NavbarContainer = styled.div`
   display: flex;
@@ -40,7 +36,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="People"
             to="/people"
-            icon={faUser}
+            icon={<FaRegUser />}
             active={
               !!useMatch({
                 path: useResolvedPath('/people').pathname,
@@ -51,7 +47,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="Companies"
             to="/companies"
-            icon={faBuildings}
+            icon={<FaRegBuilding />}
             active={
               !!useMatch({
                 path: useResolvedPath('/companies').pathname,
@@ -62,7 +58,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="Opportunities"
             to="/opportunities"
-            icon={faBullseyeArrow}
+            icon={<FaBullseye />}
             active={
               !!useMatch({
                 path: useResolvedPath('/opportunities').pathname,

front/src/layout/navbar/__stories__/NavItem.stories.tsx

@@ -1,5 +1,5 @@
 import { MemoryRouter } from 'react-router-dom';
-import { faUser } from '@fortawesome/pro-regular-svg-icons';
+import { FaRegUser } from 'react-icons/fa';
 import { ThemeProvider } from '@emotion/react';
 
 import NavItem from '../../../layout/navbar/NavItem';
@@ -15,7 +15,7 @@ export default component;
 export const NavItemDefault = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter>
-      <NavItem label="Test" to="/test" icon={faUser} />
+      <NavItem label="Test" to="/test" icon={<FaRegUser />} />
     </MemoryRouter>
   </ThemeProvider>
 );
@@ -23,7 +23,7 @@ export const NavItemDefault = () => (
 export const NavItemActive = () => (
   <ThemeProvider theme={lightTheme}>
     <MemoryRouter initialEntries={['/test']}>
-      <NavItem label="Test" to="/test" active={true} icon={faUser} />
+      <NavItem label="Test" to="/test" active={true} icon={<FaRegUser />} />
     </MemoryRouter>
   </ThemeProvider>
 );

front/src/layout/top-bar/TopBar.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ReactNode } from 'react';
 
 const TopBarContainer = styled.div`
   display: flex;
@@ -22,14 +21,14 @@ const TitleContainer = styled.div`
 
 type OwnProps = {
   title: string;
-  icon: IconProp;
+  icon: ReactNode;
 };
 
 function TopBar({ title, icon }: OwnProps) {
   return (
     <>
       <TopBarContainer>
-        <FontAwesomeIcon icon={icon} />
+        {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
       </TopBarContainer>
     </>