fix console error for feather icon (#7305)

app/app.js

@@ -1,5 +1,4 @@
 import $ from 'jquery';
-import feather from 'feather-icons';
 import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
 
 /* @ngInject */
@@ -29,10 +28,6 @@ export function onStartupAngular($rootScope, $state, $interval, LocalStorage, En
     HttpRequestHelper.resetAgentHeaders();
   });
 
-  $transitions.onSuccess({}, () => {
-    feather.replace();
-  });
-
   // Keep-alive Edge endpoints by sending a ping request every minute
   $interval(() => {
     ping(EndpointProvider, SystemService);

app/react/components/Icon.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { ComponentType, ReactNode, useEffect } from 'react';
-import featherIcons from 'feather-icons';
+import { ComponentType, ReactNode } from 'react';
+import * as featherIcons from 'react-feather';
 import { isValidElementType } from 'react-is';
 
 import Svg, { SvgIcons } from './Svg';
@@ -30,12 +30,6 @@ interface Props {
 }
 
 export function Icon({ icon, feather, className, mode, size }: Props) {
-  useEffect(() => {
-    if (feather) {
-      featherIcons.replace();
-    }
-  }, [feather]);
-
   const classes = clsx(
     className,
     'icon',
@@ -59,14 +53,12 @@ export function Icon({ icon, feather, className, mode, size }: Props) {
   }
 
   if (feather) {
-    return (
-      <i
-        data-feather={icon}
-        className={classes}
-        aria-hidden="true"
-        role="img"
-      />
-    );
+    const iconName = icon
+      .split('-')
+      .map((s) => s.slice(0, 1).toUpperCase() + s.slice(1))
+      .join('') as keyof typeof featherIcons;
+    const IconComponent = featherIcons[iconName];
+    return <IconComponent className={classes} />;
   }
 
   return (

package.json

@@ -105,7 +105,6 @@
     "codemirror": "~5.64.0",
     "core-js": "^3.19.3",
     "fast-json-patch": "^3.1.0",
-    "feather-icons": "^4.29.0",
     "file-saver": "^2.0.5",
     "filesize": "~3.3.0",
     "filesize-parser": "^1.5.0",
@@ -165,7 +164,6 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/angular": "^1.8.3",
     "@types/bootbox": "^5.2.2",
-    "@types/feather-icons": "^4.7.0",
     "@types/file-saver": "^2.0.4",
     "@types/jest": "^27.0.3",
     "@types/jquery": "^3.5.10",

yarn.lock

@@ -4197,9 +4197,9 @@
   integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
-  version "4.17.28"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz#c47def9f34ec81dc6328d0b1b5303d1ec98d86b8"
-  integrity sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==
+  version "4.17.29"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz#2a1795ea8e9e9c91b4a4bbe475034b20c1ec711c"
+  integrity sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -4215,11 +4215,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/feather-icons@^4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
-  integrity sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==
-
 "@types/file-saver@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.4.tgz#aaf9b96296150d737b2fefa535ced05ed8013d84"
@@ -7340,11 +7335,6 @@ core-js@^3.0.4, core-js@^3.19.3, core-js@^3.6.5, core-js@^3.8.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.0.tgz#f479dbfc3dffb035a0827602dd056839a774aa71"
   integrity sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==
 
-core-js@^3.1.3:
-  version "3.23.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.1.tgz#9f9a9255115f62c512db56d567f636da32ca0b78"
-  integrity sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -9219,14 +9209,6 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-feather-icons@^4.29.0:
-  version "4.29.0"
-  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.29.0.tgz#4e40e3cbb7bf359ffbbf700edbebdde4e4a74ab6"
-  integrity sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^3.1.3"
-
 fecha@^4.2.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.1.tgz#0a83ad8f86ef62a091e22bb5a039cd03d23eecce"