Convert Icon to Typescript

(cherry picked from commit ae7b187e412a080e30fc6826564ce9197ed2f329)

Closes #10347

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds } from 'Helpers/Props';
 import TooltipPosition from 'Helpers/Props/TooltipPosition';
@@ -61,7 +61,7 @@ function QueueStatus(props: QueueStatusProps) {
 
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
-  let iconKind = kinds.DEFAULT;
+  let iconKind: IconProps['kind'] = kinds.DEFAULT;
   let title = translate('Downloading');
 
   if (status === 'paused') {

frontend/src/Components/Icon.js

@@ -1,73 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { kinds } from 'Helpers/Props';
-import styles from './Icon.css';
-
-class Icon extends PureComponent {
-
-  //
-  // Render
-
-  render() {
-    const {
-      containerClassName,
-      className,
-      name,
-      kind,
-      size,
-      title,
-      isSpinning,
-      ...otherProps
-    } = this.props;
-
-    const icon = (
-      <FontAwesomeIcon
-        className={classNames(
-          className,
-          styles[kind]
-        )}
-        icon={name}
-        spin={isSpinning}
-        style={{
-          fontSize: `${size}px`
-        }}
-        {...otherProps}
-      />
-    );
-
-    if (title) {
-      return (
-        <span
-          className={containerClassName}
-          title={typeof title === 'function' ? title() : title}
-        >
-          {icon}
-        </span>
-      );
-    }
-
-    return icon;
-  }
-}
-
-Icon.propTypes = {
-  containerClassName: PropTypes.string,
-  className: PropTypes.string,
-  name: PropTypes.object.isRequired,
-  kind: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  isSpinning: PropTypes.bool.isRequired,
-  fixedWidth: PropTypes.bool.isRequired
-};
-
-Icon.defaultProps = {
-  kind: kinds.DEFAULT,
-  size: 14,
-  isSpinning: false,
-  fixedWidth: false
-};
-
-export default Icon;

frontend/src/Components/Icon.tsx

@@ -0,0 +1,59 @@
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconProps,
+} from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { kinds } from 'Helpers/Props';
+import styles from './Icon.css';
+
+export interface IconProps
+  extends Omit<
+    FontAwesomeIconProps,
+    'icon' | 'spin' | 'name' | 'title' | 'size'
+  > {
+  containerClassName?: ComponentProps<'span'>['className'];
+  name: FontAwesomeIconProps['icon'];
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: number;
+  isSpinning?: FontAwesomeIconProps['spin'];
+  title?: string | (() => string);
+}
+
+export default function Icon({
+  containerClassName,
+  className,
+  name,
+  kind = kinds.DEFAULT,
+  size = 14,
+  title,
+  isSpinning = false,
+  fixedWidth = false,
+  ...otherProps
+}: IconProps) {
+  const icon = (
+    <FontAwesomeIcon
+      className={classNames(className, styles[kind])}
+      icon={name}
+      spin={isSpinning}
+      fixedWidth={fixedWidth}
+      style={{
+        fontSize: `${size}px`,
+      }}
+      {...otherProps}
+    />
+  );
+
+  if (title) {
+    return (
+      <span
+        className={containerClassName}
+        title={typeof title === 'function' ? title() : title}
+      >
+        {icon}
+      </span>
+    );
+  }
+
+  return icon;
+}

frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfoRow.tsx

@@ -1,11 +1,10 @@
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import styles from './DiscoverMovieOverviewInfoRow.css';
 
 interface DiscoverMovieOverviewInfoRowProps {
   title?: string;
-  iconName?: IconDefinition;
+  iconName: IconProps['name'];
   label: string | null;
 }
 

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx

@@ -357,7 +357,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
             <>
               {indexerFlags ? (
                 <Popover
-                  anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                  anchor={<Icon name={icons.FLAG} />}
                   title={translate('IndexerFlags')}
                   body={<IndexerFlags indexerFlags={indexerFlags} />}
                   position={tooltipPositions.LEFT}

frontend/src/InteractiveSearch/InteractiveSearchRow.tsx

@@ -283,7 +283,7 @@ function InteractiveSearchRow(props: InteractiveSearchRowProps) {
       <TableRowCell className={styles.indexerFlags}>
         {indexerFlags.length ? (
           <Popover
-            anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+            anchor={<Icon name={icons.FLAG} />}
             title={translate('IndexerFlags')}
             body={
               <ul>

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfoRow.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import styles from './MovieIndexOverviewInfoRow.css';
 
 interface MovieIndexOverviewInfoRowProps {
   title?: string;
-  iconName: object;
+  iconName: IconProps['name'];
   label: string;
 }
 

frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx

@@ -2,7 +2,7 @@ import moment from 'moment';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CommandBody } from 'Commands/Command';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -19,7 +19,10 @@ import translate from 'Utilities/String/translate';
 import QueuedTaskRowNameCell from './QueuedTaskRowNameCell';
 import styles from './QueuedTaskRow.css';
 
-function getStatusIconProps(status: string, message: string | undefined) {
+function getStatusIconProps(
+  status: string,
+  message: string | undefined
+): IconProps {
   const title = titleCase(status);
 
   switch (status) {