feat(ui): portainer base component css change [EE-3381] (#7115)

app/react/components/Icon.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import { ComponentType, ReactNode, useEffect } from 'react';
+import featherIcons from 'feather-icons';
+import { isValidElementType } from 'react-is';
+
+export interface IconProps {
+  icon: ReactNode | ComponentType<unknown>;
+  featherIcon?: boolean;
+}
+
+interface Props {
+  icon: ReactNode | ComponentType<unknown>;
+  feather?: boolean;
+  className?: string;
+}
+
+export function Icon({ icon, feather, className }: Props) {
+  useEffect(() => {
+    if (feather) {
+      featherIcons.replace();
+    }
+  }, [feather]);
+
+  if (typeof icon !== 'string') {
+    const Icon = isValidElementType(icon) ? icon : null;
+
+    return (
+      <span className={className} aria-hidden="true" role="img">
+        {Icon == null ? <>{icon}</> : <Icon />}
+      </span>
+    );
+  }
+
+  if (feather) {
+    return (
+      <i
+        data-feather={icon}
+        className={className}
+        aria-hidden="true"
+        role="img"
+      />
+    );
+  }
+
+  return (
+    <i className={clsx('fa', icon, className)} aria-hidden="true" role="img" />
+  );
+}