[IMPROVEMENT] Refactor icon package

app/containers/DisclosureIndicator.js

@@ -1,26 +1,24 @@
 import React from 'react';
-import { View, Image, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
+import { CustomIcon } from '../lib/Icons';
 
 const styles = StyleSheet.create({
 	disclosureContainer: {
 		marginLeft: 6,
 		marginRight: 9,
 		alignItems: 'center',
 		justifyContent: 'center'
-	},
-	disclosureIndicator: {
-		width: 20,
-		height: 20
 	}
 });
 
 export const DisclosureImage = React.memo(({ theme }) => (
-	<Image
-		source={{ uri: 'disclosure_indicator' }}
-		style={[styles.disclosureIndicator, { tintColor: themes[theme].auxiliaryTintColor }]}
+	<CustomIcon
+		name='chevron-right'
+		color={themes[theme].auxiliaryTintColor}
+		size={20}
 	/>
 ));
 DisclosureImage.propTypes = {

app/containers/HeaderButton.js

@@ -38,15 +38,15 @@ export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) =
 
 export const CloseModalButton = React.memo(({ navigation, testID, onPress = () => navigation.pop() }) => (
 	<CustomHeaderButtons left>
-		<Item title='close' iconName='cross' onPress={onPress} testID={testID} />
+		<Item title='close' iconName='Cross' onPress={onPress} testID={testID} />
 	</CustomHeaderButtons>
 ));
 
 export const CancelModalButton = React.memo(({ onPress, testID }) => (
 	<CustomHeaderButtons left>
 		{isIOS
 			? <Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
-			: <Item title='close' iconName='cross' onPress={onPress} testID={testID} />
+			: <Item title='close' iconName='Cross' onPress={onPress} testID={testID} />
 		}
 	</CustomHeaderButtons>
 ));
@@ -59,7 +59,7 @@ export const MoreButton = React.memo(({ onPress, testID }) => (
 
 export const SaveButton = React.memo(({ onPress, testID }) => (
 	<CustomHeaderButtons>
-		<Item title='save' iconName='Download' onPress={onPress} testID={testID} />
+		<Item title='save' iconName='download' onPress={onPress} testID={testID} />
 	</CustomHeaderButtons>
 ));
 

app/containers/MessageBox/CommandsPreview/Item.js

@@ -32,7 +32,7 @@ const Item = ({ item, theme }) => {
 						{ loading ? <ActivityIndicator theme={theme} /> : null }
 					</FastImage>
 				)
-				: <CustomIcon name='file-generic' size={36} color={themes[theme].actionTintColor} />
+				: <CustomIcon name='clip' size={36} color={themes[theme].actionTintColor} />
 			}
 		</TouchableOpacity>
 	);

app/containers/MessageBox/Recording.js

@@ -149,7 +149,7 @@ export default class extends React.PureComponent {
 						<CustomIcon
 							size={22}
 							color={themes[theme].dangerColor}
-							name='cross'
+							name='Cross'
 						/>
 					</BorderlessButton>
 					<Text key='currentTime' style={[styles.textBoxInput, { color: themes[theme].titleText }]}>{currentTime}</Text>

app/containers/MessageBox/ReplyPreview.js

@@ -71,7 +71,7 @@ const ReplyPreview = React.memo(({
 					theme={theme}
 				/>
 			</View>
-			<CustomIcon name='cross' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
+			<CustomIcon name='Cross' color={themes[theme].auxiliaryText} size={20} style={styles.close} onPress={close} />
 		</View>
 	);
 }, (prevProps, nextProps) => prevProps.replying === nextProps.replying && prevProps.theme === nextProps.theme);

app/containers/MessageBox/UploadModal.js

@@ -205,7 +205,7 @@ class UploadModal extends Component {
 				</View>
 			);
 		}
-		return (<CustomIcon name='file-generic' size={72} style={[styles.fileIcon, { color: themes[theme].tintColor }]} />);
+		return (<CustomIcon name='clip' size={72} style={[styles.fileIcon, { color: themes[theme].tintColor }]} />);
 	}
 
 	render() {

app/containers/MessageBox/buttons/BaseButton.js

@@ -17,7 +17,7 @@ const BaseButton = React.memo(({
 		accessibilityLabel={I18n.t(accessibilityLabel)}
 		accessibilityTraits='button'
 	>
-		<CustomIcon name={icon} size={23} color={themes[theme].tintColor} />
+		<CustomIcon name={icon} size={25} color={themes[theme].tintColor} />
 	</BorderlessButton>
 ));
 

app/containers/MessageBox/buttons/CancelEditingButton.js

@@ -8,7 +8,7 @@ const CancelEditingButton = React.memo(({ theme, onPress }) => (
 		onPress={onPress}
 		testID='messagebox-cancel-editing'
 		accessibilityLabel='Cancel_editing'
-		icon='cross'
+		icon='Cross'
 		theme={theme}
 	/>
 ));

app/containers/MessageBox/buttons/SendButton.js

@@ -8,7 +8,7 @@ const SendButton = React.memo(({ theme, onPress }) => (
 		onPress={onPress}
 		testID='messagebox-send-message'
 		accessibilityLabel='Send_message'
-		icon='Send-active'
+		icon='send-active'
 		theme={theme}
 	/>
 ));

app/containers/ReactionsModal.js

@@ -100,7 +100,7 @@ const ModalContent = React.memo(({
 					<View style={styles.titleContainer}>
 						<CustomIcon
 							style={[styles.closeButton, { color: themes[props.theme].buttonText }]}
-							name='cross'
+							name='Cross'
 							size={20}
 						/>
 						<Text style={[styles.title, { color: themes[props.theme].buttonText }]}>{I18n.t('Reactions')}</Text>

app/containers/RoomTypeIcon.js

@@ -1,16 +1,13 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { CustomIcon } from '../lib/Icons';
 import { STATUS_COLORS, themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
-	style: {
-		marginRight: 7,
-		marginTop: 3
-	},
-	discussion: {
-		marginRight: 6
+	icon: {
+		marginTop: 3,
+		marginRight: 4
 	}
 });
 
@@ -23,22 +20,32 @@ const RoomTypeIcon = React.memo(({
 
 	const color = themes[theme].auxiliaryText;
 
+	let icon = 'lock';
 	if (type === 'discussion') {
-		// FIXME: These are temporary only. We should have all room icons on <Customicon />, but our design team is still working on this.
-		return <CustomIcon name='chat' size={13} style={[styles.style, styles.iconColor, styles.discussion, { color }]} />;
-	}
-
-	if (type === 'c') {
-		return <Image source={{ uri: 'hashtag' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
-	} if (type === 'd') {
+		icon = 'chat';
+	} else if (type === 'c') {
+		icon = 'hash';
+	} else if (type === 'd') {
 		if (isGroupChat) {
-			return <CustomIcon name='team' size={13} style={[styles.style, styles.discussion, { color }]} />;
+			icon = 'team';
+		} else {
+			icon = 'at';
 		}
-		return <CustomIcon name='at' size={13} style={[styles.style, styles.discussion, { color }]} />;
-	} if (type === 'l') {
-		return <CustomIcon name='omnichannel' size={13} style={[styles.style, styles.discussion, { color: STATUS_COLORS[status] }]} />;
+	} else if (type === 'l') {
+		icon = 'livechat';
 	}
-	return <Image source={{ uri: 'lock' }} style={[styles.style, style, { width: size, height: size, tintColor: color }]} />;
+
+	return (
+		<CustomIcon
+			name={icon}
+			size={size}
+			style={[
+				type === 'l' ? { color: STATUS_COLORS[status] } : { color },
+				styles.icon,
+				style
+			]}
+		/>
+	);
 });
 
 RoomTypeIcon.propTypes = {
@@ -51,7 +58,7 @@ RoomTypeIcon.propTypes = {
 };
 
 RoomTypeIcon.defaultProps = {
-	size: 10
+	size: 16
 };
 
 export default RoomTypeIcon;

app/containers/TextInput.js

@@ -111,7 +111,7 @@ export default class RCTextInput extends React.PureComponent {
 		return (
 			<BorderlessButton onPress={this.tooglePassword} style={[styles.iconContainer, styles.iconRight]}>
 				<CustomIcon
-					name={showPassword ? 'Eye' : 'eye-off'}
+					name={showPassword ? 'eye' : 'eye-off'}
 					testID={testID ? `${ testID }-icon-right` : null}
 					style={{ color: themes[theme].auxiliaryText }}
 					size={20}

app/containers/UIKit/MultiSelect/Chips.js

@@ -24,7 +24,7 @@ const Chip = ({
 		<>
 			{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 			<Text numberOfLines={1} style={[styles.chipText, { color: themes[theme].titleText }]}>{textParser([item.text])}</Text>
-			<CustomIcon name='cross' size={16} color={themes[theme].auxiliaryText} />
+			<CustomIcon name='Cross' size={16} color={themes[theme].auxiliaryText} />
 		</>
 	</Touchable>
 );

app/containers/UIKit/MultiSelect/Input.js

@@ -22,7 +22,7 @@ const Input = ({
 			{
 				loading
 					? <ActivityIndicator style={[styles.loading, styles.icon]} />
-					: <CustomIcon name='arrow-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
+					: <CustomIcon name='chevron-down' size={22} color={themes[theme].auxiliaryText} style={styles.icon} />
 			}
 		</View>
 	</Touchable>

app/containers/UIKit/Select.js

@@ -55,7 +55,7 @@ export const Select = ({
 	const Icon = () => (
 		loading
 			? <ActivityIndicator style={styles.loading} />
-			: <CustomIcon size={22} name='arrow-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
+			: <CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
 	);
 
 	return (

app/containers/message/CallButton.js

@@ -22,7 +22,7 @@ const CallButton = React.memo(({
 				hitSlop={BUTTON_HIT_SLOP}
 			>
 				<>
-					<CustomIcon name='video' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
+					<CustomIcon name='video-1' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
 					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Click_to_join')}</Text>
 				</>
 			</Touchable>

app/containers/message/RepliedThread.js

@@ -26,7 +26,7 @@ const RepliedThread = React.memo(({
 
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
-			<CustomIcon name='thread' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
+			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
 			<Text style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} numberOfLines={1}>{msg}</Text>
 			<DisclosureIndicator theme={theme} />
 		</View>

app/containers/message/Thread.js

@@ -23,7 +23,7 @@ const Thread = React.memo(({
 				style={[styles.button, styles.smallButton, { backgroundColor: themes[theme].tintColor }]}
 				testID={`message-thread-button-${ msg }`}
 			>
-				<CustomIcon name='thread' size={20} style={[styles.buttonIcon, { color: themes[theme].buttonText }]} />
+				<CustomIcon name='threads' size={20} style={[styles.buttonIcon, { color: themes[theme].buttonText }]} />
 				<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
 			</View>
 			<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>

app/notifications/inApp/index.js

@@ -224,7 +224,7 @@ class NotificationBadge extends React.Component {
 					</>
 				</Touchable>
 				<TouchableOpacity onPress={this.hide}>
-					<CustomIcon name='circle-cross' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
+					<CustomIcon name='cancel' style={[styles.close, { color: themes[theme].titleText }]} size={20} />
 				</TouchableOpacity>
 			</Animated.View>
 		);

app/presentation/RoomItem/Actions.js

@@ -91,7 +91,7 @@ export const RightActions = React.memo(({
 			>
 				<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].favoriteBackground }]} onPress={toggleFav}>
 					<>
-						<CustomIcon size={20} name={favorite ? 'Star-filled' : 'star'} color={themes[theme].buttonText} />
+						<CustomIcon size={20} name={favorite ? 'star-filled' : 'star'} color={themes[theme].buttonText} />
 						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(favorite ? 'Unfavorite' : 'Favorite')}</Text>
 					</>
 				</RectButton>

app/presentation/RoomItem/styles.js

@@ -66,6 +66,7 @@ export default StyleSheet.create({
 		textAlign: 'center'
 	},
 	status: {
+		marginLeft: 4,
 		marginRight: 7,
 		marginTop: 3
 	},

app/views/ChangePasscodeView.js

@@ -83,7 +83,7 @@ const ChangePasscodeView = React.memo(({ theme }) => {
 			{!data?.force
 				? (
 					<Touchable onPress={onCancel} style={styles.close}>
-						<CustomIcon name='cross' color={themes[theme].passcodePrimary} size={30} />
+						<CustomIcon name='Cross' color={themes[theme].passcodePrimary} size={30} />
 					</Touchable>
 				)
 				: null}

app/views/DirectoryView/Options.js

@@ -61,7 +61,7 @@ export default class DirectoryOptions extends PureComponent {
 		let icon = 'user';
 		if (itemType === 'channels') {
 			text = 'Channels';
-			icon = 'hashtag';
+			icon = 'hash';
 		}
 
 		return (
@@ -100,7 +100,7 @@ export default class DirectoryOptions extends PureComponent {
 					<Touch onPress={this.close} theme={theme}>
 						<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: themes[theme].separatorColor }]}>
 							<Text style={[styles.dropdownToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Search_by')}</Text>
-							<CustomIcon style={[styles.dropdownItemIcon, styles.inverted, { color: themes[theme].auxiliaryTintColor }]} size={22} name='arrow-down' />
+							<CustomIcon style={[styles.dropdownItemIcon, styles.inverted, { color: themes[theme].auxiliaryTintColor }]} size={22} name='chevron-down' />
 						</View>
 					</Touch>
 					{this.renderItem('channels')}

app/views/DirectoryView/index.js

@@ -166,9 +166,9 @@ class DirectoryView extends React.Component {
 					theme={theme}
 				>
 					<View style={[sharedStyles.separatorVertical, styles.toggleDropdownContainer, { borderColor: themes[theme].separatorColor }]}>
-						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={type === 'users' ? 'user' : 'hashtag'} />
+						<CustomIcon style={[styles.toggleDropdownIcon, { color: themes[theme].tintColor }]} size={20} name={type === 'users' ? 'user' : 'hash'} />
 						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{type === 'users' ? I18n.t('Users') : I18n.t('Channels')}</Text>
-						<CustomIcon name='arrow-down' size={20} style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]} />
+						<CustomIcon name='chevron-down' size={20} style={[styles.toggleDropdownArrow, { color: themes[theme].auxiliaryTintColor }]} />
 					</View>
 				</Touch>
 			</>

app/views/NewMessageView.js

@@ -182,7 +182,7 @@ class NewMessageView extends React.Component {
 					{this.renderButton({
 						onPress: this.createChannel,
 						title: I18n.t('Create_Channel'),
-						icon: 'hashtag',
+						icon: 'hash',
 						testID: 'new-message-view-create-channel',
 						first: true
 					})}

app/views/ProfileView/index.js

@@ -335,7 +335,7 @@ class ProfileView extends React.Component {
 					key: 'profile-view-upload-avatar'
 				})}
 				{this.renderAvatarButton({
-					child: <CustomIcon name='permalink' size={30} color={themes[theme].bodyText} />,
+					child: <CustomIcon name='link' size={30} color={themes[theme].bodyText} />,
 					onPress: () => this.setAvatar({ url: avatarUrl, data: avatarUrl, service: 'url' }),
 					disabled: !avatarUrl,
 					key: 'profile-view-avatar-url-button'