Replace Font Awesome with SF Symbols

src/screens/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
+import { CompositeNavigationProp } from '@react-navigation/native';
+import SetJellyfinServer from './modals/SetJellyfinServer';
 import Player from './Player';
 import Music from './Music';
 import Settings from './Settings';
-import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
-import SetJellyfinServer from './modals/SetJellyfinServer';
-import { CompositeNavigationProp } from '@react-navigation/native';
+import PlayPauseIcon from 'assets/play-pause-fill.svg';
+import NotesIcon from 'assets/notes.svg';
+import GearIcon from 'assets/gear.svg';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -16,9 +19,38 @@ type Screens = {
     Settings: undefined;
 }
 
+function getIcon(route: string): React.FC<any> | null {
+    switch(route) {
+        case 'NowPlaying':
+            return PlayPauseIcon;
+        case 'Music':
+            return NotesIcon;
+        case 'Settings':
+            return GearIcon;
+        default:
+            return null;
+    }
+}
+
 function Screens() {
     return (
-        <Tab.Navigator>
+        <Tab.Navigator
+            screenOptions={({ route }) => ({
+                tabBarIcon: ({ focused, color, size }) => {
+                    const Icon = getIcon(route.name);
+
+                    if (!Icon) {
+                        return null;
+                    }
+
+                    return <Icon fill={color} width={size} height={size} />;
+                }
+            })}
+            tabBarOptions={{
+                activeTintColor: 'salmon',
+                inactiveTintColor: 'gray',
+            }}
+        >
             <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: 'Now Playing' }} />
             <Tab.Screen name="Music" component={Music} />
             <Tab.Screen name="Settings" component={Settings} />