Refactor Phosphor setup to use typesafe string keys

Avoiding using the components directly avoids accidental imports, makes
icon-using code simpler in lots of places, and makes it much easier to
start setting up a progressive migration from FontAwesome to PI, by
supporting array + string key in various APIs and handling both, until
FA is gone.

Author: pimterry

src/components/app.tsx

@@ -34,7 +34,6 @@ import { PlanPicker } from './account/plan-picker';
 import { ModalOverlay } from './account/modal-overlay';
 import { CheckoutSpinner } from './account/checkout-spinner';
 import { HtmlContextMenu } from './html-context-menu';
-import { Icons } from '../icons';
 
 const AppContainer = styled.div<{ inert?: boolean }>`
     display: flex;
@@ -110,15 +109,15 @@ class App extends React.Component<{
             {
                 name: 'Intercept',
                 title: `Connect clients to HTTP Toolkit (${Ctrl}+1)`,
-                icon: Icons.Plugs,
+                icon: 'Plugs',
                 position: 'top',
                 type: 'router',
                 url: '/intercept'
             },
             {
                 name: 'View',
                 title: `View intercepted HTTP traffic (${Ctrl}+2)`,
-                icon: Icons.MagnifyingGlass,
+                icon: 'MagnifyingGlass',
                 position: 'top',
                 type: 'router',
                 url: '/view'
@@ -134,7 +133,7 @@ class App extends React.Component<{
                 ? [{
                     name: 'Mock',
                     title: `Add rules to mock & rewrite HTTP traffic (${Ctrl}+3)`,
-                    icon: Icons.Pencil,
+                    icon: 'Pencil',
                     position: 'top',
                     type: 'router',
                     url: '/mock'
@@ -146,7 +145,7 @@ class App extends React.Component<{
                 ? [{
                     name: 'Send',
                     title: `Send HTTP requests directly (${Ctrl}+4)`,
-                    icon: Icons.PaperPlaneTilt,
+                    icon: 'PaperPlaneTilt',
                     position: 'top',
                     type: 'router',
                     url: '/send'
@@ -158,15 +157,15 @@ class App extends React.Component<{
                 ? {
                     name: 'Settings',
                     title: `Reconfigure HTTP Toolkit and manage your account (${Ctrl}+9)`,
-                    icon: Icons.GearSix,
+                    icon: 'GearSix',
                     position: 'bottom',
                     type: 'router',
                     url: '/settings'
                 }
                 : {
                     name: 'Get Pro',
                     title: "Sign up for HTTP Toolkit Pro",
-                    icon: Icons.Star,
+                    icon: 'Star',
                     position: 'bottom',
                     type: 'callback',
                     onClick: () => this.props.accountStore.getPro('sidebar')
@@ -176,7 +175,7 @@ class App extends React.Component<{
             {
                 name: 'Give feedback',
                 title: "Suggest features or report issues",
-                icon: Icons.ChatText,
+                icon: 'ChatText',
                 position: 'bottom',
                 highlight: true,
                 type: 'web',

src/components/common/empty-state.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import * as _ from 'lodash';
 
 import { styled } from '../../styles'
-import { PhosphorIcon } from '../../icons';
+import { IconKey, PhosphorIcon } from '../../icons';
 
 export const EmptyState = styled((props: React.HTMLAttributes<HTMLDivElement> & {
     className?: string,
-    icon: PhosphorIcon,
+    icon: IconKey,
     children?: React.ReactNode
 }) => (
     <div className={props.className}>
-        <props.icon />
+        <PhosphorIcon icon={props.icon} />
         { props.children && <>
             <br/>
             { props.children }

src/components/common/icon-button.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 
 import { styled } from '../../styles'
-import { Icon, IconProp } from '../../icons';
+import { Icon, IconProp, IconKey, PhosphorIcon } from '../../icons';
 
 import { UnstyledButton, UnstyledButtonLink } from './inputs';
 
 export const IconButton = styled((p: {
     className?: string,
     title: string,
-    icon: IconProp,
+    icon: IconProp | IconKey,
     disabled?: boolean,
     fixedWidth?: boolean,
     tabIndex?: number,
@@ -23,10 +23,16 @@ export const IconButton = styled((p: {
         onClick={p.onClick}
         onKeyDown={p.onKeyDown}
     >
-        <Icon
-            icon={p.icon}
-            fixedWidth={p.fixedWidth ? true : false}
-        />
+        { Array.isArray(p.icon)
+            ? <Icon
+                icon={p.icon}
+                fixedWidth={p.fixedWidth ? true : false}
+            />
+            : <PhosphorIcon
+                icon={p.icon as IconKey}
+                size='1.25em'
+            />
+        }
     </UnstyledButton>
 )`
     color: ${p => p.theme.mainColor};
@@ -43,6 +49,10 @@ export const IconButton = styled((p: {
             color: ${p => p.theme.popColor};
         }
     }
+
+    .phosphor-icon {
+        margin: 0 -3px; /* Fix alignment with FontAwesome in rows e.g. View right footer */
+    }
 `;
 
 export const IconButtonLink = styled((p: {

src/components/sidebar.tsx

@@ -5,15 +5,15 @@ import { Link, Match } from '@reach/router';
 import * as dedent from 'dedent';
 
 import { styled, css, Theme } from '../styles';
-import { PhosphorIcon } from '../icons';
+import { IconKey, PhosphorIcon } from '../icons';
 import { UI_VERSION, desktopVersion, serverVersion } from '../services/service-versions';
 
 import { UnstyledButton } from './common/inputs';
 import logo from '../images/logo-icon.svg';
 
 export interface SidebarItem {
     name: string;
-    icon: PhosphorIcon;
+    icon: IconKey;
     position: 'top' | 'bottom';
     highlight?: true;
 
@@ -151,7 +151,7 @@ const SidebarButton = styled(
 export const Sidebar = observer((props: SidebarProps) => {
     const items = props.items.map((item, i) => {
         const itemContent = <>
-            <item.icon size={34} />
+            <PhosphorIcon icon={item.icon} size={34} />
             { item.name }
         </>;
 

src/components/view/view-event-list.tsx

@@ -7,7 +7,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 
 import { styled } from '../../styles'
-import { ArrowIcon, Icon, WarningIcon, Icons } from '../../icons';
+import { ArrowIcon, Icon, PhosphorIcon, WarningIcon } from '../../icons';
 
 import {
     CollectedEvent,
@@ -789,16 +789,16 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
             {
                 events.length === 0
                 ? (isPaused
-                    ? <EmptyStateOverlay icon={Icons.Pause}>
+                    ? <EmptyStateOverlay icon='Pause'>
                         Interception is paused, resume it to collect intercepted requests
                     </EmptyStateOverlay>
-                    : <EmptyStateOverlay icon={Icons.Plug}>
+                    : <EmptyStateOverlay icon='Plug'>
                         Connect a client and intercept some requests, and they'll appear here
                     </EmptyStateOverlay>
                 )
 
                 : filteredEvents.length === 0
-                ? <EmptyStateOverlay icon={Icons.QuestionMark}>
+                ? <EmptyStateOverlay icon='QuestionMark'>
                         No requests match this search filter{
                             isPaused ? ' and interception is paused' : ''
                         }

src/components/view/view-page.tsx

@@ -15,7 +15,6 @@ import * as portals from 'react-reverse-portal';
 
 import { WithInjected, CollectedEvent } from '../../types';
 import { NARROW_LAYOUT_BREAKPOINT, styled } from '../../styles';
-import { Icons } from '../../icons';
 import { useHotkeys, isEditable, windowSize } from '../../util/ui';
 import { debounceComputed } from '../../util/observable';
 import { UnreachableCheck } from '../../util/error';
@@ -307,7 +306,7 @@ class ViewPage extends React.Component<ViewPageProps> {
         let rightPane: JSX.Element | null;
         if (!this.selectedEvent) {
             if (this.splitDirection === 'vertical') {
-                rightPane = <EmptyState key='details' icon={Icons.ArrowLeft}>
+                rightPane = <EmptyState key='details' icon='ArrowLeft'>
                     Select an exchange to see the full details.
                 </EmptyState>;
             } else {

src/icons.ts src/icons.tsxsrc/icons.ts renamed to src/icons.tsx

@@ -3,7 +3,6 @@ import { styled, warningColor } from './styles';
 
 // Import required Phosphor icons:
 import {
-    type Icon as PhosphorIcon,
     type IconProps as PhosphorIconProps,
 
     // Sidebar icons
@@ -22,10 +21,19 @@ import {
     ArrowLeft,
 } from '@phosphor-icons/react';
 
-export type { PhosphorIcon, PhosphorIconProps };
-export type PhosphorIconKey = keyof typeof Icons;
+export type IconKey = keyof typeof Icons;
 
-export const Icons = {
+export const PhosphorIcon = React.memo((props: { icon: IconKey } & PhosphorIconProps) => {
+    const { icon, ...otherProps } = props;
+    const PIcon = Icons[props.icon];
+
+    return <PIcon
+        className='phosphor-icon'
+        {...otherProps}
+    />;
+});
+
+const Icons = {
     Plugs,
     MagnifyingGlass,
     Pencil,

src/styles.ts

@@ -331,5 +331,10 @@ export const GlobalStyles = createGlobalStyle`
         }
     }
 
+    .phosphor-icon {
+        /* Ensures icons line up with FontAwesome & neighbouring text */
+        vertical-align: -0.125em;
+    }
+
     ${p => p.theme.globalCss}
 `;