Remove font awesome unused icons from the generated bundle

Changelog-entry: Remove font awesome unused icons from the generated bundle
Change-type: patch

lib/gui/app/components/flash-results/flash-results.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { faCheckCircle, faCircle } from '@fortawesome/free-solid-svg-icons';
+import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
 import * as _ from 'lodash';
 import outdent from 'outdent';
 import * as React from 'react';
@@ -59,12 +59,10 @@ export function FlashResults({
 			}}
 		>
 			<Flex alignItems="center">
-				<FontAwesomeIcon
+				<CheckCircleSvg
-					icon={faCheckCircle}
+					width="24px"
-					color={allDevicesFailed ? '#c6c8c9' : '#1ac135'}
+					fill={allDevicesFailed ? '#c6c8c9' : '#1ac135'}
 					style={{
-						width: '24px',
-						height: '24px',
 						margin: '0 15px 0 0',
 					}}
 				/>
@@ -79,9 +77,9 @@ export function FlashResults({
 							alignItems="center"
 							tooltip={type === 'failed' ? errors : undefined}
 						>
-							<FontAwesomeIcon
+							<CircleSvg
-								color={type === 'failed' ? '#ff4444' : '#1ac135'}
+								width="14px"
-								icon={faCircle}
+								fill={type === 'failed' ? '#ff4444' : '#1ac135'}
 							/>
 							<Txt ml={10}>{quantity}</Txt>
 							<Txt ml={10}>{progress[type](quantity)}</Txt>

lib/gui/app/components/settings/settings.tsx

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as _ from 'lodash';
 import * as os from 'os';
 import * as React from 'react';
@@ -151,7 +150,11 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 						)
 					}
 				>
-					<FontAwesomeIcon icon={faGithub} style={{ marginRight: 8 }} />
+					<GithubSvg
+						height="1em"
+						fill="currentColor"
+						style={{ marginRight: 8 }}
+					/>
 					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
 				</Flex>
 			</Flex>

lib/gui/app/components/source-selector/source-selector.tsx

@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-import {
+import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
-	faFile,
+import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
-	faLink,
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-	faExclamationTriangle,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { sourceDestination } from 'etcher-sdk';
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 import * as _ from 'lodash';
@@ -526,7 +523,7 @@ export class SourceSelector extends React.Component<
 								flow={{
 									onClick: this.openImageSelector,
 									label: 'Flash from file',
-									icon: <FontAwesomeIcon icon={faFile} />,
+									icon: <FileSvg height="1em" fill="currentColor" />,
 								}}
 							/>
 							<FlowSelector
@@ -534,7 +531,7 @@ export class SourceSelector extends React.Component<
 								flow={{
 									onClick: this.openURLSelector,
 									label: 'Flash from URL',
-									icon: <FontAwesomeIcon icon={faLink} />,
+									icon: <LinkSvg height="1em" fill="currentColor" />,
 								}}
 							/>
 						</>
@@ -545,10 +542,7 @@ export class SourceSelector extends React.Component<
 					<SmallModal
 						titleElement={
 							<span>
-								<FontAwesomeIcon
+								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
-									style={{ color: '#fca321' }}
-									icon={faExclamationTriangle}
-								/>{' '}
 								<span>{this.state.warning.title}</span>
 							</span>
 						}

lib/gui/app/components/target-selector/target-selector-button.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
 import { Drive as DrivelistDrive } from 'drivelist';
 import * as React from 'react';
 import { Flex, FlexProps } from 'rendition/dist_esm5/components/Flex';
@@ -32,8 +33,6 @@ import {
 	StepNameButton,
 } from '../../styled-components';
 import { middleEllipsis } from '../../utils/middle-ellipsis';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 interface TargetSelectorProps {
 	targets: any[];
@@ -64,7 +63,7 @@ function DriveCompatibilityWarning({
 	const messages = compatibilityWarnings.map((warning) => warning.message);
 	return (
 		<Flex tooltip={messages.join(', ')} {...props}>
-			<FontAwesomeIcon icon={faExclamationTriangle} />
+			<ExclamationTriangleSvg fill="currentColor" height="1em" />
 		</Flex>
 	);
 }

lib/gui/app/components/target-selector/target-selector-modal.tsx

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import {
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-	faChevronDown,
+import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
-	faExclamationTriangle,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { scanner, sourceDestination } from 'etcher-sdk';
 import * as React from 'react';
 import { Flex } from 'rendition/dist_esm5/components/Flex';
@@ -185,10 +182,7 @@ export class TargetSelectorModal extends React.Component<
 				render: (description: string, drive: Target) => {
 					return isDrivelistDrive(drive) && drive.isSystem ? (
 						<Flex alignItems="center">
-							<FontAwesomeIcon
+							<ExclamationTriangleSvg height="1em" fill="#fca321" />
-								style={{ color: '#fca321' }}
-								icon={faExclamationTriangle}
-							/>
 							<Txt ml={8}>{description}</Txt>
 						</Flex>
 					) : (
@@ -424,7 +418,7 @@ export class TargetSelectorModal extends React.Component<
 									onClick={() => this.setState({ showSystemDrives: true })}
 								>
 									<Flex alignItems="center">
-										<FontAwesomeIcon icon={faChevronDown} />
+										<ChevronDownSvg height="1em" fill="currentColor" />
 										<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
 									</Flex>
 								</Link>

lib/gui/app/pages/main/Flash.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
 import * as _ from 'lodash';
 import * as path from 'path';
 import * as React from 'react';
@@ -36,8 +37,6 @@ import * as notification from '../../os/notification';
 import { selectAllTargets } from './DriveSelector';
 
 import FlashSvg from '../../../assets/flash.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
 
 const COMPLETED_PERCENTAGE = 100;
 const SPEED_PRECISION = 2;
@@ -288,7 +287,7 @@ export class FlashStep extends React.PureComponent<
 
 					{Boolean(this.props.failed) && (
 						<Flex color="#fff" alignItems="center" mt={35}>
-							<FontAwesomeIcon color="#ff4444" icon={faCircle} />
+							<CircleSvg height="1em" fill="#ff4444" />
 							<Txt ml={10}>{this.props.failed}</Txt>
 							<Txt ml={10}>{messages.progress.failed(this.props.failed)}</Txt>
 						</Flex>

lib/gui/app/pages/main/MainPage.tsx

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import { faCog, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
+
 import { sourceDestination } from 'etcher-sdk';
 import * as _ from 'lodash';
 import * as path from 'path';
@@ -193,14 +194,14 @@ export class MainPage extends React.Component<
 						}}
 					>
 						<Icon
-							icon={<FontAwesomeIcon icon={faCog} />}
+							icon={<CogSvg height="1em" fill="currentColor" />}
 							plain
 							tabIndex={5}
 							onClick={() => this.setState({ hideSettings: false })}
 						/>
 						{!settings.getSync('disableExternalLinks') && (
 							<Icon
-								icon={<FontAwesomeIcon icon={faQuestionCircle} />}
+								icon={<QuestionCircleSvg height="1em" fill="currentColor" />}
 								onClick={() =>
 									openExternal(
 										selectionState.getImageSupportUrl() ||

npm-shrinkwrap.json

@@ -2847,6 +2847,12 @@
       "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==",
       "dev": true
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.1.tgz",
+      "integrity": "sha512-D819f34FLHeBN/4xvw0HR0u7U2G7RqjPSggXqf7LktsxWQ48VAfGwvMrhcVuaZV2fF069c/619RdgCCms0DHhw==",
+      "dev": true
+    },
     "@fortawesome/fontawesome-svg-core": {
       "version": "1.2.29",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.29.tgz",
@@ -2864,15 +2870,6 @@
         }
       }
     },
-    "@fortawesome/free-brands-svg-icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
-      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
-      "dev": true,
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
-      }
-    },
     "@fortawesome/free-regular-svg-icons": {
       "version": "5.13.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.1.tgz",

package.json

@@ -47,9 +47,7 @@
   ],
   "devDependencies": {
     "@balena/lint": "^5.0.4",
-    "@fortawesome/free-brands-svg-icons": "^5.11.2",
+    "@fortawesome/fontawesome-free": "^5.13.1",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.7",
     "@svgr/webpack": "^5.4.0",
     "@types/bluebird": "^3.5.30",
     "@types/chai": "^4.2.7",