Use font awesome names for icons

src/components/BackButton.tsx

@@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => (
   <IconButton
     containerStyle={{ padding: theme.margin.common }}
     onPress={() => navigation.goBack()}
-    iconName="back"
+    iconName="chevron-left"
     size={theme.icon.size.extraExtraLarge}
     color={theme.color.primary}
   />

src/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, StyleSheet, TouchableOpacity, ViewStyle, StyleProp } from 'react-native'
 
-import { IconCompleted, IconSelection } from './Icon'
+import { Icon } from './Icon'
 import Log from '../lib/Log'
 import theme from '../styles/theme'
 
@@ -31,7 +31,11 @@ const Checkbox = ({
       <View style={[styles.iconContainer, iconContainerStyle]}>
         <TouchableOpacity testID={testID} onPress={onPress} activeOpacity={0.5}>
           <View style={[styles.iconInnerContainer, { width: lineHeight, height: lineHeight }]}>
-            {enabled ? <IconCompleted /> : <IconSelection />}
+            {enabled ? (
+              <Icon name="check-square" color={theme.color.black} />
+            ) : (
+              <Icon name="square" color={theme.color.black} />
+            )}
           </View>
         </TouchableOpacity>
       </View>

src/components/Date.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 
-import { IconDate } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
 
 type Props = {
@@ -12,7 +13,7 @@ type Props = {
 
 const Date = ({ date, containerStyle }: Props) => (
   <IconText
-    icon={<IconDate />}
+    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.greySemi} size={theme.icon.size.medium} />}
     text={date}
     style={{
       containerStyle,

src/components/Disclose.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, TouchableOpacity, View, Text, ViewStyle, TextStyle, StyleProp } from 'react-native'
 
-import { IconDisclose } from './Icon'
+import { Icon } from './Icon'
 import Log from '../lib/Log'
 import appTextStyle from '../styles/text'
 import theme from '../styles/theme'
@@ -19,7 +19,7 @@ const Disclose = ({ text, onPress, textStyle, containerStyle }: Props) => {
     <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
       <View style={[styles.containerStyle, containerStyle]}>
         <Text style={[appTextStyle.link, textStyle]}>{text}</Text>
-        <IconDisclose />
+        <Icon name="chevron-right" size={theme.icon.size.extraLarge} />
       </View>
     </TouchableOpacity>
   )

src/components/DocumentLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 
-import { IconDocument } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
@@ -15,7 +15,7 @@ type Props = {
 
 const DocumentLink = ({ onPress, containerStyle, label }: Props) => (
   <IconText
-    icon={<IconDocument size={theme.icon.size.medium} />}
+    icon={<Icon name="file-lines" size={theme.icon.size.medium} style="solid" />}
     text={label}
     style={{
       containerStyle,

src/components/Icon.tsx

@@ -7,130 +7,22 @@ import theme from '../styles/theme'
 
 export type IconStyleProp = 'light' | 'solid'
 
-type IconAppearanceProps = {
+export type IconAppearanceProps = {
   style?: IconStyleProp
   color?: string
   size?: number
   testID?: string
 }
 
-type IconProps = IconAppearanceProps & {
+export type IconProps = IconAppearanceProps & {
   name: IconName
 }
 
-const { primary, success, warning, error, greySemi, greyBase, black, white, white80 } = theme.color
-const { medium, large, extraLarge, extraExtraLarge } = theme.icon.size
-
-const defaultProps: { [key in IconName]?: IconAppearanceProps } = {
-  add: { size: extraLarge },
-  advance: { style: 'solid' },
-  check: { color: success },
-  close: { color: greyBase, size: extraLarge },
-  collapse: { size: extraExtraLarge },
-  completed: { color: black },
-  count: { color: white80 },
-  date: { style: 'solid', color: greySemi, size: medium },
-  disclose: { size: extraLarge },
-  document: { style: 'solid' },
-  email: { style: 'solid' },
-  enumeration: { style: 'solid' },
-  error: { color: error },
-  'error-message': { color: error },
-  europe: { color: greySemi, style: 'solid' },
-  exclusion: { color: error },
-  expand: { size: extraExtraLarge },
-  'external-link': { size: medium },
-  hide: { style: 'solid' },
-  language: { style: 'solid' },
-  location: { style: 'solid', color: greySemi, size: medium },
-  new: { color: success },
-  next: { size: extraExtraLarge },
-  playback: { color: white, style: 'solid', size: extraExtraLarge },
-  previous: { size: extraExtraLarge },
-  'rarity-common': { color: success, style: 'solid', size: medium },
-  'rarity-rare': { color: warning, style: 'solid', size: medium },
-  'rarity-relatively-common': { color: '#45D1D6', style: 'solid', size: medium },
-  'rarity-unknown': { color: '#A6A6A4', style: 'solid', size: medium },
-  'rarity-very-rare': { color: error, style: 'solid', size: medium },
-  selection: { color: black },
-  show: { style: 'solid' },
-  success: { color: success },
-  'tab-add': { size: extraExtraLarge },
-  user: { color: greySemi },
-  'validation-accepted-by-admin': { style: 'solid', size: theme.icon.size.medium },
-  'validation-accepted-with-evidence': { color: success, style: 'solid', size: theme.icon.size.medium },
-  warning: { color: warning },
-}
-
-export const IconAchievement = (props: IconAppearanceProps) => <Icon name="achievement" {...props} />
-export const IconAdd = (props: IconAppearanceProps) => <Icon name="add" {...props} />
-export const IconAddUser = (props: IconAppearanceProps) => <Icon name="add-user" {...props} />
-export const IconAdvance = (props: IconAppearanceProps) => <Icon name="advance" {...props} />
-export const IconAnalytics = (props: IconAppearanceProps) => <Icon name="analytics" {...props} />
-export const IconBadge = (props: IconAppearanceProps) => <Icon name="badge" {...props} />
-export const IconCheck = (props: IconAppearanceProps) => <Icon name="check" {...props} />
-export const IconCircleXmark = (props: IconAppearanceProps) => <Icon name="circle-xmark" {...props} />
-export const IconClose = (props: IconAppearanceProps) => <Icon name="close" {...props} />
-export const IconCollapse = (props: IconAppearanceProps) => <Icon name="collapse" {...props} />
-export const IconCompleted = (props: IconAppearanceProps) => <Icon name="completed" {...props} />
-export const IconConfiguration = (props: IconAppearanceProps) => <Icon name="configuration" {...props} />
-export const IconCopy = (props: IconAppearanceProps) => <Icon name="copy" {...props} />
-export const IconCount = (props: IconAppearanceProps) => <Icon name="count" {...props} />
-export const IconCrop = (props: IconAppearanceProps) => <Icon name="crop" {...props} />
-export const IconDate = (props: IconAppearanceProps) => <Icon name="date" {...props} />
-export const IconDateRange = (props: IconAppearanceProps) => <Icon name="date-range" {...props} />
-export const IconDebug = (props: IconAppearanceProps) => <Icon name="debug" {...props} />
-export const IconDelete = (props: IconAppearanceProps) => <Icon name="delete" {...props} />
-export const IconDisclose = (props: IconAppearanceProps) => <Icon name="disclose" {...props} />
-export const IconDocument = (props: IconAppearanceProps) => <Icon name="document" {...props} />
-export const IconEnumeration = (props: IconAppearanceProps) => <Icon name="enumeration" {...props} />
-export const IconError = (props: IconAppearanceProps) => <Icon name="error" {...props} />
-export const IconErrorMessage = (props: IconAppearanceProps) => <Icon name="error-message" {...props} />
-export const IconExpand = (props: IconAppearanceProps) => <Icon name="expand" {...props} />
-export const IconExternalLink = (props: IconAppearanceProps) => <Icon name="external-link" {...props} />
-export const IconFeed = (props: IconAppearanceProps) => <Icon name="feed" {...props} />
-export const IconGroup = (props: IconAppearanceProps) => <Icon name="group" {...props} />
-export const IconImageGallery = (props: IconAppearanceProps) => <Icon name="image-gallery" {...props} />
-export const IconInfo = (props: IconAppearanceProps) => <Icon name="info" {...props} />
-export const IconList = (props: IconAppearanceProps) => <Icon name="list" {...props} />
-export const IconLocation = (props: IconAppearanceProps) => <Icon name="location" {...props} />
-export const IconLogin = (props: IconAppearanceProps) => <Icon name="login" {...props} />
-export const IconNext = (props: IconAppearanceProps) => <Icon name="next" {...props} />
-export const IconPhotography = (props: IconAppearanceProps) => <Icon name="photography" {...props} />
-export const IconPlayback = (props: IconAppearanceProps) => <Icon name="playback" {...props} />
-export const IconPrevious = (props: IconAppearanceProps) => <Icon name="previous" {...props} />
-export const IconQrCode = (props: IconAppearanceProps) => <Icon name="qr-code" {...props} />
-export const IconRarityCommon = (props: IconAppearanceProps) => <Icon name="rarity-common" {...props} />
-export const IconRarityRare = (props: IconAppearanceProps) => <Icon name="rarity-rare" {...props} />
-export const IconRarityUnknown = (props: IconAppearanceProps) => <Icon name="rarity-unknown" {...props} />
-export const IconRarityVeryRare = (props: IconAppearanceProps) => <Icon name="rarity-very-rare" {...props} />
-export const IconRarityRelativelyCommon = (props: IconAppearanceProps) => (
-  <Icon name="rarity-relatively-common" {...props} />
-)
-export const IconSelection = (props: IconAppearanceProps) => <Icon name="selection" {...props} />
-export const IconSettings = (props: IconAppearanceProps) => <Icon name="settings" {...props} />
-export const IconSpeciesLists = (props: IconAppearanceProps) => <Icon name="species-lists" {...props} />
-export const IconStatistics = (props: IconAppearanceProps) => <Icon name="statistics" {...props} />
-export const IconSuccess = (props: IconAppearanceProps) => <Icon name="success" {...props} />
-export const IconTabAdd = (props: IconAppearanceProps) => <Icon name="tab-add" {...props} />
-export const IconUpload = (props: IconAppearanceProps) => <Icon name="upload" {...props} />
-export const IconUser = (props: IconAppearanceProps) => <Icon name="user" {...props} />
-export const IconUserInactive = (props: IconAppearanceProps) => <Icon name="user-inactive" {...props} />
-export const IconUserProfile = (props: IconAppearanceProps) => <Icon name="user-profile" {...props} />
-export const IconUserVerified = (props: IconAppearanceProps) => <Icon name="user-verified" {...props} />
-export const IconValidationAcceptedByAdmin = (props: IconAppearanceProps) => (
-  <Icon name="validation-accepted-by-admin" {...props} />
-)
-export const IconValidationAcceptedWithEvidence = (props: IconAppearanceProps) => (
-  <Icon name="validation-accepted-with-evidence" {...props} />
-)
-
 export const Icon = ({ name, color, size, testID, style }: IconProps): JSX.Element => {
-  const props = defaultProps[name]
-  const iconStyle = style ?? props?.style ?? 'light'
+  const iconStyle = style ?? 'light'
   const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid
-  const iconColor = color ?? props?.color ?? primary
-  const iconSize = size ?? props?.size ?? large
+  const iconColor = color ?? theme.color.primary
+  const iconSize = size ?? theme.icon.size.large
 
   return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} />
 }

src/components/InputField.tsx

@@ -1,7 +1,7 @@
 import React, { RefAttributes, useState } from 'react'
 import { Platform, TextInput, Text, View, StyleSheet, ViewStyle, TextInputProps, StyleProp } from 'react-native'
 
-import { IconError } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
 import font from '../styles/font'
 import textStyle from '../styles/text'
@@ -48,7 +48,7 @@ const InputField = ({ containerStyle, inputProps, inputStyle, label, rightIcon,
       </View>
       {errorMessage && (
         <IconText
-          icon={<IconError size={theme.icon.size.small} />}
+          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error} />}
           text={errorMessage}
           style={{
             textStyle: styles.errorStyle,

src/components/Lightbox.tsx

@@ -4,7 +4,7 @@ import { SafeAreaView, StyleSheet, Text, TextStyle, TouchableOpacity, View } fro
 import ImageView from '@observation.org/react-native-image-viewing'
 import Color from 'color'
 
-import { IconClose } from './Icon'
+import { Icon } from './Icon'
 import PageIndicator from './PageIndicator'
 import font from '../styles/font'
 import textStyle from '../styles/text'
@@ -23,7 +23,8 @@ const getLightboxHeaderComponent =
           </View>
           <View style={{ flex: 1 }}>
             <TouchableOpacity style={styles.closeButton} onPress={() => onClose()} hitSlop={hitSlop}>
-              <IconClose
+              <Icon
+                name="times"
                 color={Color(theme.color.white).alpha(0.5).string()}
                 size={theme.icon.size.extraExtraLarge}
                 testID="close-lightbox"

src/components/Location.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 
-import { IconLocation } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
 import textStyle from '../styles/text'
+import theme from '../styles/theme'
 
 type Props = {
   location: string
@@ -12,7 +13,7 @@ type Props = {
 
 const Location = ({ location, containerStyle }: Props) => (
   <IconText
-    icon={<IconLocation />}
+    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.greySemi} size={theme.icon.size.medium} />}
     text={location}
     style={{
       containerStyle,

src/components/MoreInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 
-import { IconInfo } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
@@ -15,7 +15,7 @@ type Props = {
 
 const MoreInfo = ({ onPress, containerStyle, label }: Props) => (
   <IconText
-    icon={<IconInfo size={theme.icon.size.medium} />}
+    icon={<Icon name="info-circle" size={theme.icon.size.medium} />}
     text={label}
     style={{
       containerStyle,

src/components/NotificationPopup.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
-import { IconClose } from './Icon'
+import { Icon } from './Icon'
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
 import Popup from '../components/Popup'
 import textStyle from '../styles/text'
@@ -27,7 +27,7 @@ const NotificationPopup = ({ visible, title, message, leftButton, rightButton, o
 
         {onClose && (
           <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} style={styles.closeButton}>
-            <IconClose />
+            <Icon name="times" color={theme.color.greyBase} size={theme.icon.size.extraLarge} />
           </TouchableOpacity>
         )}
       </View>

src/components/ProgressBarList.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { IconSuccess } from './Icon'
+import { Icon } from './Icon'
 import ProgressBar from '../data/ProgressBar'
 import font from '../styles/font'
 import theme from '../styles/theme'
@@ -94,9 +94,14 @@ const ProgressBarList = ({ progressBars, separator }: Props) => {
             }}
           >
             {progressBar.isCompleted ? (
-              <IconSuccess style="solid" color={progressBar.backgroundColor} size={theme.icon.size.small} />
+              <Icon
+                name="circle-check"
+                style="solid"
+                color={progressBar.backgroundColor}
+                size={theme.icon.size.small}
+              />
             ) : (
-              <IconSuccess color={theme.color.greySemi} size={theme.icon.size.small} />
+              <Icon name="circle-check" color={theme.color.greySemi} size={theme.icon.size.small} />
             )}
           </View>
         ))}

src/components/Tooltip.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, View, Text, TouchableOpacity, ViewStyle, StyleProp } from 'react-native'
 
-import { Icon, IconClose } from './Icon'
+import { Icon } from './Icon'
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
 import { IconName } from '../lib/Icons'
 import textStyle from '../styles/text'
@@ -45,7 +45,7 @@ const Tooltip = ({
           {closable && (
             <View style={{ ...styles.iconContainer, marginLeft: theme.margin.common }}>
               <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} accessibilityLabel="close">
-                <IconClose />
+                <Icon name="times" color={theme.color.greyBase} size={theme.icon.size.extraLarge} />
               </TouchableOpacity>
             </View>
           )}

src/components/WebLink.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
-import { IconExternalLink } from './Icon'
+import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyles from '../styles/text'
 
 type Props = {
@@ -14,7 +15,7 @@ type Props = {
 
 const WebLink = ({ onPress, containerStyle, text, textStyle }: Props) => (
   <IconText
-    icon={<IconExternalLink />}
+    icon={<Icon name="external-link" size={theme.icon.size.medium} />}
     text={text}
     style={{
       containerStyle,