Revert "replace all require(.svg) with esm import"

.eslintrc.js

@@ -87,32 +87,71 @@ 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: [
+                "src/SdkConfig.ts",
+                "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/MFileBody.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: {
             version: "detect",

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",
     },
 };

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").default} className="mx_FileDropTarget_image" alt="" />
             { _t("Drop file here to upload") }
         </div>;
     }

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").default} 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").default}
                 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").default} 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").default}
                 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").default} 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").default} 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").default}
                                     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").default}
                             className="mx_filterFlipColor"
                             width="18"
                             height="18"

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").default} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />
@@ -123,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">

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").default}
                                 width="24"
                                 height="24"
                                 title="/!\ "

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").default}
                         alt={_t("Switch theme")}
                         width={16}
                     />

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").default];
     // 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").default];
     } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
-        iconUrls = [DefaultCalSvg];
+        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 = [DefaultDocSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg").default];
     } else if (app.type.includes("clock")) {
-        iconUrls = [DefaultClockSvg];
+        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg").default];
     }
 
     return (

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").default} width="15" height="15" alt="" />
                 { _t('Reject') }
             </MenuItem>
         </div>;

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").default}
                 height="24"
                 width="24"
                 alt=""

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").default} 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,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").default} name="..." width={36} height={36} />
                 }
                 name={text}
                 presenceState="online"