Inline all svgs

Changelog-entry: Inline all svgs Change-type: patch
2025-07-28 21:56:32 +00:00 · 2020-06-11 19:13:23 +02:00 · 2020-06-11 19:13:23 +02:00 · f01f1ddd7a
commit f01f1ddd7a
parent 2cb58bbbf0
17 changed files with 3299 additions and 181 deletions
--- a/lib/gui/app/components/drive-selector/DriveSelectorModal.tsx
+++ b/lib/gui/app/components/drive-selector/DriveSelectorModal.tsx
@ -32,6 +32,8 @@ import { store } from '../../models/store';
 import * as analytics from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';

+import RaspberrypiSvg from '../../../assets/raspberrypi.svg';
+
 /**
 * @summary Determine if we can change a drive's selection state
 */
@ -167,11 +169,9 @@ export function DriveSelectorModal({ close }: { close: () => void }) {
 							onDoubleClick={() => selectDriveAndClose(drive)}
 							onClick={() => toggleDrive(drive)}
 						>
-							{drive.icon && (
-								<img
+							{drive.icon === 'raspberrypi' && (
+								<RaspberrypiSvg
 									className="list-group-item-section"
-									alt="Drive device type logo"
-									src={`media/${drive.icon}.svg`}
 									width="25"
 									height="30"
 								/>
--- a/lib/gui/app/components/finish/finish.tsx
+++ b/lib/gui/app/components/finish/finish.tsx
@ -25,7 +25,10 @@ import * as analytics from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';
 import { FlashAnother } from '../flash-another/flash-another';
 import { FlashResults } from '../flash-results/flash-results';
-import { SVGIcon } from '../svg-icon/svg-icon';
+
+import EtcherSvg from '../../../assets/etcher.svg';
+import LoveSvg from '../../../assets/love.svg';
+import BalenaSvg from '../../../assets/balena.svg';

 function restart(goToMain: () => void) {
 	selectionState.deselectAllDrives();
@ -77,20 +80,12 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 									)
 								}
 							>
-								<SVGIcon
-									paths={['etcher.svg']}
-									width="165px"
-									height="auto"
-								></SVGIcon>
+								<EtcherSvg width="165px" style={{ margin: '0 10px' }} />
 							</span>
 						</div>
 						<div className="caption-small fallback-footer">
 							made with
-							<SVGIcon
-								paths={['love.svg']}
-								width="auto"
-								height="20px"
-							></SVGIcon>
+							<LoveSvg height="20px" style={{ margin: '0 10px' }} />
 							by
 							<span
 								style={{ cursor: 'pointer' }}
@ -98,11 +93,7 @@ function FinishPage({ goToMain }: { goToMain: () => void }) {
 									openExternal('https://balena.io?ref=etcher_success')
 								}
 							>
-								<SVGIcon
-									paths={['balena.svg']}
-									width="auto"
-									height="20px"
-								></SVGIcon>
+								<BalenaSvg height="20px" style={{ margin: '0 10px' }} />
 							</span>
 						</div>
 					</div>
--- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
+++ b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
@ -20,6 +20,9 @@ import { color } from 'styled-system';

 import { SVGIcon } from '../svg-icon/svg-icon';

+import DriveSvg from '../../../assets/drive.svg';
+import ImageSvg from '../../../assets/image.svg';
+
 const Div = styled.div`
 	position: absolute;
 	top: 45px;
@ -42,7 +45,7 @@ const Div = styled.div`
 		}
 	}

-	.svg-icon[disabled] {
+	.disabled {
 		opacity: 0.4;
 	}
 `;
@ -73,16 +76,16 @@ export class ReducedFlashingInfos extends React.Component<
 				<Span className="step-name">
 					<SVGIcon
 						disabled
-						contents={[this.props.imageLogo]}
-						paths={['image.svg']}
 						width="20px"
-					></SVGIcon>
+						contents={this.props.imageLogo}
+						fallback={<ImageSvg className="disabled" width="20px" />}
+					/>
 					<Span>{this.props.imageName}</Span>
 					<Span color="#7e8085">{this.props.imageSize}</Span>
 				</Span>

 				<Span className="step-name">
-					<SVGIcon disabled paths={['drive.svg']} width="20px"></SVGIcon>
+					<DriveSvg className="disabled" width="20px" />
 					<Span>{this.props.driveTitle}</Span>
 				</Span>
 			</Div>
--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@ -45,6 +45,8 @@ import { colors } from '../../theme';
 import { middleEllipsis } from '../../utils/middle-ellipsis';
 import { SVGIcon } from '../svg-icon/svg-icon';

+import ImageSvg from '../../../assets/image.svg';
+
 const recentUrlImagesKey = 'recentUrlImages';

 function normalizeRecentUrlImages(urls: any): string[] {
@ -458,6 +460,7 @@ export class SourceSelector extends React.Component<
 		const imageBasename = hasImage ? path.basename(imagePath) : '';
 		const imageName = selectionState.getImageName();
 		const imageSize = selectionState.getImageSize();
+		const imageLogo = selectionState.getImageLogo();

 		return (
 			<>
@ -469,8 +472,8 @@ export class SourceSelector extends React.Component<
 				>
 					<div className="center-block">
 						<SVGIcon
-							contents={[selectionState.getImageLogo()]}
-							paths={['image.svg']}
+							contents={imageLogo}
+							fallback={<ImageSvg width="40px" />}
 						/>
 					</div>

--- a/lib/gui/app/components/svg-icon/svg-icon.tsx
+++ b/lib/gui/app/components/svg-icon/svg-icon.tsx
@ -14,13 +14,8 @@
 * limitations under the License.
 */

-import * as fs from 'fs';
-import * as _ from 'lodash';
-import * as path from 'path';
 import * as React from 'react';

-import * as analytics from '../../modules/analytics';
-
 const domParser = new window.DOMParser();

 const DEFAULT_SIZE = '40px';
@ -28,31 +23,23 @@ const DEFAULT_SIZE = '40px';
 /**
 * @summary Try to parse SVG contents and return it data encoded
 *
- * @param {String} contents - SVG XML contents
- * @returns {String|null}
- *
- * @example
- * const encodedSVG = tryParseSVGContents('<svg><path></path></svg>')
- *
- * img.src = encodedSVG
 */
-function tryParseSVGContents(contents: string) {
+function tryParseSVGContents(contents?: string): string | undefined {
+	if (contents === undefined) {
+		return;
+	}
 	const doc = domParser.parseFromString(contents, 'image/svg+xml');
 	const parserError = doc.querySelector('parsererror');
 	const svg = doc.querySelector('svg');
-
 	if (!parserError && svg) {
 		return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`;
 	}
-
-	return null;
 }

 interface SVGIconProps {
-	// Paths to SVG files to be tried in succession if any fails
-	paths: string[];
 	// List of embedded SVG contents to be tried in succession if any fails
-	contents?: string[];
+	contents: string;
+	fallback: JSX.Element;
 	// SVG image width unit
 	width?: string;
 	// SVG image height unit
@ -62,81 +49,22 @@ interface SVGIconProps {
 }

 /**
- * @summary SVG element that takes both filepaths and file contents
+ * @summary SVG element that takes file contents
 */
-export class SVGIcon extends React.Component<SVGIconProps> {
+export class SVGIcon extends React.PureComponent<SVGIconProps> {
 	public render() {
-		// __dirname behaves strangely inside a Webpack bundle,
-		// so we need to provide different base directories
-		// depending on whether __dirname is absolute or not,
-		// which helps detecting a Webpack bundle.
-		// We use global.__dirname inside a Webpack bundle since
-		// that's the only way to get the "real" __dirname.
-		let baseDirectory: string;
-		if (path.isAbsolute(__dirname)) {
-			baseDirectory = path.join(__dirname);
-		} else {
-			// @ts-ignore
-			baseDirectory = global.__dirname;
+		const svgData = tryParseSVGContents(this.props.contents);
+		if (svgData !== undefined) {
+			const width = this.props.width || DEFAULT_SIZE;
+			const height = this.props.height || DEFAULT_SIZE;
+			return (
+				<img
+					className={this.props.disabled ? 'disabled' : ''}
+					style={{ width, height }}
+					src={svgData}
+				/>
+			);
 		}
-
-		let svgData = '';
-
-		_.find(this.props.contents, (content) => {
-			const attempt = tryParseSVGContents(content);
-
-			if (attempt) {
-				svgData = attempt;
-				return true;
-			}
-
-			return false;
-		});
-
-		if (!svgData) {
-			_.find(this.props.paths, (relativePath) => {
-				// This means the path to the icon should be
-				// relative to *this directory*.
-				// TODO: There might be a way to compute the path
-				// relatively to the `index.html`.
-				const imagePath = path.join(baseDirectory, 'media', relativePath);
-
-				const contents = _.attempt(() => {
-					return fs.readFileSync(imagePath, {
-						encoding: 'utf8',
-					});
-				});
-
-				if (_.isError(contents)) {
-					analytics.logException(contents);
-					return false;
-				}
-
-				const parsed = tryParseSVGContents(contents);
-
-				if (parsed) {
-					svgData = parsed;
-					return true;
-				}
-
-				return false;
-			});
-		}
-
-		const width = this.props.width || DEFAULT_SIZE;
-		const height = this.props.height || DEFAULT_SIZE;
-
-		return (
-			<img
-				className="svg-icon"
-				style={{
-					width,
-					height,
-				}}
-				src={svgData}
-				// @ts-ignore
-				disabled={this.props.disabled}
-			></img>
-		);
+		return this.props.fallback;
 	}
 }
--- a/lib/gui/app/pages/finish/styles/_finish.scss
+++ b/lib/gui/app/pages/finish/styles/_finish.scss
@ -89,10 +89,6 @@
    margin-bottom: 17px;
  }

-  .svg-icon {
-    margin: 0 10px;
-  }
-
  .section-footer {
    position: absolute;
    right: 0;
--- a/lib/gui/app/pages/main/DriveSelector.tsx
+++ b/lib/gui/app/pages/main/DriveSelector.tsx
@ -19,12 +19,13 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
 import { TargetSelector } from '../../components/drive-selector/target-selector';
-import { SVGIcon } from '../../components/svg-icon/svg-icon';
 import { getImage, getSelectedDrives } from '../../models/selection-state';
 import * as settings from '../../models/settings';
 import { observe } from '../../models/store';
 import * as analytics from '../../modules/analytics';

+import DriveSvg from '../../../assets/drive.svg';
+
 const StepBorder = styled.div<{
 	disabled: boolean;
 	left?: boolean;
@ -105,7 +106,7 @@ export const DriveSelector = ({
 			)}

 			<div className="center-block">
-				<SVGIcon paths={['drive.svg']} disabled={disabled} />
+				<DriveSvg className={disabled ? 'disabled' : ''} width="40px" />
 			</div>

 			<div className="space-vertical-large">
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@ -24,7 +24,6 @@ import * as messages from '../../../../shared/messages';
 import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
 import { ProgressButton } from '../../components/progress-button/progress-button';
 import { SourceOptions } from '../../components/source-selector/source-selector';
-import { SVGIcon } from '../../components/svg-icon/svg-icon';
 import * as availableDrives from '../../models/available-drives';
 import * as flashState from '../../models/flash-state';
 import * as selection from '../../models/selection-state';
@ -33,6 +32,8 @@ import { scanner as driveScanner } from '../../modules/drive-scanner';
 import * as imageWriter from '../../modules/image-writer';
 import * as notification from '../../os/notification';

+import FlashSvg from '../../../assets/flash.svg';
+
 const COMPLETED_PERCENTAGE = 100;
 const SPEED_PRECISION = 2;

@ -230,9 +231,9 @@ export class FlashStep extends React.PureComponent<
 			<>
 				<div className="box text-center">
 					<div className="center-block">
-						<SVGIcon
-							paths={['flash.svg']}
-							disabled={this.props.shouldFlashStepBeDisabled}
+						<FlashSvg
+							width="40px"
+							className={this.props.shouldFlashStepBeDisabled ? 'disabled' : ''}
 						/>
 					</div>

--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@ -23,16 +23,15 @@ import * as React from 'react';
 import { Flex } from 'rendition';
 import styled from 'styled-components';

-import { SafeWebview } from '../../components/safe-webview/safe-webview';
 import { FeaturedProject } from '../../components/featured-project/featured-project';
 import FinishPage from '../../components/finish/finish';
 import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
+import { SafeWebview } from '../../components/safe-webview/safe-webview';
 import { SettingsModal } from '../../components/settings/settings';
 import {
 	SourceOptions,
 	SourceSelector,
 } from '../../components/source-selector/source-selector';
-import { SVGIcon } from '../../components/svg-icon/svg-icon';
 import * as flashState from '../../models/flash-state';
 import * as selectionState from '../../models/selection-state';
 import * as settings from '../../models/settings';
@ -49,6 +48,8 @@ import { bytesToClosestUnit } from '../../../../shared/units';
 import { DriveSelector } from './DriveSelector';
 import { FlashStep } from './Flash';

+import EtcherSvg from '../../../assets/etcher.svg';
+
 const Icon = styled(BaseIcon)`
 	margin-right: 20px;
 `;
@ -154,7 +155,7 @@ export class MainPage extends React.Component<
 						}
 						tabIndex={100}
 					>
-						<SVGIcon paths={['etcher.svg']} width="123px" height="22px" />
+						<EtcherSvg width="123px" height="22px" />
 					</span>

 					<span
--- a/lib/gui/app/pages/main/styles/_main.scss
+++ b/lib/gui/app/pages/main/styles/_main.scss
@ -14,7 +14,7 @@
 * limitations under the License.
 */

-img[disabled] {
+.disabled {
  opacity: $disabled-opacity;
 }

--- a/lib/gui/assets/loading.svg
+++ b/lib/gui/assets/loading.svg
@ -1,37 +0,0 @@
-<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#5793db">
-    <g fill="none" fill-rule="evenodd" stroke-width="2">
-        <circle cx="22" cy="22" r="1">
-            <animate attributeName="r"
-                begin="0s" dur="1.8s"
-                values="1; 20"
-                calcMode="spline"
-                keyTimes="0; 1"
-                keySplines="0.165, 0.84, 0.44, 1"
-                repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                begin="0s" dur="1.8s"
-                values="1; 0"
-                calcMode="spline"
-                keyTimes="0; 1"
-                keySplines="0.3, 0.61, 0.355, 1"
-                repeatCount="indefinite" />
-        </circle>
-        <circle cx="22" cy="22" r="1">
-            <animate attributeName="r"
-                begin="-0.9s" dur="1.8s"
-                values="1; 20"
-                calcMode="spline"
-                keyTimes="0; 1"
-                keySplines="0.165, 0.84, 0.44, 1"
-                repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                begin="-0.9s" dur="1.8s"
-                values="1; 0"
-                calcMode="spline"
-                keyTimes="0; 1"
-                keySplines="0.3, 0.61, 0.355, 1"
-                repeatCount="indefinite" />
-        </circle>
-    </g>
-</svg>
--- a/lib/gui/assets/raspberrypi.svg
+++ b/lib/gui/assets/raspberrypi.svg
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="570" height="720">
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 570 720">
 <path d="m 158.375,1.65625 c -3.6193,0.1123192 -7.51715,1.4493266 -11.9375,4.9375 C 135.61054,2.4174496 125.11041,0.9665612 115.71875,9.46875 101.22489,7.5879922 96.508461,11.469494 92.9375,16 89.754953,15.934135 69.118652,12.72793 59.65625,26.84375 35.874602,24.030329 28.359472,40.831625 36.875,56.5 c -4.856911,7.518955 -9.889503,14.947226 1.46875,29.28125 -4.018006,7.983514 -1.527431,16.64403 7.9375,27.125 -2.497857,11.2226 2.412077,19.14086 11.21875,25.3125 -1.64709,15.35756 14.083505,24.28743 18.78125,27.46875 1.803677,8.94868 5.56291,17.3927 23.53125,22.0625 2.96323,13.3361 13.76206,15.63906 24.21875,18.4375 -34.561929,20.08954 -64.20067,46.52266 -64,111.375 l -5.0625,9.03125 C 15.337882,350.69604 -20.316547,428.16001 35.4375,491.125 c 3.641871,19.70838 9.749589,33.86396 15.1875,49.53125 8.133834,63.13058 61.21763,92.69161 75.21875,96.1875 20.51653,15.62812 42.36818,30.45672 71.9375,40.84375 27.87515,28.74946 58.07388,39.7064 88.4375,39.6875 0.44515,-2.8e-4 0.89853,0.005 1.34375,0 30.36363,0.0189 60.56235,-10.93804 88.4375,-39.6875 29.56932,-10.38703 51.42097,-25.21563 71.9375,-40.84375 14.00112,-3.49589 67.08492,-33.05692 75.21875,-96.1875 5.43791,-15.66729 11.54562,-29.82287 15.1875,-49.53125 55.75404,-62.96499 20.09961,-140.42896 -19.53125,-164.53125 L 513.75,317.5625 c 0.20067,-64.85234 -29.43807,-91.28546 -64,-111.375 10.45669,-2.79844 21.25552,-5.1014 24.21875,-18.4375 17.96834,-4.6698 21.72758,-13.11382 23.53125,-22.0625 4.69775,-3.18132 20.42834,-12.11119 18.78125,-27.46875 8.80668,-6.17164 13.71661,-14.0899 11.21875,-25.3125 9.46494,-10.48097 11.9555,-19.141487 7.9375,-27.125 C 546.79575,71.447226 541.76316,64.018955 536.90625,56.5 545.42178,40.831625 537.90665,24.030329 514.125,26.84375 504.6626,12.72793 484.0263,15.934135 480.84375,16 477.27279,11.469494 472.55636,7.587992 458.0625,9.46875 448.67084,0.96656132 438.17071,2.41745 427.34375,6.59375 414.48455,-3.5536631 405.97149,4.580454 396.25,7.65625 380.67615,2.568472 377.11698,9.5371578 369.46875,12.375 352.4935,8.7869238 347.33315,16.598532 339.1875,24.84375 l -9.46875,-0.1875 c -25.61054,15.093115 -38.33378,45.825501 -42.84375,61.625 -4.51206,-15.801979 -17.20647,-46.534542 -42.8125,-61.625 l -9.46875,0.1875 C 226.4481,16.598532 221.28775,8.7869235 204.3125,12.375 196.66427,9.5371583 193.1051,2.5684729 177.53125,7.65625 c -6.37973,-2.0184911 -12.24667,-6.2144276 -19.15625,-6 z" style="fill:#000000" />
 <path d="m 107.39184,68.055583 c 67.94767,35.031357 107.44689,63.368967 129.08717,87.504467 -11.08235,44.41759 -68.89638,46.44464 -90.03559,45.19858 4.32842,-2.01474 7.93988,-4.42778 9.22051,-8.13574 -5.30449,-3.76981 -24.11289,-0.39719 -37.24363,-7.77416 5.04407,-1.04499 7.40348,-2.06302 9.76289,-5.78542 -12.40571,-3.9567 -25.76862,-7.36642 -33.627746,-13.92116 4.241253,0.0524 8.201156,0.9488 13.740366,-2.89271 -11.111694,-5.98819 -22.969108,-10.73351 -32.18139,-19.88738 5.745213,-0.14063 11.939452,-0.0568 13.740371,-2.16953 -10.17044,-6.30068 -18.751242,-13.30787 -25.853592,-20.97215 8.039979,0.97052 11.435284,0.13478 13.378782,-1.26556 -7.687795,-7.87419 -17.417559,-14.52319 -22.056911,-24.22644 5.969606,2.057484 11.431249,2.84506 15.36752,-0.180795 -2.612365,-5.893453 -13.805413,-9.369618 -20.248967,-23.141676 6.284359,0.609377 12.949606,1.371108 14.282753,0 C 61.802068,58.517346 56.796919,51.835885 51.887978,44.913906 65.338021,44.714177 85.715734,44.966253 84.792549,43.82914 l -8.31654,-8.497335 c 13.137617,-3.537241 26.580651,0.568164 36.339661,3.615887 4.38186,-3.457681 -0.0776,-7.82998 -5.42383,-12.294015 11.16496,1.490646 21.25382,4.057389 30.37345,7.593362 4.87238,-4.399329 -3.16389,-8.798658 -7.05098,-13.197987 17.24936,3.272568 24.55716,7.87068 31.81981,12.47481 5.26935,-5.050799 0.30166,-9.343299 -3.2543,-13.740371 13.00566,4.817048 19.70478,11.035551 26.75756,17.175463 2.39119,-3.227053 6.07494,-5.592408 1.62715,-13.378781 9.23416,5.322725 16.18926,11.59506 21.33374,18.621817 5.71336,-3.637941 3.40387,-8.613023 3.43509,-13.197987 9.59665,7.806516 15.68687,16.11395 23.14168,24.226443 1.50169,-1.093437 2.81661,-4.80171 3.97747,-10.666867 22.89539,22.211815 55.24591,78.158241 8.31654,100.340861 C 207.95028,109.95728 160.25292,86.016909 107.39184,68.055583 z" style="fill:#75a928" />
 <path d="M 467.92487,68.055583 C 399.9772,103.08694 360.47798,131.42455 338.8377,155.56005 c 11.08235,44.41759 68.89638,46.44464 90.03559,45.19858 -4.32842,-2.01474 -7.93988,-4.42778 -9.22051,-8.13574 5.30449,-3.76981 24.11289,-0.39719 37.24363,-7.77416 -5.04407,-1.04499 -7.40348,-2.06302 -9.76289,-5.78542 12.40571,-3.9567 25.76862,-7.36642 33.62775,-13.92116 -4.24126,0.0524 -8.20116,0.9488 -13.74037,-2.89271 11.11169,-5.98819 22.96911,-10.73351 32.18139,-19.88738 -5.74521,-0.14063 -11.93945,-0.0568 -13.74037,-2.16953 10.17044,-6.30068 18.75124,-13.30787 25.85359,-20.97215 -8.03998,0.97052 -11.43528,0.13478 -13.37878,-1.26556 7.68779,-7.87419 17.41756,-14.52319 22.05691,-24.22644 -5.96961,2.057484 -11.43125,2.84506 -15.36752,-0.180795 2.61237,-5.893453 13.80541,-9.369618 20.24897,-23.141676 -6.28436,0.609377 -12.94961,1.371108 -14.28276,0 2.92231,-11.888563 7.92746,-18.570024 12.8364,-25.492003 -13.45004,-0.199729 -33.82775,0.05235 -32.90457,-1.084766 l 8.31654,-8.497335 c -13.13762,-3.537241 -26.58065,0.568164 -36.33966,3.615887 -4.38186,-3.457681 0.0776,-7.82998 5.42383,-12.294015 -11.16496,1.490646 -21.25382,4.057389 -30.37345,7.593362 -4.87238,-4.399329 3.16389,-8.798658 7.05098,-13.197987 -17.24936,3.272568 -24.55716,7.87068 -31.81981,12.47481 -5.26935,-5.050799 -0.30166,-9.343299 3.2543,-13.740371 -13.00566,4.817048 -19.70478,11.035551 -26.75756,17.175463 -2.39119,-3.227053 -6.07494,-5.592408 -1.62715,-13.378781 -9.23416,5.322725 -16.18926,11.59506 -21.33374,18.621817 -5.71336,-3.637941 -3.40387,-8.613023 -3.43509,-13.197987 -9.59665,7.806516 -15.68687,16.11395 -23.14168,24.226443 -1.50169,-1.093437 -2.81661,-4.80171 -3.97747,-10.666867 -22.89539,22.211815 -55.24591,78.158241 -8.31654,100.340861 39.91877,-32.94716 87.61613,-56.887531 140.47721,-74.848857 z" style="fill:#75a928" />
--- a/lib/gui/assets/warning.svg
+++ b/lib/gui/assets/warning.svg
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512.209 512.209" style="enable-background:new 0 0 512.209 512.209;" xml:space="preserve">
-<g>
-	<path d="M507.345,439.683L288.084,37.688c-3.237-5.899-7.71-10.564-13.429-13.988c-5.705-3.427-11.893-5.142-18.554-5.142   s-12.85,1.718-18.558,5.142c-5.708,3.424-10.184,8.089-13.418,13.988L4.859,439.683c-6.663,11.998-6.473,23.989,0.57,35.98   c3.239,5.517,7.664,9.897,13.278,13.128c5.618,3.237,11.66,4.859,18.132,4.859h438.529c6.479,0,12.519-1.622,18.134-4.859   c5.62-3.23,10.038-7.611,13.278-13.128C513.823,463.665,514.015,451.681,507.345,439.683z M292.655,411.132   c0,2.662-0.91,4.897-2.71,6.704c-1.807,1.811-3.949,2.71-6.427,2.71h-54.816c-2.474,0-4.616-0.899-6.423-2.71   c-1.809-1.807-2.713-4.042-2.713-6.704v-54.248c0-2.662,0.905-4.897,2.713-6.704c1.807-1.811,3.946-2.71,6.423-2.71h54.812   c2.479,0,4.62,0.899,6.428,2.71c1.803,1.807,2.71,4.042,2.71,6.704v54.248H292.655z M292.088,304.357   c-0.198,1.902-1.198,3.47-3.001,4.709c-1.811,1.238-4.046,1.854-6.711,1.854h-52.82c-2.663,0-4.947-0.62-6.849-1.854   c-1.908-1.243-2.858-2.807-2.858-4.716l-4.853-130.47c0-2.667,0.953-4.665,2.856-5.996c2.474-2.093,4.758-3.14,6.854-3.14h62.809   c2.098,0,4.38,1.043,6.854,3.14c1.902,1.331,2.851,3.14,2.851,5.424L292.088,304.357z" fill="#D80027"/>
-</g>
-</svg>
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
--- a/package.json
+++ b/package.json
@ -49,6 +49,7 @@
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@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",
    "@types/copy-webpack-plugin": "^6.0.0",
--- a/typings/svg/index.d.ts
+++ b/typings/svg/index.d.ts
@ -0,0 +1,5 @@
+declare module '*.svg' {
+	import { FunctionComponent, SVGProps } from 'react';
+	const _: FunctionComponent<SVGProps<HTMLOrSVGElement>>;
+	export = _;
+}
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -129,6 +129,10 @@ const commonConfig = {
 	},
 	module: {
 		rules: [
+			{
+				test: /\.svg$/,
+				use: '@svgr/webpack',
+			},
 			{
 				test: /\.tsx?$/,
 				use: 'ts-loader',
@ -336,7 +340,6 @@ const cssConfig = {
 				{ from: 'lib/gui/app/index.html', to: 'index.html' },
 				// electron-builder doesn't bundle folders named "assets"
 				// See https://github.com/electron-userland/electron-builder/issues/4545
-				{ from: 'lib/gui/assets', to: 'media' },
 				{ from: 'assets/icon.png', to: 'media/icon.png' },
 			],
 		}),