fix: remove direct dependency to ant-design/icons and replace all usa…

…ges with fontawesome icons
terrestris · Feb 15, 2023 · def64ee · def64ee
1 parent a59e7a6
commit def64ee
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 38 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -20,7 +20,7 @@ module.exports = {
     '<rootDir>/dist/'
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!(ol|antd|@camptocamp/inkmap|(rc-[a-z-]*)|@ant-design\/css-animation|(@ant-design\/icons)(-[a-z]+)*|@babel\/runtime)/)'
+    'node_modules/(?!(ol|antd|@camptocamp/inkmap|(rc-[a-z-]*)|@ant-design\/css-animation|(-[a-z]+)*|@babel\/runtime)/)'
   ],
   setupFiles: [
     '<rootDir>/jest/__mocks__/matchMediaMock.js'

diff --git a/package.json b/package.json
@@ -67,7 +67,6 @@
     "typecheck": "tsc --noEmit --project tsconfig.json"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
     "@camptocamp/inkmap": "^1.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",

diff --git a/src/BackgroundLayerChooser/BackgroundLayerChooser.tsx b/src/BackgroundLayerChooser/BackgroundLayerChooser.tsx
@@ -1,4 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef
+} from 'react';
 
 import OlOverviewMap from 'ol/control/OverviewMap';
 import OlLayerBase from 'ol/layer/Base';
@@ -11,15 +15,17 @@ import { getUid } from 'ol/util';
 
 import BackgroundLayerPreview from '../BackgroundLayerPreview/BackgroundLayerPreview';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  LeftOutlined,
-  RightOutlined
-} from '@ant-design/icons';
+  faChevronLeft,
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons';
 
-import './BackgroundLayerChooser.less';
 import useMap from '../Hook/useMap';
 import SimpleButton from '../Button/SimpleButton/SimpleButton';
 
+import './BackgroundLayerChooser.less';
+
 export type BackgroundLayerChooserProps = {
   layers: OlLayer[];
   buttonTooltip?: string;
@@ -136,7 +142,14 @@ export const BackgroundLayerChooser: React.FC<BackgroundLayerChooserProps> = ({
         className={`change-bg-btn${layerOptionsVisible ? ' toggled' : ''}`}
         size="small"
         tooltip={buttonTooltip}
-        icon={layerOptionsVisible ? <RightOutlined /> : <LeftOutlined />}
+        icon={layerOptionsVisible ?
+          <FontAwesomeIcon
+            icon={faChevronRight}
+          /> :
+          <FontAwesomeIcon
+            icon={faChevronLeft}
+          />
+        }
         onClick={() => setLayerOptionsVisible(!layerOptionsVisible)}
       />
       <div className="bg-preview">

diff --git a/src/Button/SimpleButton/SimpleButton.example.md b/src/Button/SimpleButton/SimpleButton.example.md
@@ -41,27 +41,18 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 />
 ```
 
-A SimpleButton with an antd icon.
-
-```jsx
-import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton';
-
-import { DownloadOutlined } from '@ant-design/icons';
-
-<SimpleButton
-  icon={<DownloadOutlined />}
-/>
-```
-
 A round SimpleButton using shape config:
 
 ```jsx
 import SimpleButton from '@terrestris/react-geo/Button/SimpleButton/SimpleButton';
 
-import { DownloadOutlined } from '@ant-design/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 <SimpleButton
-  icon={<DownloadOutlined />}
+  icon={<FontAwesomeIcon
+    icon={faDownload}
+  />}
   shape="circle"
 />
 ```
diff --git a/src/CoordinateInfo/CoordinateInfo.example.md b/src/CoordinateInfo/CoordinateInfo.example.md
@@ -8,7 +8,8 @@ import {
   Tooltip
 } from 'antd';
 
-import CopyOutlined from '@ant-design/icons/CopyOutlined';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
 
 import OlMap from 'ol/Map';
 import OlView from 'ol/View';
@@ -104,7 +105,7 @@ class CoordinateInfoExample extends React.Component {
                         onClick={() => {
                           copy(clickCoord.join(', '));
                         }}
-                        icon={<CopyOutlined />}
+                        icon={<FontAwesomeIcon icon={faCopy}/>}
                       />
                     </Tooltip>
                   </div>
@@ -132,7 +133,7 @@ class CoordinateInfoExample extends React.Component {
                         onClick={() => {
                           copy(features[Object.keys(features)[0]][0].get('STATE_NAME'));
                         }}
-                        icon={<CopyOutlined />}
+                        icon={<FontAwesomeIcon icon={faCopy}/>}
                       />
                     </Tooltip>
                   </div>

diff --git a/src/Field/WfsSearchInput/WfsSearchInput.tsx b/src/Field/WfsSearchInput/WfsSearchInput.tsx
@@ -5,8 +5,11 @@ import {
 } from 'antd';
 import { InputProps } from 'antd/lib/input';
 
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
-import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCircleNotch,
+  faClose
+} from '@fortawesome/free-solid-svg-icons';
 
 import OlMap from 'ol/Map';
 import OlFormatGML32 from 'ol/format/GML32';
@@ -15,7 +18,9 @@ import OlFormatGeoJson from 'ol/format/GeoJSON';
 import _debounce from 'lodash/debounce';
 
 import Logger from '@terrestris/base-util/dist/Logger';
-import WfsFilterUtil, { AttributeDetails } from '@terrestris/ol-util/dist/WfsFilterUtil/WfsFilterUtil';
+import WfsFilterUtil, {
+  AttributeDetails
+} from '@terrestris/ol-util/dist/WfsFilterUtil/WfsFilterUtil';
 
 import { Feature } from 'geojson';
 
@@ -443,10 +448,13 @@ export class WfsSearchInput extends React.Component<WfsSearchInputProps, WfsSear
         ref={inputRef => {this._inputRef = inputRef; }}
         suffix={
           fetching ?
-            <LoadingOutlined
+            <FontAwesomeIcon
+              spin={true}
+              icon={faCircleNotch}
               onClick={this.resetSearch.bind(this)}
             /> :
-            <CloseCircleOutlined
+            <FontAwesomeIcon
+              icon={faClose}
               onClick={this.resetSearch.bind(this)}
             />
         }

diff --git a/src/Legend/Legend.tsx b/src/Legend/Legend.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { Spin } from 'antd';
 
-import { LoadingOutlined } from '@ant-design/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 
 import _isEqual from 'lodash/isEqual';
 
@@ -222,8 +223,8 @@ export class Legend extends React.Component<LegendProps, LegendState> {
         <Spin
           spinning={this.state.loading}
           indicator={(
-            <LoadingOutlined
-              spin
+            <FontAwesomeIcon
+              icon={faCircleNotch}
             />
           )}
         >

diff --git a/src/Panel/SearchResultsPanel/SearchResultsPanel.spec.tsx b/src/Panel/SearchResultsPanel/SearchResultsPanel.spec.tsx
@@ -6,9 +6,8 @@ import OlMap from 'ol/Map';
 import OlPoint from 'ol/geom/Point';
 import OlFeature from 'ol/Feature';
 
-import {
-  GlobalOutlined
-} from '@ant-design/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 
 import { renderInMapContext } from '../../Util/rtlTestUtils';
 
@@ -96,15 +95,15 @@ describe('<SearchResultsPanel />', () => {
       numTotal={searchResults.length}
       searchResults={searchResults}
       searchTerms={[]}
-      listPrefixRenderer={() => <GlobalOutlined />}
+      listPrefixRenderer={() => <FontAwesomeIcon icon={faGlobe} />}
     />);
 
     // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
     const listPrefixItems = container.querySelectorAll('.result-prefix');
     expect(listPrefixItems.length).toEqual(1);
 
     // eslint-disable-next-line testing-library/no-node-access
-    const listPrefixItem = listPrefixItems.item(0).querySelectorAll('.anticon-global');
+    const listPrefixItem = listPrefixItems.item(0).querySelectorAll('.fa-globe');
     expect(listPrefixItem).toBeDefined();
   });