Start using Phosphor icons, initially for sidebar & View empty state

Author: pimterry

package-lock.json

@@ -45,6 +45,7 @@
     "@httptoolkit/accounts": "^2.1.1",
     "@httptoolkit/httpsnippet": "^2.1.7",
     "@open-rpc/meta-schema": "^1.14.2",
+    "@phosphor-icons/react": "^2.1.5",
     "@reach/router": "^1.2.1",
     "@sentry/browser": "^7.112.2",
     "@sentry/webpack-plugin": "^2.16.1",

package.json

@@ -34,6 +34,7 @@ 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;
@@ -109,15 +110,15 @@ class App extends React.Component<{
             {
                 name: 'Intercept',
                 title: `Connect clients to HTTP Toolkit (${Ctrl}+1)`,
-                icon: ['fas', 'plug'],
+                icon: Icons.Plugs,
                 position: 'top',
                 type: 'router',
                 url: '/intercept'
             },
             {
                 name: 'View',
                 title: `View intercepted HTTP traffic (${Ctrl}+2)`,
-                icon: ['fas', 'search'],
+                icon: Icons.MagnifyingGlass,
                 position: 'top',
                 type: 'router',
                 url: '/view'
@@ -133,7 +134,7 @@ class App extends React.Component<{
                 ? [{
                     name: 'Mock',
                     title: `Add rules to mock & rewrite HTTP traffic (${Ctrl}+3)`,
-                    icon: ['fas', 'theater-masks'],
+                    icon: Icons.Pencil,
                     position: 'top',
                     type: 'router',
                     url: '/mock'
@@ -145,7 +146,7 @@ class App extends React.Component<{
                 ? [{
                     name: 'Send',
                     title: `Send HTTP requests directly (${Ctrl}+4)`,
-                    icon: ['far', 'paper-plane'],
+                    icon: Icons.PaperPlaneTilt,
                     position: 'top',
                     type: 'router',
                     url: '/send'
@@ -157,15 +158,15 @@ class App extends React.Component<{
                 ? {
                     name: 'Settings',
                     title: `Reconfigure HTTP Toolkit and manage your account (${Ctrl}+9)`,
-                    icon: ['fas', 'cog'],
+                    icon: Icons.GearSix,
                     position: 'bottom',
                     type: 'router',
                     url: '/settings'
                 }
                 : {
                     name: 'Get Pro',
                     title: "Sign up for HTTP Toolkit Pro",
-                    icon: ['far', 'star'],
+                    icon: Icons.Star,
                     position: 'bottom',
                     type: 'callback',
                     onClick: () => this.props.accountStore.getPro('sidebar')
@@ -175,7 +176,7 @@ class App extends React.Component<{
             {
                 name: 'Give feedback',
                 title: "Suggest features or report issues",
-                icon: ['far', 'comment'],
+                icon: Icons.ChatText,
                 position: 'bottom',
                 highlight: true,
                 type: 'web',

src/components/app.tsx

@@ -2,20 +2,15 @@ import * as React from 'react';
 import * as _ from 'lodash';
 
 import { styled } from '../../styles'
-import { Icon, IconProp } from '../../icons';
+import { PhosphorIcon } from '../../icons';
 
 export const EmptyState = styled((props: React.HTMLAttributes<HTMLDivElement> & {
     className?: string,
-    icon: IconProp,
-    spin?: true | 'slow',
+    icon: PhosphorIcon,
     children?: React.ReactNode
 }) => (
-    <div {..._.omit(props, ['message', 'icon', 'spin'])}>
-        <Icon
-            icon={props.icon}
-            spin={props.spin === true}
-            className={props.spin === 'slow' ? 'slow-spin' : undefined}
-        />
+    <div className={props.className}>
+        <props.icon />
         { props.children && <>
             <br/>
             { props.children }

src/components/common/empty-state.tsx

@@ -5,15 +5,15 @@ import { Link, Match } from '@reach/router';
 import * as dedent from 'dedent';
 
 import { styled, css, Theme } from '../styles';
-import { Icon, IconProp } from '../icons';
+import { 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: IconProp;
+    icon: PhosphorIcon;
     position: 'top' | 'bottom';
     highlight?: true;
 
@@ -49,8 +49,8 @@ const SidebarNav = styled.nav`
 `
 
 const sidebarItemStyles = css`
-    width: 70px;
-    height: 70px;
+    width: 72px;
+    height: 72px;
     margin: 0 auto;
 
     display: flex;
@@ -151,8 +151,8 @@ const SidebarButton = styled(
 export const Sidebar = observer((props: SidebarProps) => {
     const items = props.items.map((item, i) => {
         const itemContent = <>
-            <Icon size='2x' icon={item.icon} />
-            {item.name}
+            <item.icon size={34} />
+            { item.name }
         </>;
 
         if (item.type === 'web') {

src/components/sidebar.tsx

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

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

@@ -15,6 +15,7 @@ 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';
@@ -306,7 +307,7 @@ class ViewPage extends React.Component<ViewPageProps> {
         let rightPane: JSX.Element | null;
         if (!this.selectedEvent) {
             if (this.splitDirection === 'vertical') {
-                rightPane = <EmptyState key='details' icon={['fas', 'arrow-left']}>
+                rightPane = <EmptyState key='details' icon={Icons.ArrowLeft}>
                     Select an exchange to see the full details.
                 </EmptyState>;
             } else {

src/components/view/view-page.tsx

@@ -1,6 +1,45 @@
 import * as React from 'react';
 import { styled, warningColor } from './styles';
 
+// Import required Phosphor icons:
+import {
+    type Icon as PhosphorIcon,
+    type IconProps as PhosphorIconProps,
+
+    // Sidebar icons
+    Plugs,
+    MagnifyingGlass,
+    Pencil,
+    PaperPlaneTilt,
+    GearSix,
+    Star,
+    ChatText,
+
+    // Functional icons
+    Pause,
+    Plug,
+    QuestionMark,
+    ArrowLeft,
+} from '@phosphor-icons/react';
+
+export type { PhosphorIcon, PhosphorIconProps };
+export type PhosphorIconKey = keyof typeof Icons;
+
+export const Icons = {
+    Plugs,
+    MagnifyingGlass,
+    Pencil,
+    PaperPlaneTilt,
+    GearSix,
+    Star,
+    ChatText,
+
+    Pause,
+    Plug,
+    QuestionMark,
+    ArrowLeft,
+} as const;
+
 // Import required FA icons:
 import {
     library,