Convert theme picker to Phosphor icons

Author: pimterry

src/components/common/tabbed-options.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Icon, IconProp } from '../../icons';
+import { Icon, IconKey } from '../../icons';
 import { styled, css } from '../../styles';
 import { omit } from 'lodash';
 import { UnstyledButton } from './inputs';
@@ -45,7 +45,7 @@ export const TabsContainer = styled((p: {
 export const Tab = styled((p: {
     className?: string,
     selected?: boolean,
-    icon: IconProp,
+    icon: IconKey,
     value: any,
     children: React.ReactNode
 }) =>
@@ -56,7 +56,7 @@ export const Tab = styled((p: {
             event.tabValue = p.value;
         }}
     >
-        <Icon icon={p.icon} size='2x' />
+        <Icon icon={p.icon} />
         { p.children }
     </UnstyledButton>
 )`
@@ -89,5 +89,7 @@ export const Tab = styled((p: {
 
     > svg {
         margin-bottom: 10px;
+        width: 2em;
+        height: auto;
     }
 `;

src/components/settings/settings-page.tsx

@@ -300,25 +300,25 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 }}
                             >
                                 <Tab
-                                    icon={['fas', 'magic']}
+                                    icon='MagicWand'
                                     value='automatic'
                                 >
                                     Automatic
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'sun']}
+                                    icon='Sun'
                                     value='light'
                                 >
                                     Light
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'moon']}
+                                    icon='Moon'
                                     value='dark'
                                 >
                                     Dark
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'adjust']}
+                                    icon='CircleHalf'
                                     value='high-contrast'
                                 >
                                     High Contrast

src/icons.tsx

@@ -19,6 +19,10 @@ import {
     Plug,
     QuestionMark,
     ArrowLeft,
+    MagicWand,
+    Sun,
+    Moon,
+    CircleHalf
 } from '@phosphor-icons/react';
 
 export type IconKey = keyof typeof Icons;
@@ -46,6 +50,10 @@ const Icons = {
     Plug,
     QuestionMark,
     ArrowLeft,
+    MagicWand,
+    Sun,
+    Moon,
+    CircleHalf
 } as const;
 
 // Import required FA icons: