replace fontawesome with heroicons

app/assets/stylesheets/buttons.scss

@@ -130,6 +130,11 @@
   }
 }
 
+.icon-size {
+  width: 18px;
+  height: 18px;
+}
+
 .state-button {
   display: inline-block;
 }

app/javascript/components/ComboMultipleDropdownList.jsx

@@ -241,7 +241,7 @@ function ComboboxToken({ value, ...props }) {
           onRemove(value);
         }}
       >
-        <XIcon style={{ width: '15px', height: '15px' }} />
+        <XIcon className="icon-size" />
         <span className="screen-reader-text">Désélectionner</span>
       </button>
       {value}

app/javascript/components/TypesDeChampEditor/components/MoveButton.jsx

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid';
 
 function MoveButton({ isEnabled, icon, title, onClick }) {
   return (
     <button
-      className="button small icon-only move"
+      className="button small move"
       disabled={!isEnabled}
       title={title}
       onClick={onClick}
     >
-      <FontAwesomeIcon icon={icon} />
+      {icon == 'arrow-up' ? (
+        <ArrowUpIcon className="icon-size" />
+      ) : (
+        <ArrowDownIcon className="icon-size" />
+      )}
     </button>
   );
 }

app/javascript/components/TypesDeChampEditor/components/TypeDeChamp.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { sortableElement, sortableHandle } from 'react-sortable-hoc';
 import { useInView } from 'react-intersection-observer';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { TrashIcon } from '@heroicons/react/outline';
 
 import DescriptionInput from './DescriptionInput';
 import LibelleInput from './LibelleInput';
@@ -77,7 +77,8 @@ const TypeDeChamp = sortableElement(
                   });
               }}
             >
-              <FontAwesomeIcon icon="trash" title="Supprimer" />
+              <TrashIcon className="icon-size" />
+              <span className="screen-reader-text">Supprimer</span>
             </button>
           </div>
         </div>

app/javascript/components/TypesDeChampEditor/components/TypeDeChampRepetitionOptions.jsx

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PlusIcon } from '@heroicons/react/outline';
 
 import { SortableContainer, addChampLabel } from '../utils';
 import TypeDeChamp from './TypeDeChamp';
@@ -45,7 +45,7 @@ function TypeDeChampRepetitionOptions({
             })
           }
         >
-          <FontAwesomeIcon icon="plus" size="sm" />
+          <PlusIcon className="icon-size" />
           &nbsp;&nbsp;
           {addChampLabel(state.isAnnotation)}
         </button>

app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.jsx

@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PlusIcon, ArrowCircleDownIcon } from '@heroicons/react/outline';
 
 import { SortableContainer, addChampLabel } from '../utils';
 import TypeDeChamp from './TypeDeChamp';
@@ -38,7 +38,7 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
       </SortableContainer>
       {state.typeDeChamps.length === 0 && (
         <h2>
-          <FontAwesomeIcon icon="arrow-circle-down" />
+          <ArrowCircleDownIcon className="icon-size" />
           &nbsp;&nbsp;Cliquez sur le bouton «&nbsp;
           {addChampLabel(state.isAnnotation)}&nbsp;» pour créer votre premier
           champ.
@@ -56,7 +56,7 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
             })
           }
         >
-          <FontAwesomeIcon icon="plus" size="sm" />
+          <PlusIcon className="icon-size" />
           &nbsp;&nbsp;
           {addChampLabel(state.isAnnotation)}
         </button>

app/javascript/components/TypesDeChampEditor/index.jsx

@@ -1,27 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { library } from '@fortawesome/fontawesome-svg-core';
-
-import { faArrowCircleDown } from '@fortawesome/free-solid-svg-icons/faArrowCircleDown';
-import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
-import { faArrowsAltV } from '@fortawesome/free-solid-svg-icons/faArrowsAltV';
-import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
-import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
-import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
 
 import Flash from './Flash';
 import OperationsQueue from './OperationsQueue';
 import TypeDeChamps from './components/TypeDeChamps';
 
-library.add(
-  faArrowCircleDown,
-  faArrowDown,
-  faArrowsAltV,
-  faArrowUp,
-  faPlus,
-  faTrash
-);
-
 class TypesDeChampEditor extends Component {
   constructor(props) {
     super(props);

package.json

@@ -1,9 +1,6 @@
 {
   "dependencies": {
     "@babel/preset-react": "^7.12.13",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
     "@heroicons/react": "^1.0.1",
     "@mapbox/mapbox-gl-draw": "^1.2.2",
     "@rails/actiontext": "^6.0.3",

yarn.lock

@@ -1005,32 +1005,6 @@
     enabled "2.0.x"
     kuler "^2.0.0"
 
-"@fortawesome/fontawesome-common-types@^0.2.34":
-  version "0.2.34"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915"
-  integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA==
-
-"@fortawesome/fontawesome-svg-core@^1.2.34":
-  version "1.2.34"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26"
-  integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.34"
-
-"@fortawesome/free-solid-svg-icons@^5.15.2":
-  version "5.15.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943"
-  integrity sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.34"
-
-"@fortawesome/react-fontawesome@^0.1.14":
-  version "0.1.14"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
-  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
-  dependencies:
-    prop-types "^15.7.2"
-
 "@heroicons/react@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.1.tgz#66d25f6441920bd5c2146ea27fd33995885452dd"