From e72049d6e8cfc073ae539ab3b16ef9ecf0382fbf Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Wed, 15 Jul 2020 15:20:01 +0200 Subject: [PATCH] Remove font awesome unused icons from the generated bundle Changelog-entry: Remove font awesome unused icons from the generated bundle Change-type: patch --- .../components/flash-results/flash-results.tsx | 18 ++++++++---------- lib/gui/app/components/settings/settings.tsx | 9 ++++++--- .../source-selector/source-selector.tsx | 18 ++++++------------ .../target-selector/target-selector-button.tsx | 5 ++--- .../target-selector/target-selector-modal.tsx | 14 ++++---------- lib/gui/app/pages/main/Flash.tsx | 5 ++--- lib/gui/app/pages/main/MainPage.tsx | 9 +++++---- npm-shrinkwrap.json | 15 ++++++--------- package.json | 4 +--- 9 files changed, 40 insertions(+), 57 deletions(-) diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index 4a1d2acf..610f1aa5 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg'; +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({ }} > - @@ -79,9 +77,9 @@ export function FlashResults({ alignItems="center" tooltip={type === 'failed' ? errors : undefined} > - {quantity} {progress[type](quantity)} diff --git a/lib/gui/app/components/settings/settings.tsx b/lib/gui/app/components/settings/settings.tsx index 7a203b12..56861c10 100644 --- a/lib/gui/app/components/settings/settings.tsx +++ b/lib/gui/app/components/settings/settings.tsx @@ -14,8 +14,7 @@ * limitations under the License. */ -import { faGithub } from '@fortawesome/free-brands-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg'; import * as _ from 'lodash'; import * as os from 'os'; import * as React from 'react'; @@ -151,7 +150,11 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) { ) } > - + {version} diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index 19f12ef2..199dc551 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/lib/gui/app/components/source-selector/source-selector.tsx @@ -14,12 +14,9 @@ * limitations under the License. */ -import { - faFile, - faLink, - faExclamationTriangle, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg'; +import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg'; +import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; 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: , + icon: , }} /> , + icon: , }} /> @@ -545,10 +542,7 @@ export class SourceSelector extends React.Component< - {' '} + {' '} {this.state.warning.title} } diff --git a/lib/gui/app/components/target-selector/target-selector-button.tsx b/lib/gui/app/components/target-selector/target-selector-button.tsx index 46b3d232..3ff0f460 100644 --- a/lib/gui/app/components/target-selector/target-selector-button.tsx +++ b/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 ( - + ); } diff --git a/lib/gui/app/components/target-selector/target-selector-modal.tsx b/lib/gui/app/components/target-selector/target-selector-modal.tsx index 0e73bb11..c779475c 100644 --- a/lib/gui/app/components/target-selector/target-selector-modal.tsx +++ b/lib/gui/app/components/target-selector/target-selector-modal.tsx @@ -14,11 +14,8 @@ * limitations under the License. */ -import { - faChevronDown, - faExclamationTriangle, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; +import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg'; 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 ? ( - + {description} ) : ( @@ -424,7 +418,7 @@ export class TargetSelectorModal extends React.Component< onClick={() => this.setState({ showSystemDrives: true })} > - + Show {numberOfHiddenSystemDrives} hidden diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx index e65dcf76..bec8b5d5 100644 --- a/lib/gui/app/pages/main/Flash.tsx +++ b/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) && ( - + {this.props.failed} {messages.progress.failed(this.props.failed)} diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index d25d092c..46e8c6e8 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg'; +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={} plain tabIndex={5} onClick={() => this.setState({ hideSettings: false })} /> {!settings.getSync('disableExternalLinks') && ( } + icon={} onClick={() => openExternal( selectionState.getImageSupportUrl() || diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 68dc28f4..5674d953 100644 --- a/npm-shrinkwrap.json +++ b/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", diff --git a/package.json b/package.json index b37bc5dd..77ca67e2 100644 --- a/package.json +++ b/package.json @@ -47,9 +47,7 @@ ], "devDependencies": { "@balena/lint": "^5.0.4", - "@fortawesome/free-brands-svg-icons": "^5.11.2", - "@fortawesome/free-solid-svg-icons": "^5.11.2", - "@fortawesome/react-fontawesome": "^0.1.7", + "@fortawesome/fontawesome-free": "^5.13.1", "@svgr/webpack": "^5.4.0", "@types/bluebird": "^3.5.30", "@types/chai": "^4.2.7",