replace all require(svgs) with esm import (#7948)

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -39,6 +39,7 @@ 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;
@@ -213,7 +214,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     if (error) {
         footer = <>
             <img
-                src={require("../../../../res/img/element-icons/warning-badge.svg")}
+                src={WarningBadgeSvg}
                 height="24"
                 width="24"
                 alt=""

src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

@@ -44,6 +44,7 @@ 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;
@@ -241,7 +242,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={WarningBadgeSvg} height="24" width="24" alt="" />
 
             <span className="mx_CreateSpaceFromCommunityDialog_error">
                 <div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>

src/components/views/dialogs/ForwardDialog.tsx

@@ -48,6 +48,7 @@ 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;
 
@@ -216,7 +217,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={EllipsisSvg} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"

src/components/views/dialogs/InviteDialog.tsx

@@ -72,6 +72,9 @@ 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 */
@@ -195,7 +198,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={EmailPillSvg}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -217,7 +220,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
                     onClick={this.onRemove}
                 >
                     <img
-                        src={require("../../../../res/img/icon-pill-remove.svg")}
+                        src={PillRemoveSvg}
                         alt={_t('Remove')}
                         width={8}
                         height={8}
@@ -301,7 +304,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={EmailPillSvg}
                 width={avatarSize}
                 height={avatarSize}
             />
@@ -1472,7 +1475,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={InfoSvg}
                                 width={14}
                                 height={14} />
                             { " " + _t("Invited people will be able to read old messages.") }

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={require("../../../../res/img/element-icons/warning-badge.svg")}
+                    src={WarningBadgeSvg}
                     height="16"
                     width="16"
                     alt=""

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -23,6 +23,7 @@ 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;
@@ -94,7 +95,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={FilesSvg}
                     />
                     { this.props.file.name } ({ filesize(this.props.file.size) })
                 </div>

src/components/views/dialogs/security/SetupEncryptionDialog.tsx

@@ -22,12 +22,14 @@ 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 require("../../../../../res/img/e2e/verified.svg");
+        return VerifiedSvg;
     } else {
-        return require("../../../../../res/img/e2e/warning.svg");
+        return WarningSvg;
     }
 }