From 6d303cc990f2f18d6a9993eea14da0ab882cbbf2 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Thu, 3 Mar 2022 16:43:15 +0100
Subject: [PATCH 1/8] Revert "replace all require(svgs) with esm import
 (#7948)"

This reverts commit 61cd463a3b57917d9206c98e6e75fc5b57033102.
---
 src/components/structures/FileDropTarget.tsx  |  3 +--
 src/components/structures/GroupView.js        | 22 +++++++------------
 src/components/structures/MyGroups.js         |  3 +--
 src/components/structures/RoomStatusBar.tsx   |  3 +--
 src/components/structures/UserMenu.tsx        |  3 +--
 src/components/views/avatars/WidgetAvatar.tsx | 15 +++++--------
 .../GroupInviteTileContextMenu.js             |  3 +--
 .../dialogs/AddExistingToSpaceDialog.tsx      |  3 +--
 .../CreateSpaceFromCommunityDialog.tsx        |  3 +--
 .../views/dialogs/ForwardDialog.tsx           |  3 +--
 src/components/views/dialogs/InviteDialog.tsx | 11 ++++------
 .../views/dialogs/ModalWidgetDialog.tsx       |  4 ++--
 .../views/dialogs/UploadConfirmDialog.tsx     |  3 +--
 .../security/SetupEncryptionDialog.tsx        |  6 ++---
 src/components/views/elements/AddressTile.tsx |  3 +--
 src/components/views/elements/AppWarning.tsx  |  4 +---
 src/components/views/elements/SSOButtons.tsx  | 18 +++++----------
 .../views/groups/GroupMemberList.js           |  3 +--
 src/components/views/groups/GroupRoomInfo.js  |  3 +--
 src/components/views/groups/GroupRoomList.js  |  3 +--
 src/components/views/messages/MAudioBody.tsx  |  3 +--
 src/components/views/messages/MImageBody.tsx  |  3 +--
 .../views/messages/MStickerBody.tsx           |  3 +--
 src/components/views/messages/MVideoBody.tsx  |  3 +--
 .../views/messages/MVoiceMessageBody.tsx      |  3 +--
 .../views/right_panel/EncryptionPanel.tsx     |  3 +--
 src/components/views/rooms/EntityTile.tsx     |  3 +--
 .../views/rooms/LinkPreviewGroup.tsx          |  3 +--
 src/components/views/rooms/MemberList.tsx     |  3 +--
 .../views/rooms/MessageComposer.tsx           |  3 +--
 src/components/views/rooms/ReplyPreview.tsx   |  3 +--
 .../tabs/room/SecurityRoomSettingsTab.tsx     |  3 +--
 .../tabs/user/GeneralUserSettingsTab.tsx      |  3 +--
 33 files changed, 54 insertions(+), 104 deletions(-)

diff --git a/src/components/structures/FileDropTarget.tsx b/src/components/structures/FileDropTarget.tsx
index 72a86978d92..6032de6e583 100644
--- a/src/components/structures/FileDropTarget.tsx
+++ b/src/components/structures/FileDropTarget.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React, { useEffect, useState } from "react";
 
 import { _t } from "../../languageHandler";
-import FileDropSvg from '../../../res/img/upload-big.svg';
 
 interface IProps {
     parent: HTMLElement;
@@ -110,7 +109,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
 
     if (state.dragging) {
         return <div className="mx_FileDropTarget">
-            <img src={FileDropSvg} className="mx_FileDropTarget_image" alt="" />
+            <img src={require("../../../res/img/upload-big.svg")} className="mx_FileDropTarget_image" alt="" />
             { _t("Drop file here to upload") }
         </div>;
     }
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index bfeec99ae7c..338e8596649 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -46,12 +46,6 @@ import { createSpaceFromCommunity } from "../../utils/space";
 import { Action } from "../../dispatcher/actions";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import CreateRoomSvg from '../../../res/img/icons-create-room.svg';
-import CancelSmallSvg from '../../../res/img/cancel-small.svg';
-import CancelSvg from '../../../res/img/cancel.svg';
-import ExternalLinkSvg from '../../../res/img/external-link.svg';
-import AddRoomSvg from '../../../res/img/icons-room-add.svg';
-import CameraSvg from '../../../res/img/camera.svg';
 
 const LONG_DESC_PLACEHOLDER = _td(
     `<h1>HTML for your community's page</h1>
@@ -141,7 +135,7 @@ class CategoryRoomList extends React.Component {
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <img src={CreateRoomSvg} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -241,7 +235,7 @@ class FeaturedRoom extends React.Component {
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src={CancelSmallSvg}
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -312,7 +306,7 @@ class RoleUserList extends React.Component {
     render() {
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                <img src={CreateRoomSvg} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a User') }
                 </div>
@@ -392,7 +386,7 @@ class FeaturedUser extends React.Component {
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src={CancelSmallSvg}
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -850,7 +844,7 @@ export default class GroupView extends React.Component {
                     },
                 ) }
                 <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
-                    <img src={ExternalLinkSvg} width="11" height="10" alt='' />
+                    <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </div>;
         }
@@ -931,7 +925,7 @@ export default class GroupView extends React.Component {
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <img src={AddRoomSvg} width="24" height="24" />
+                    <img src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1263,7 +1257,7 @@ export default class GroupView extends React.Component {
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                                 <img
-                                    src={CameraSvg}
+                                    src={require("../../../res/img/camera.svg")}
                                     alt={_t("Upload avatar")}
                                     title={_t("Upload avatar")}
                                     width="17"
@@ -1337,7 +1331,7 @@ export default class GroupView extends React.Component {
                         onClick={this._onCancelClick}
                     >
                         <img
-                            src={CancelSvg}
+                            src={require("../../../res/img/cancel.svg")}
                             className="mx_filterFlipColor"
                             width="18"
                             height="18"
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 1b4e00b5ce8..e64022ab54e 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -26,7 +26,6 @@ import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { replaceableComponent } from "../../utils/replaceableComponent";
-import GroupsSvg from '../../../res/img/icons-groups.svg';
 
 @replaceableComponent("structures.MyGroups")
 export default class MyGroups extends React.Component {
@@ -107,7 +106,7 @@ export default class MyGroups extends React.Component {
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon={GroupsSvg} />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />
diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
index 546d6add198..aad5bb5cc21 100644
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -30,7 +30,6 @@ import { StaticNotificationState } from "../../stores/notifications/StaticNotifi
 import AccessibleButton from "../views/elements/AccessibleButton";
 import InlineSpinner from "../views/elements/InlineSpinner";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import WarningTriangleSvg from '../../../res/img/feather-customised/warning-triangle.svg';
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -286,7 +285,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                     <div role="alert">
                         <div className="mx_RoomStatusBar_connectionLostBar">
                             <img
-                                src={WarningTriangleSvg}
+                                src={require("../../../res/img/feather-customised/warning-triangle.svg")}
                                 width="24"
                                 height="24"
                                 title="/!\ "
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 2632c29efb9..7c336ec0e32 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -62,7 +62,6 @@ import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedP
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
 import PosthogTrackers from "../../PosthogTrackers";
 import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
-import SwitchThemeSvg from '../../../res/img/element-icons/roomlist/dark-light-mode.svg';
 
 const CustomStatusSection = () => {
     const cli = useContext(MatrixClientContext);
@@ -516,7 +515,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
                 >
                     <img
-                        src={SwitchThemeSvg}
+                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
                         alt={_t("Switch theme")}
                         width={16}
                     />
diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx
index e939404c1e1..264f1f39568 100644
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -20,27 +20,22 @@ import classNames from 'classnames';
 import { IApp } from "../../../stores/WidgetStore";
 import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
 import { mediaFromMxc } from "../../../customisations/Media";
-import DefaultAppSvg from '../../../../res/img/element-icons/room/default_app.svg';
-import DefaultVideoSvg from '../../../../res/img/element-icons/room/default_video.svg';
-import DefaultCalSvg from '../../../../res/img/element-icons/room/default_cal.svg';
-import DefaultDocSvg from '../../../../res/img/element-icons/room/default_doc.svg';
-import DefaultClockSvg from '../../../../res/img/element-icons/room/default_clock.svg';
 
 interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp;
 }
 
 const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
-    let iconUrls = [DefaultAppSvg];
+    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
     // heuristics for some better icons until Widgets support their own icons
     if (app.type.includes("jitsi")) {
-        iconUrls = [DefaultVideoSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg")];
     } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
-        iconUrls = [DefaultCalSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
     } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
-        iconUrls = [DefaultDocSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
     } else if (app.type.includes("clock")) {
-        iconUrls = [DefaultClockSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
     }
 
     return (
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index 1b3971dc2be..e0717e24943 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -26,7 +26,6 @@ import Modal from '../../../Modal';
 import GroupStore from "../../../stores/GroupStore";
 import { MenuItem } from "../../structures/ContextMenu";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import ContextDeleteSvg from '../../../../res/img/icon_context_delete.svg';
 
 @replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
 export default class GroupInviteTileContextMenu extends React.Component {
@@ -86,7 +85,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <MenuItem className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject}>
-                <img className="mx_RoomTileContextMenu_tag_icon" src={ContextDeleteSvg} width="15" height="15" alt="" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" alt="" />
                 { _t('Reject') }
             </MenuItem>
         </div>;
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index e1f0ba34779..d0ec91d81d5 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -39,7 +39,6 @@ import ProgressBar from "../elements/ProgressBar";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import LazyRenderList from "../elements/LazyRenderList";
-import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
 
 // These values match CSS
 const ROW_HEIGHT = 32 + 12;
@@ -214,7 +213,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     if (error) {
         footer = <>
             <img
-                src={WarningBadgeSvg}
+                src={require("../../../../res/img/element-icons/warning-badge.svg")}
                 height="24"
                 width="24"
                 alt=""
diff --git a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
index e7e50cdfb5f..b02166a3f37 100644
--- a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
+++ b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
@@ -44,7 +44,6 @@ import { inviteUsersToRoom } from "../../../RoomInvite";
 import ProgressBar from "../elements/ProgressBar";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { CreateEventField, IGroupRoom, IGroupSummary } from "../../../@types/groups";
-import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
 
 interface IProps {
     matrixClient: MatrixClient;
@@ -242,7 +241,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
     let footer;
     if (error) {
         footer = <>
-            <img src={WarningBadgeSvg} height="24" width="24" alt="" />
+            <img src={require("../../../../res/img/element-icons/warning-badge.svg")} height="24" width="24" alt="" />
 
             <span className="mx_CreateSpaceFromCommunityDialog_error">
                 <div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index afe1bb19346..13cea20be3f 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -48,7 +48,6 @@ import { roomContextDetailsText } from "../../../Rooms";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import EllipsisSvg from '../../../../res/img/ellipsis.svg';
 
 const AVATAR_SIZE = 30;
 
@@ -217,7 +216,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index c2c094f81c7..15787efd818 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -72,9 +72,6 @@ import { ScreenName } from '../../../PosthogTrackers';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import EmailPillSvg from '../../../../res/img/icon-email-pill-avatar.svg';
-import PillRemoveSvg from '../../../../res/img/icon-pill-remove.svg';
-import InfoSvg from '../../../../res/img/element-icons/info.svg';
 
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
@@ -198,7 +195,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
                 className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
-                src={EmailPillSvg}
+                src={require("../../../../res/img/icon-email-pill-avatar.svg")}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -220,7 +217,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
                     onClick={this.onRemove}
                 >
                     <img
-                        src={PillRemoveSvg}
+                        src={require("../../../../res/img/icon-pill-remove.svg")}
                         alt={_t('Remove')}
                         width={8}
                         height={8}
@@ -304,7 +301,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         const avatarSize = 36;
         const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
-                src={EmailPillSvg}
+                src={require("../../../../res/img/icon-email-pill-avatar.svg")}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -1475,7 +1472,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     keySharingWarning =
                         <p className='mx_InviteDialog_helpText'>
                             <img
-                                src={InfoSvg}
+                                src={require("../../../../res/img/element-icons/info.svg")}
                                 width={14}
                                 height={14} />
                             { " " + _t("Invited people will be able to read old messages.") }
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index 6a01c9cca7b..d96a6424047 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -42,7 +42,7 @@ import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import SettingsStore from "../../../settings/SettingsStore";
-import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
+
 interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
     widgetRoomId?: string;
@@ -187,7 +187,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         >
             <div className="mx_ModalWidgetDialog_warning">
                 <img
-                    src={WarningBadgeSvg}
+                    src={require("../../../../res/img/element-icons/warning-badge.svg")}
                     height="16"
                     width="16"
                     alt=""
diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx
index 1f11d86d47f..fef55766c72 100644
--- a/src/components/views/dialogs/UploadConfirmDialog.tsx
+++ b/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -23,7 +23,6 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { getBlobSafeMimeType } from '../../../utils/blobs';
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import FilesSvg from '../../../../res/img/feather-customised/files.svg';
 
 interface IProps {
     file: File;
@@ -95,7 +94,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
             preview = <div>
                 <div>
                     <img className="mx_UploadConfirmDialog_fileIcon"
-                        src={FilesSvg}
+                        src={require("../../../../res/img/feather-customised/files.svg")}
                     />
                     { this.props.file.name } ({ filesize(this.props.file.size) })
                 </div>
diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
index e132e7ae74c..00be9765762 100644
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
@@ -22,14 +22,12 @@ import { _t } from '../../../../languageHandler';
 import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
 import { replaceableComponent } from "../../../../utils/replaceableComponent";
 import { IDialogProps } from "../IDialogProps";
-import VerifiedSvg from '../../../../../res/img/e2e/verified.svg';
-import WarningSvg from '../../../../../res/img/e2e/warning.svg';
 
 function iconFromPhase(phase: Phase) {
     if (phase === Phase.Done) {
-        return VerifiedSvg;
+        return require("../../../../../res/img/e2e/verified.svg");
     } else {
-        return WarningSvg;
+        return require("../../../../../res/img/e2e/warning.svg");
     }
 }
 
diff --git a/src/components/views/elements/AddressTile.tsx b/src/components/views/elements/AddressTile.tsx
index 4fc6012524b..79995f3aba2 100644
--- a/src/components/views/elements/AddressTile.tsx
+++ b/src/components/views/elements/AddressTile.tsx
@@ -24,7 +24,6 @@ import { mediaFromMxc } from "../../../customisations/Media";
 import { IUserAddress } from '../../../UserAddress';
 import BaseAvatar from '../avatars/BaseAvatar';
 import EmailUserIcon from "../../../../res/img/icon-email-user.svg";
-import AddressDeleteSvg from '../../../../res/img/icon-address-delete.svg';
 
 interface IProps {
     address: IUserAddress;
@@ -125,7 +124,7 @@ export default class AddressTile extends React.Component<IProps> {
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed}>
-                    <img src={AddressDeleteSvg} width="9" height="9" />
+                    <img src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
                 </div>
             );
         }
diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx
index b8d66882234..bac486d4b80 100644
--- a/src/components/views/elements/AppWarning.tsx
+++ b/src/components/views/elements/AppWarning.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import WarningSvg from '../../../../res/img/warning.svg';
-
 interface IProps {
     errorMsg?: string;
 }
@@ -10,7 +8,7 @@ const AppWarning: React.FC<IProps> = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src={WarningSvg} alt='' />
+                <img src={require("../../../../res/img/warning.svg")} alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
                 <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index fccea4c288e..68c58a3e565 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -25,12 +25,6 @@ import { _t } from "../../../languageHandler";
 import { IdentityProviderBrand, IIdentityProvider, ISSOFlow } from "../../../Login";
 import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import { mediaFromMxc } from "../../../customisations/Media";
-import AppleSvg from '../../../../res/img/element-icons/brands/apple.svg';
-import FacebookSvg from '../../../../res/img/element-icons/brands/facebook.svg';
-import GithubSvg from '../../../../res/img/element-icons/brands/github.svg';
-import GitlabSvg from '../../../../res/img/element-icons/brands/gitlab.svg';
-import GoogleSvg from '../../../../res/img/element-icons/brands/google.svg';
-import TwitterSvg from '../../../../res/img/element-icons/brands/twitter.svg';
 
 interface ISSOButtonProps extends Omit<IProps, "flow"> {
     idp: IIdentityProvider;
@@ -40,17 +34,17 @@ interface ISSOButtonProps extends Omit<IProps, "flow"> {
 const getIcon = (brand: IdentityProviderBrand | string) => {
     switch (brand) {
         case IdentityProviderBrand.Apple:
-            return AppleSvg;
+            return require(`../../../../res/img/element-icons/brands/apple.svg`);
         case IdentityProviderBrand.Facebook:
-            return FacebookSvg;
+            return require(`../../../../res/img/element-icons/brands/facebook.svg`);
         case IdentityProviderBrand.Github:
-            return GithubSvg;
+            return require(`../../../../res/img/element-icons/brands/github.svg`);
         case IdentityProviderBrand.Gitlab:
-            return GitlabSvg;
+            return require(`../../../../res/img/element-icons/brands/gitlab.svg`);
         case IdentityProviderBrand.Google:
-            return GoogleSvg;
+            return require(`../../../../res/img/element-icons/brands/google.svg`);
         case IdentityProviderBrand.Twitter:
-            return TwitterSvg;
+            return require(`../../../../res/img/element-icons/brands/twitter.svg`);
         default:
             return null;
     }
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index d9dfd617e21..43651e20e60 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -27,7 +27,6 @@ import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePha
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
-import EllipsisSvg from '../../../../res/img/ellipsis.svg';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
@@ -90,7 +89,7 @@ export default class GroupMemberList extends React.Component {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index 5b32a69ce56..36678e35a45 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -28,7 +28,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
-import CancelSvg from '../../../../res/img/cancel.svg';
 
 @replaceableComponent("views.groups.GroupRoomInfo")
 export default class GroupRoomInfo extends React.Component {
@@ -217,7 +216,7 @@ export default class GroupRoomInfo extends React.Component {
             <div className="mx_MemberInfo" role="tabpanel">
                 <AutoHideScrollbar>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src={CancelSvg} width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     { avatarElement }
 
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 2c3174fa9ba..7b2c01186b2 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -23,7 +23,6 @@ import { showGroupAddRoomDialog } from '../../../GroupAddressPicker';
 import AccessibleButton from '../elements/AccessibleButton';
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import EllipsisSvg from '../../../../res/img/ellipsis.svg';
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
 
@@ -81,7 +80,7 @@ export default class GroupRoomList extends React.Component {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 1bbc169745a..4af3821596f 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -29,7 +29,6 @@ import { PlaybackManager } from "../../../audio/PlaybackManager";
 import { isVoiceMessage } from "../../../utils/EventUtils";
 import { PlaybackQueue } from "../../../audio/PlaybackQueue";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-import WarningSvg from '../../../../res/img/warning.svg';
 
 interface IState {
     error?: Error;
@@ -97,7 +96,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         if (this.state.error) {
             return (
                 <span className="mx_MAudioBody">
-                    <img src={WarningSvg} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error processing audio message") }
                 </span>
             );
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 1b5cb8841ec..2d62ce6ce7d 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -37,7 +37,6 @@ import { IBodyProps } from "./IBodyProps";
 import { ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-import WarningSvg from '../../../../res/img/warning.svg';
 
 interface IState {
     decryptedUrl?: string;
@@ -544,7 +543,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         if (this.state.error !== null) {
             return (
                 <div className="mx_MImageBody">
-                    <img src={WarningSvg} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error decrypting image") }
                 </div>
             );
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index 4c171307ec3..8496001f2c2 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -20,7 +20,6 @@ import MImageBody from './MImageBody';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { BLURHASH_FIELD } from "../../../ContentMessages";
 import Tooltip from "../elements/Tooltip";
-import ShowStickersSvg from '../../../../res/img/icons-show-stickers.svg';
 
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
@@ -46,7 +45,7 @@ export default class MStickerBody extends MImageBody {
     // img onLoad hasn't fired yet.
     protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
-        return <img src={ShowStickersSvg} width="75" height="75" />;
+        return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 8855344acd1..22d5399d90c 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -29,7 +29,6 @@ import { IBodyProps } from "./IBodyProps";
 import MFileBody from "./MFileBody";
 import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-import WarningSvg from '../../../../res/img/warning.svg';
 
 interface IState {
     decryptedUrl?: string;
@@ -258,7 +257,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         if (this.state.error !== null) {
             return (
                 <span className="mx_MVideoBody">
-                    <img src={WarningSvg} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error decrypting video") }
                 </span>
             );
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
index 60d628c745a..bc42ff55514 100644
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -22,7 +22,6 @@ import { _t } from "../../../languageHandler";
 import RecordingPlayback from "../audio_messages/RecordingPlayback";
 import MAudioBody from "./MAudioBody";
 import MFileBody from "./MFileBody";
-import WarningSvg from '../../../../res/img/warning.svg';
 
 @replaceableComponent("views.messages.MVoiceMessageBody")
 export default class MVoiceMessageBody extends MAudioBody {
@@ -31,7 +30,7 @@ export default class MVoiceMessageBody extends MAudioBody {
         if (this.state.error) {
             return (
                 <span className="mx_MVoiceMessageBody">
-                    <img src={WarningSvg} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error processing voice message") }
                 </span>
             );
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index 158447582d5..f3f0ff2b411 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -34,7 +34,6 @@ import * as sdk from "../../../index";
 import { _t } from "../../../languageHandler";
 import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
-import WarningSvg from '../../../../res/img/e2e/warning.svg';
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -88,7 +87,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
             // FIXME: Using an import will result in test failures
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
-                headerImage: WarningSvg,
+                headerImage: require("../../../../res/img/e2e/warning.svg"),
                 title: _t("Your messages are not secure"),
                 description: <div>
                     { _t("One of the following may be compromised:") }
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index 5c461d0cd35..c15e18fceb0 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -25,7 +25,6 @@ import E2EIcon, { E2EState } from './E2EIcon';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseAvatar from '../avatars/BaseAvatar';
 import PresenceLabel from "./PresenceLabel";
-import PlusSvg from '../../../../res/img/plus.svg';
 
 export enum PowerStatus {
     Admin = "admin",
@@ -160,7 +159,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         if (this.props.showInviteButton) {
             inviteButton = (
                 <div className="mx_EntityTile_invite">
-                    <img src={PlusSvg} width="16" height="16" />
+                    <img src={require("../../../../res/img/plus.svg")} width="16" height="16" />
                 </div>
             );
         }
diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index 0680f0132a4..93757a0140f 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -25,7 +25,6 @@ import AccessibleButton from "../elements/AccessibleButton";
 import { _t } from "../../../languageHandler";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
-import CancelSvg from '../../../../res/img/cancel.svg';
 
 const INITIAL_NUM_PREVIEWS = 2;
 
@@ -73,7 +72,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
                             className="mx_filterFlipColor"
                             alt=""
                             role="presentation"
-                            src={CancelSvg}
+                            src={require("../../../../res/img/cancel.svg")}
                             width="18"
                             height="18"
                         />
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 9c73dd1c7ec..9b5047c55cf 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -50,7 +50,6 @@ import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 import PosthogTrackers from "../../../PosthogTrackers";
-import EllipsisSvg from '../../../../res/img/ellipsis.svg';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
@@ -317,7 +316,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 59cfe9beff5..9a825b7291d 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -52,7 +52,6 @@ import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdat
 import MessageComposerButtons from './MessageComposerButtons';
 import { ButtonEvent } from '../elements/AccessibleButton';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import RoomReplaceSvg from '../../../../res/img/room_replaced.svg';
 
 let instanceCount = 0;
 
@@ -409,7 +408,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
                     <img className="mx_MessageComposer_roomReplaced_icon"
-                        src={RoomReplaceSvg}
+                        src={require("../../../../res/img/room_replaced.svg")}
                     />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         { _t("This room has been replaced and is no longer active.") }
diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx
index 0d1697502ee..1786e5061a1 100644
--- a/src/components/views/rooms/ReplyPreview.tsx
+++ b/src/components/views/rooms/ReplyPreview.tsx
@@ -23,7 +23,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import ReplyTile from './ReplyTile';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
-import CancelSvg from '../../../../res/img/cancel.svg';
 
 function cancelQuoting(context: TimelineRenderingType) {
     dis.dispatch({
@@ -53,7 +52,7 @@ export default class ReplyPreview extends React.Component<IProps> {
                 <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
                     <img
                         className="mx_filterFlipColor"
-                        src={CancelSvg}
+                        src={require("../../../../res/img/cancel.svg")}
                         width="18"
                         height="18"
                         onClick={() => cancelQuoting(this.context.timelineRenderingType)}
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index b409e8e0bd3..dde5e616add 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -40,7 +40,6 @@ import ErrorDialog from "../../../dialogs/ErrorDialog";
 import SettingsFieldset from '../../SettingsFieldset';
 import ExternalLink from '../../../elements/ExternalLink';
 import PosthogTrackers from "../../../../../PosthogTrackers";
-import WarningSvg from '../../../../../../res/img/warning.svg';
 
 interface IProps {
     roomId: string;
@@ -264,7 +263,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         if (room.getJoinRule() === JoinRule.Public && !this.state.hasAliases) {
             aliasWarning = (
                 <div className='mx_SecurityRoomSettingsTab_warning'>
-                    <img src={WarningSvg} width={15} height={15} />
+                    <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
                     <span>
                         { _t("To link to this room, please add an address.") }
                     </span>
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index b8faf5c6be8..d37f2f4c4a0 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -51,7 +51,6 @@ import ChangePassword from "../../ChangePassword";
 import InlineTermsAgreement from "../../../terms/InlineTermsAgreement";
 import SetIdServer from "../../SetIdServer";
 import SetIntegrationManager from "../../SetIntegrationManager";
-import WarningTriangleSvg from '../../../../../../res/img/feather-customised/warning-triangle.svg';
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -454,7 +453,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         const discoWarning = this.state.requiredPolicyInfo.hasTerms
             ? <img
                 className='mx_GeneralUserSettingsTab_warningIcon'
-                src={WarningTriangleSvg}
+                src={require("../../../../../../res/img/feather-customised/warning-triangle.svg")}
                 width="18"
                 height="18"
                 alt={_t("Warning")}

From 2bd3313a5f97203acd26ded5c5a2ff6a6d7acaa7 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:07:46 +0100
Subject: [PATCH 2/8] add .default to svg icon inline requires

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/structures/FileDropTarget.tsx     |  2 +-
 src/components/structures/GroupView.js           | 16 ++++++++--------
 src/components/structures/MyGroups.js            |  4 ++--
 src/components/structures/RoomStatusBar.tsx      |  2 +-
 src/components/structures/UserMenu.tsx           |  2 +-
 src/components/views/avatars/WidgetAvatar.tsx    | 10 +++++-----
 .../context_menus/GroupInviteTileContextMenu.js  |  2 +-
 .../views/dialogs/AddExistingToSpaceDialog.tsx   |  2 +-
 .../dialogs/CreateSpaceFromCommunityDialog.tsx   |  2 +-
 src/components/views/dialogs/ForwardDialog.tsx   |  2 +-
 src/components/views/dialogs/InviteDialog.tsx    |  8 ++++----
 .../views/dialogs/ModalWidgetDialog.tsx          |  2 +-
 .../views/dialogs/UploadConfirmDialog.tsx        |  2 +-
 .../dialogs/security/SetupEncryptionDialog.tsx   |  4 ++--
 src/components/views/elements/AddressTile.tsx    |  2 +-
 src/components/views/elements/AppWarning.tsx     |  2 +-
 src/components/views/elements/SSOButtons.tsx     | 12 ++++++------
 src/components/views/groups/GroupMemberList.js   |  2 +-
 src/components/views/groups/GroupRoomInfo.js     |  2 +-
 src/components/views/groups/GroupRoomList.js     |  2 +-
 src/components/views/messages/MAudioBody.tsx     |  2 +-
 src/components/views/messages/MImageBody.tsx     |  2 +-
 src/components/views/messages/MStickerBody.tsx   |  2 +-
 src/components/views/messages/MVideoBody.tsx     |  2 +-
 .../views/messages/MVoiceMessageBody.tsx         |  2 +-
 .../views/right_panel/EncryptionPanel.tsx        |  2 +-
 src/components/views/rooms/EntityTile.tsx        |  2 +-
 src/components/views/rooms/LinkPreviewGroup.tsx  |  2 +-
 src/components/views/rooms/MemberList.tsx        |  2 +-
 src/components/views/rooms/MessageComposer.tsx   |  2 +-
 src/components/views/rooms/ReplyPreview.tsx      |  2 +-
 .../tabs/room/SecurityRoomSettingsTab.tsx        |  2 +-
 .../tabs/user/GeneralUserSettingsTab.tsx         |  2 +-
 33 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/components/structures/FileDropTarget.tsx b/src/components/structures/FileDropTarget.tsx
index 6032de6e583..f6572a05e85 100644
--- a/src/components/structures/FileDropTarget.tsx
+++ b/src/components/structures/FileDropTarget.tsx
@@ -109,7 +109,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
 
     if (state.dragging) {
         return <div className="mx_FileDropTarget">
-            <img src={require("../../../res/img/upload-big.svg")} className="mx_FileDropTarget_image" alt="" />
+            <img src={require("../../../res/img/upload-big.svg").default} className="mx_FileDropTarget_image" alt="" />
             { _t("Drop file here to upload") }
         </div>;
     }
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 338e8596649..d5da40b86a9 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -135,7 +135,7 @@ class CategoryRoomList extends React.Component {
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -235,7 +235,7 @@ class FeaturedRoom extends React.Component {
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src={require("../../../res/img/cancel-small.svg")}
+                src={require("../../../res/img/cancel-small.svg").default}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -306,7 +306,7 @@ class RoleUserList extends React.Component {
     render() {
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                <img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
+                <img src={require("../../../res/img/icons-create-room.svg").default} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a User') }
                 </div>
@@ -386,7 +386,7 @@ class FeaturedUser extends React.Component {
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src={require("../../../res/img/cancel-small.svg")}
+                src={require("../../../res/img/cancel-small.svg").default}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -844,7 +844,7 @@ export default class GroupView extends React.Component {
                     },
                 ) }
                 <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
-                    <img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
+                    <img src={require("../../../res/img/external-link.svg").default} width="11" height="10" alt='' />
                 </a>
             </div>;
         }
@@ -925,7 +925,7 @@ export default class GroupView extends React.Component {
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <img src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
+                    <img src={require("../../../res/img/icons-room-add.svg").default} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1257,7 +1257,7 @@ export default class GroupView extends React.Component {
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
                                 <img
-                                    src={require("../../../res/img/camera.svg")}
+                                    src={require("../../../res/img/camera.svg").default}
                                     alt={_t("Upload avatar")}
                                     title={_t("Upload avatar")}
                                     width="17"
@@ -1331,7 +1331,7 @@ export default class GroupView extends React.Component {
                         onClick={this._onCancelClick}
                     >
                         <img
-                            src={require("../../../res/img/cancel.svg")}
+                            src={require("../../../res/img/cancel.svg").default}
                             className="mx_filterFlipColor"
                             width="18"
                             height="18"
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index e64022ab54e..7efa5335edb 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -106,7 +106,7 @@ export default class MyGroups extends React.Component {
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg").default} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />
@@ -122,7 +122,7 @@ export default class MyGroups extends React.Component {
                 </div>
                 { /*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
-                        <img src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
+                        <img src={require("../../../res/img/icons-create-room.svg").default} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">
diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
index aad5bb5cc21..514c3a507c6 100644
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -285,7 +285,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                     <div role="alert">
                         <div className="mx_RoomStatusBar_connectionLostBar">
                             <img
-                                src={require("../../../res/img/feather-customised/warning-triangle.svg")}
+                                src={require("../../../res/img/feather-customised/warning-triangle.svg").default}
                                 width="24"
                                 height="24"
                                 title="/!\ "
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 7c336ec0e32..82855ebd870 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -515,7 +515,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                     title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
                 >
                     <img
-                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
+                        src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg").default}
                         alt={_t("Switch theme")}
                         width={16}
                     />
diff --git a/src/components/views/avatars/WidgetAvatar.tsx b/src/components/views/avatars/WidgetAvatar.tsx
index 264f1f39568..4c1bd940a12 100644
--- a/src/components/views/avatars/WidgetAvatar.tsx
+++ b/src/components/views/avatars/WidgetAvatar.tsx
@@ -26,16 +26,16 @@ interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "
 }
 
 const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
-    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
+    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default];
     // heuristics for some better icons until Widgets support their own icons
     if (app.type.includes("jitsi")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg")];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg").default];
     } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg").default];
     } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg").default];
     } else if (app.type.includes("clock")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg").default];
     }
 
     return (
diff --git a/src/components/views/context_menus/GroupInviteTileContextMenu.js b/src/components/views/context_menus/GroupInviteTileContextMenu.js
index e0717e24943..3cd2cd7ec6b 100644
--- a/src/components/views/context_menus/GroupInviteTileContextMenu.js
+++ b/src/components/views/context_menus/GroupInviteTileContextMenu.js
@@ -85,7 +85,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <MenuItem className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject}>
-                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" alt="" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg").default} width="15" height="15" alt="" />
                 { _t('Reject') }
             </MenuItem>
         </div>;
diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index d0ec91d81d5..606f96553d7 100644
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -213,7 +213,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     if (error) {
         footer = <>
             <img
-                src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                src={require("../../../../res/img/element-icons/warning-badge.svg").default}
                 height="24"
                 width="24"
                 alt=""
diff --git a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
index b02166a3f37..64b1dcab2c1 100644
--- a/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
+++ b/src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx
@@ -241,7 +241,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
     let footer;
     if (error) {
         footer = <>
-            <img src={require("../../../../res/img/element-icons/warning-badge.svg")} height="24" width="24" alt="" />
+            <img src={require("../../../../res/img/element-icons/warning-badge.svg").default} height="24" width="24" alt="" />
 
             <span className="mx_CreateSpaceFromCommunityDialog_error">
                 <div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 13cea20be3f..0ae736006d1 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -216,7 +216,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 15787efd818..e2117eced72 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -195,7 +195,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
                 className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
-                src={require("../../../../res/img/icon-email-pill-avatar.svg")}
+                src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -217,7 +217,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
                     onClick={this.onRemove}
                 >
                     <img
-                        src={require("../../../../res/img/icon-pill-remove.svg")}
+                        src={require("../../../../res/img/icon-pill-remove.svg").default}
                         alt={_t('Remove')}
                         width={8}
                         height={8}
@@ -301,7 +301,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         const avatarSize = 36;
         const avatar = (this.props.member as ThreepidMember).isEmail
             ? <img
-                src={require("../../../../res/img/icon-email-pill-avatar.svg")}
+                src={require("../../../../res/img/icon-email-pill-avatar.svg").default}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -1472,7 +1472,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                     keySharingWarning =
                         <p className='mx_InviteDialog_helpText'>
                             <img
-                                src={require("../../../../res/img/element-icons/info.svg")}
+                                src={require("../../../../res/img/element-icons/info.svg").default}
                                 width={14}
                                 height={14} />
                             { " " + _t("Invited people will be able to read old messages.") }
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index d96a6424047..95e873cada4 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -187,7 +187,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         >
             <div className="mx_ModalWidgetDialog_warning">
                 <img
-                    src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                    src={require("../../../../res/img/element-icons/warning-badge.svg").default}
                     height="16"
                     width="16"
                     alt=""
diff --git a/src/components/views/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx
index fef55766c72..612903a6eec 100644
--- a/src/components/views/dialogs/UploadConfirmDialog.tsx
+++ b/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -94,7 +94,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
             preview = <div>
                 <div>
                     <img className="mx_UploadConfirmDialog_fileIcon"
-                        src={require("../../../../res/img/feather-customised/files.svg")}
+                        src={require("../../../../res/img/feather-customised/files.svg").default}
                     />
                     { this.props.file.name } ({ filesize(this.props.file.size) })
                 </div>
diff --git a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
index 00be9765762..965924bf1f7 100644
--- a/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
+++ b/src/components/views/dialogs/security/SetupEncryptionDialog.tsx
@@ -25,9 +25,9 @@ import { IDialogProps } from "../IDialogProps";
 
 function iconFromPhase(phase: Phase) {
     if (phase === Phase.Done) {
-        return require("../../../../../res/img/e2e/verified.svg");
+        return require("../../../../../res/img/e2e/verified.svg").default;
     } else {
-        return require("../../../../../res/img/e2e/warning.svg");
+        return require("../../../../../res/img/e2e/warning.svg").default;
     }
 }
 
diff --git a/src/components/views/elements/AddressTile.tsx b/src/components/views/elements/AddressTile.tsx
index 79995f3aba2..d8738e69f31 100644
--- a/src/components/views/elements/AddressTile.tsx
+++ b/src/components/views/elements/AddressTile.tsx
@@ -124,7 +124,7 @@ export default class AddressTile extends React.Component<IProps> {
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed}>
-                    <img src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
+                    <img src={require("../../../../res/img/icon-address-delete.svg").default} width="9" height="9" />
                 </div>
             );
         }
diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx
index bac486d4b80..352c5990680 100644
--- a/src/components/views/elements/AppWarning.tsx
+++ b/src/components/views/elements/AppWarning.tsx
@@ -8,7 +8,7 @@ const AppWarning: React.FC<IProps> = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src={require("../../../../res/img/warning.svg")} alt='' />
+                <img src={require("../../../../res/img/warning.svg").default} alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
                 <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 68c58a3e565..4679e269bff 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -34,17 +34,17 @@ interface ISSOButtonProps extends Omit<IProps, "flow"> {
 const getIcon = (brand: IdentityProviderBrand | string) => {
     switch (brand) {
         case IdentityProviderBrand.Apple:
-            return require(`../../../../res/img/element-icons/brands/apple.svg`);
+            return require(`../../../../res/img/element-icons/brands/apple.svg`).default;
         case IdentityProviderBrand.Facebook:
-            return require(`../../../../res/img/element-icons/brands/facebook.svg`);
+            return require(`../../../../res/img/element-icons/brands/facebook.svg`).default;
         case IdentityProviderBrand.Github:
-            return require(`../../../../res/img/element-icons/brands/github.svg`);
+            return require(`../../../../res/img/element-icons/brands/github.svg`).default;
         case IdentityProviderBrand.Gitlab:
-            return require(`../../../../res/img/element-icons/brands/gitlab.svg`);
+            return require(`../../../../res/img/element-icons/brands/gitlab.svg`).default;
         case IdentityProviderBrand.Google:
-            return require(`../../../../res/img/element-icons/brands/google.svg`);
+            return require(`../../../../res/img/element-icons/brands/google.svg`).default;
         case IdentityProviderBrand.Twitter:
-            return require(`../../../../res/img/element-icons/brands/twitter.svg`);
+            return require(`../../../../res/img/element-icons/brands/twitter.svg`).default;
         default:
             return null;
     }
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 43651e20e60..cffdfa366cd 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -89,7 +89,7 @@ export default class GroupMemberList extends React.Component {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index 36678e35a45..fd6cf69cf97 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -216,7 +216,7 @@ export default class GroupRoomInfo extends React.Component {
             <div className="mx_MemberInfo" role="tabpanel">
                 <AutoHideScrollbar>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg").default} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     { avatarElement }
 
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 7b2c01186b2..9a29cb57629 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -80,7 +80,7 @@ export default class GroupRoomList extends React.Component {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/messages/MAudioBody.tsx b/src/components/views/messages/MAudioBody.tsx
index 4af3821596f..5af03135b5e 100644
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@@ -96,7 +96,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         if (this.state.error) {
             return (
                 <span className="mx_MAudioBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
                     { _t("Error processing audio message") }
                 </span>
             );
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 2d62ce6ce7d..9bff9b7c709 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -543,7 +543,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         if (this.state.error !== null) {
             return (
                 <div className="mx_MImageBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
                     { _t("Error decrypting image") }
                 </div>
             );
diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx
index 8496001f2c2..192cf1dd97a 100644
--- a/src/components/views/messages/MStickerBody.tsx
+++ b/src/components/views/messages/MStickerBody.tsx
@@ -45,7 +45,7 @@ export default class MStickerBody extends MImageBody {
     // img onLoad hasn't fired yet.
     protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
-        return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
+        return <img src={require("../../../../res/img/icons-show-stickers.svg").default} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over
diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 22d5399d90c..1b6bafd7d93 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -257,7 +257,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         if (this.state.error !== null) {
             return (
                 <span className="mx_MVideoBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
                     { _t("Error decrypting video") }
                 </span>
             );
diff --git a/src/components/views/messages/MVoiceMessageBody.tsx b/src/components/views/messages/MVoiceMessageBody.tsx
index bc42ff55514..847f15bc9cd 100644
--- a/src/components/views/messages/MVoiceMessageBody.tsx
+++ b/src/components/views/messages/MVoiceMessageBody.tsx
@@ -30,7 +30,7 @@ export default class MVoiceMessageBody extends MAudioBody {
         if (this.state.error) {
             return (
                 <span className="mx_MVoiceMessageBody">
-                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg").default} width="16" height="16" />
                     { _t("Error processing voice message") }
                 </span>
             );
diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx
index f3f0ff2b411..2cfd4851e07 100644
--- a/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/src/components/views/right_panel/EncryptionPanel.tsx
@@ -87,7 +87,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
             // FIXME: Using an import will result in test failures
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
-                headerImage: require("../../../../res/img/e2e/warning.svg"),
+                headerImage: require("../../../../res/img/e2e/warning.svg").default,
                 title: _t("Your messages are not secure"),
                 description: <div>
                     { _t("One of the following may be compromised:") }
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index c15e18fceb0..8bd907f885e 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -159,7 +159,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         if (this.props.showInviteButton) {
             inviteButton = (
                 <div className="mx_EntityTile_invite">
-                    <img src={require("../../../../res/img/plus.svg")} width="16" height="16" />
+                    <img src={require("../../../../res/img/plus.svg").default} width="16" height="16" />
                 </div>
             );
         }
diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
index 93757a0140f..a74dc134576 100644
--- a/src/components/views/rooms/LinkPreviewGroup.tsx
+++ b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -72,7 +72,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
                             className="mx_filterFlipColor"
                             alt=""
                             role="presentation"
-                            src={require("../../../../res/img/cancel.svg")}
+                            src={require("../../../../res/img/cancel.svg").default}
                             width="18"
                             height="18"
                         />
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
index 9b5047c55cf..27377c567be 100644
--- a/src/components/views/rooms/MemberList.tsx
+++ b/src/components/views/rooms/MemberList.tsx
@@ -316,7 +316,7 @@ export default class MemberList extends React.Component<IProps, IState> {
             <EntityTile
                 className="mx_EntityTile_ellipsis"
                 avatarJsx={
-                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
+                    <BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 9a825b7291d..8ebf2afa316 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -408,7 +408,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
                     <img className="mx_MessageComposer_roomReplaced_icon"
-                        src={require("../../../../res/img/room_replaced.svg")}
+                        src={require("../../../../res/img/room_replaced.svg").default}
                     />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         { _t("This room has been replaced and is no longer active.") }
diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx
index 1786e5061a1..69c0e14a454 100644
--- a/src/components/views/rooms/ReplyPreview.tsx
+++ b/src/components/views/rooms/ReplyPreview.tsx
@@ -52,7 +52,7 @@ export default class ReplyPreview extends React.Component<IProps> {
                 <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
                     <img
                         className="mx_filterFlipColor"
-                        src={require("../../../../res/img/cancel.svg")}
+                        src={require("../../../../res/img/cancel.svg").default}
                         width="18"
                         height="18"
                         onClick={() => cancelQuoting(this.context.timelineRenderingType)}
diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index dde5e616add..eed93c31f23 100644
--- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -263,7 +263,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
         if (room.getJoinRule() === JoinRule.Public && !this.state.hasAliases) {
             aliasWarning = (
                 <div className='mx_SecurityRoomSettingsTab_warning'>
-                    <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />
+                    <img src={require("../../../../../../res/img/warning.svg").default} width={15} height={15} />
                     <span>
                         { _t("To link to this room, please add an address.") }
                     </span>
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
index d37f2f4c4a0..14851b5becb 100644
--- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -453,7 +453,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         const discoWarning = this.state.requiredPolicyInfo.hasTerms
             ? <img
                 className='mx_GeneralUserSettingsTab_warningIcon'
-                src={require("../../../../../../res/img/feather-customised/warning-triangle.svg")}
+                src={require("../../../../../../res/img/feather-customised/warning-triangle.svg").default}
                 width="18"
                 height="18"
                 alt={_t("Warning")}

From aed8da463b8401b3f56bb548811777e6297ebb56 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:07:58 +0100
Subject: [PATCH 3/8] add shameful eslint ignore

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index a0f57155736..c36288f760d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -112,6 +112,41 @@ module.exports = {
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
         },
+    },
+        // temporary override for offending icon require files
+        {
+            files: [
+                "src/components/structures/FileDropTarget.tsx",
+                "src/components/structures/RoomStatusBar.tsx",
+                "src/components/structures/UserMenu.tsx",
+                "src/components/views/avatars/WidgetAvatar.tsx",
+                "src/components/views/dialogs/AddExistingToSpaceDialog.tsx",
+                "src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx",
+                "src/components/views/dialogs/ForwardDialog.tsx",
+                "src/components/views/dialogs/InviteDialog.tsx",
+                "src/components/views/dialogs/ModalWidgetDialog.tsx",
+                "src/components/views/dialogs/UploadConfirmDialog.tsx",
+                "src/components/views/dialogs/security/SetupEncryptionDialog.tsx",
+                "src/components/views/elements/AddressTile.tsx",
+                "src/components/views/elements/AppWarning.tsx",
+                "src/components/views/elements/SSOButtons.tsx",
+                "src/components/views/messages/MAudioBody.tsx",
+                "src/components/views/messages/MImageBody.tsx",
+                "src/components/views/messages/MStickerBody.tsx",
+                "src/components/views/messages/MVideoBody.tsx",
+                "src/components/views/messages/MVoiceMessageBody.tsx",
+                "src/components/views/right_panel/EncryptionPanel.tsx",
+                "src/components/views/rooms/EntityTile.tsx",
+                "src/components/views/rooms/LinkPreviewGroup.tsx",
+                "src/components/views/rooms/MemberList.tsx",
+                "src/components/views/rooms/MessageComposer.tsx",
+                "src/components/views/rooms/ReplyPreview.tsx",
+                "src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx",
+                "src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx"
+            ],
+            rules: {
+                "@typescript-eslint/no-var-requires": "off",
+            },
     }],
     settings: {
         react: {

From 3c7c5b6117b928e2cf67dd7ff9e34b4ba78e0541 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:09:06 +0100
Subject: [PATCH 4/8] format eslintrc

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js | 47 ++++++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c36288f760d..51f9d476a72 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -87,32 +87,33 @@ module.exports = {
         "jsx-a11y/role-supports-aria-props": "off",
         "jsx-a11y/tabindex-no-positive": "off",
     },
-    overrides: [{
-        files: [
-            "src/**/*.{ts,tsx}",
-            "test/**/*.{ts,tsx}",
-        ],
-        extends: [
-            "plugin:matrix-org/typescript",
-            "plugin:matrix-org/react",
-        ],
-        rules: {
-            // Things we do that break the ideal style
-            "prefer-promise-reject-errors": "off",
-            "quotes": "off",
-            "no-extra-boolean-cast": "off",
+    overrides: [
+        {
+            files: [
+                "src/**/*.{ts,tsx}",
+                "test/**/*.{ts,tsx}",
+            ],
+            extends: [
+                "plugin:matrix-org/typescript",
+                "plugin:matrix-org/react",
+            ],
+            rules: {
+                // Things we do that break the ideal style
+                "prefer-promise-reject-errors": "off",
+                "quotes": "off",
+                "no-extra-boolean-cast": "off",
 
-            // Remove Babel things manually due to override limitations
-            "@babel/no-invalid-this": ["off"],
+                // Remove Babel things manually due to override limitations
+                "@babel/no-invalid-this": ["off"],
 
-            // We're okay being explicit at the moment
-            "@typescript-eslint/no-empty-interface": "off",
-            // We disable this while we're transitioning
-            "@typescript-eslint/no-explicit-any": "off",
-            // We'd rather not do this but we do
-            "@typescript-eslint/ban-ts-comment": "off",
+                // We're okay being explicit at the moment
+                "@typescript-eslint/no-empty-interface": "off",
+                // We disable this while we're transitioning
+                "@typescript-eslint/no-explicit-any": "off",
+                // We'd rather not do this but we do
+                "@typescript-eslint/ban-ts-comment": "off",
+            },
         },
-    },
         // temporary override for offending icon require files
         {
             files: [

From 9eb83683475ca78db04440cda0ee57ca70e3e754 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:11:15 +0100
Subject: [PATCH 5/8] add missed MFileBody change

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js                                | 1 +
 src/components/views/messages/MFileBody.tsx | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 51f9d476a72..73c64b9b825 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -133,6 +133,7 @@ module.exports = {
                 "src/components/views/elements/SSOButtons.tsx",
                 "src/components/views/messages/MAudioBody.tsx",
                 "src/components/views/messages/MImageBody.tsx",
+                "src/components/views/messages/MFileBody.tsx",
                 "src/components/views/messages/MStickerBody.tsx",
                 "src/components/views/messages/MVideoBody.tsx",
                 "src/components/views/messages/MVoiceMessageBody.tsx",
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 16b9f1feaeb..383a2cce2e0 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -30,14 +30,13 @@ import { IBodyProps } from "./IBodyProps";
 import { FileDownloader } from "../../../utils/FileDownloader";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-import DownloadSvg from '../../../../res/img/download.svg';
 
 export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
 
 async function cacheDownloadIcon() {
     if (DOWNLOAD_ICON_URL) return; // cached already
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const svg = await fetch(DownloadSvg).then(r => r.text());
+    const svg = await fetch(require('../../../../res/img/download.svg').default).then(r => r.text());
     DOWNLOAD_ICON_URL = "data:image/svg+xml;base64," + window.btoa(svg);
 }
 

From 6a41d03b51490fc20725df4609a7ddc9693fef33 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:30:57 +0100
Subject: [PATCH 6/8] one more broken svg

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/SdkConfig.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/SdkConfig.ts b/src/SdkConfig.ts
index f0bfafab9fd..c4387d1f237 100644
--- a/src/SdkConfig.ts
+++ b/src/SdkConfig.ts
@@ -50,7 +50,7 @@ export const DEFAULTS: ConfigOptions = {
     },
     desktopBuilds: {
         available: true,
-        logo: require("../res/img/element-desktop-logo.svg"),
+        logo: require("../res/img/element-desktop-logo.svg").default,
         url: "https://element.io/get-started",
     },
 };

From 2e9b19cfa535c7ddd92a5e0af05bb05795d65057 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 17:32:15 +0100
Subject: [PATCH 7/8] and ignore it

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 73c64b9b825..44b0080b636 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -117,6 +117,7 @@ module.exports = {
         // temporary override for offending icon require files
         {
             files: [
+                "src/SdkConfig.ts",
                 "src/components/structures/FileDropTarget.tsx",
                 "src/components/structures/RoomStatusBar.tsx",
                 "src/components/structures/UserMenu.tsx",

From 19c8124aebd2b8b165ca273bea939867a6c6c9d9 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 3 Mar 2022 18:41:57 +0100
Subject: [PATCH 8/8] fix indentation

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .eslintrc.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 44b0080b636..45cd05506f6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -150,7 +150,8 @@ module.exports = {
             rules: {
                 "@typescript-eslint/no-var-requires": "off",
             },
-    }],
+        }
+    ],
     settings: {
         react: {
             version: "detect",