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/pages/companies/Companies.tsx

@@ -1,4 +1,4 @@
-import { faBuildings, faList } from '@fortawesome/pro-regular-svg-icons';
+import { FaRegBuilding, FaList } from 'react-icons/fa';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import styled from '@emotion/styled';
 import { useState, useCallback } from 'react';
@@ -29,13 +29,13 @@ function Companies() {
   const { data } = useCompaniesQuery(orderBy);
 
   return (
-    <WithTopBarContainer title="Companies" icon={faBuildings}>
+    <WithTopBarContainer title="Companies" icon={<FaRegBuilding />}>
       <StyledCompaniesContainer>
         <Table
           data={data ? data.companies.map(mapCompany) : []}
           columns={companiesColumns}
           viewName="All Companies"
-          viewIcon={faList}
+          viewIcon={<FaList />}
           onSortsUpdate={updateSorts}
           availableSorts={sortsAvailable}
         />

front/src/pages/companies/companies-table.tsx

@@ -8,14 +8,14 @@ import CompanyChip from '../../components/chips/CompanyChip';
 import EditableCell from '../../components/table/EditableCell';
 import PipeChip from '../../components/chips/PipeChip';
 import {
-  faBuildings,
-  faCalendar,
-  faLinkSimple,
-  faMapPin,
-  faRectangleHistory,
-  faSigma,
-  faUser,
-} from '@fortawesome/pro-regular-svg-icons';
+  FaRegBuilding,
+  FaCalendar,
+  FaLink,
+  FaMapPin,
+  FaStream,
+  FaRegUser,
+  FaUsers,
+} from 'react-icons/fa';
 import ClickableCell from '../../components/table/ClickableCell';
 import PersonChip from '../../components/chips/PersonChip';
 import { SortType } from '../../components/table/table-header/interface';
@@ -36,7 +36,7 @@ export const sortsAvailable = [
 const columnHelper = createColumnHelper<Company>();
 export const companiesColumns = [
   columnHelper.accessor('name', {
-    header: () => <ColumnHead viewName="Name" viewIcon={faBuildings} />,
+    header: () => <ColumnHead viewName="Name" viewIcon={<FaRegBuilding />} />,
     cell: (props) => (
       <HorizontalyAlignedContainer>
         <Checkbox
@@ -51,7 +51,7 @@ export const companiesColumns = [
     ),
   }),
   columnHelper.accessor('employees', {
-    header: () => <ColumnHead viewName="Employees" viewIcon={faSigma} />,
+    header: () => <ColumnHead viewName="Employees" viewIcon={<FaUsers />} />,
     cell: (props) => (
       <EditableCell
         content={props.row.original.employees.toFixed(0)}
@@ -64,7 +64,7 @@ export const companiesColumns = [
     ),
   }),
   columnHelper.accessor('domain_name', {
-    header: () => <ColumnHead viewName="URL" viewIcon={faLinkSimple} />,
+    header: () => <ColumnHead viewName="URL" viewIcon={<FaLink />} />,
     cell: (props) => (
       <EditableCell
         content={props.row.original.domain_name}
@@ -77,7 +77,7 @@ export const companiesColumns = [
     ),
   }),
   columnHelper.accessor('address', {
-    header: () => <ColumnHead viewName="Address" viewIcon={faMapPin} />,
+    header: () => <ColumnHead viewName="Address" viewIcon={<FaMapPin />} />,
     cell: (props) => (
       <EditableCell
         content={props.row.original.address}
@@ -91,7 +91,7 @@ export const companiesColumns = [
   }),
   columnHelper.accessor('opportunities', {
     header: () => (
-      <ColumnHead viewName="Opportunities" viewIcon={faRectangleHistory} />
+      <ColumnHead viewName="Opportunities" viewIcon={<FaStream />} />
     ),
     cell: (props) => (
       <ClickableCell href="#">
@@ -102,7 +102,7 @@ export const companiesColumns = [
     ),
   }),
   columnHelper.accessor('creationDate', {
-    header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
+    header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
     cell: (props) => (
       <ClickableCell href="#">
         {new Intl.DateTimeFormat(undefined, {
@@ -114,7 +114,9 @@ export const companiesColumns = [
     ),
   }),
   columnHelper.accessor('accountOwner', {
-    header: () => <ColumnHead viewName="Account Owner" viewIcon={faUser} />,
+    header: () => (
+      <ColumnHead viewName="Account Owner" viewIcon={<FaRegUser />} />
+    ),
     cell: (props) => (
       <ClickableCell href="#">
         <>