Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 61cd463

Browse files
author
Kerry
authored
replace all require(svgs) with esm import (#7948)
Signed-off-by: Kerry Archibald <[email protected]>
1 parent 522ad1a commit 61cd463

33 files changed

+104
-54
lines changed

‎src/components/structures/FileDropTarget.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ limitations under the License.
1717
import React, { useEffect, useState } from "react";
1818

1919
import { _t } from "../../languageHandler";
20+
import FileDropSvg from '../../../res/img/upload-big.svg';
2021

2122
interface IProps {
2223
parent: HTMLElement;
@@ -109,7 +110,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
109110

110111
if (state.dragging) {
111112
return <div className="mx_FileDropTarget">
112-
<img src={require("../../../res/img/upload-big.svg")} className="mx_FileDropTarget_image" alt="" />
113+
<img src={FileDropSvg} className="mx_FileDropTarget_image" alt="" />
113114
{ _t("Drop file here to upload") }
114115
</div>;
115116
}

‎src/components/structures/GroupView.js

+14-8
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ import { createSpaceFromCommunity } from "../../utils/space";
4646
import { Action } from "../../dispatcher/actions";
4747
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
4848
import { UPDATE_EVENT } from "../../stores/AsyncStore";
49+
import CreateRoomSvg from '../../../res/img/icons-create-room.svg';
50+
import CancelSmallSvg from '../../../res/img/cancel-small.svg';
51+
import CancelSvg from '../../../res/img/cancel.svg';
52+
import ExternalLinkSvg from '../../../res/img/external-link.svg';
53+
import AddRoomSvg from '../../../res/img/icons-room-add.svg';
54+
import CameraSvg from '../../../res/img/camera.svg';
4955

5056
const LONG_DESC_PLACEHOLDER = _td(
5157
`<h1>HTML for your community's page</h1>
@@ -135,7 +141,7 @@ class CategoryRoomList extends React.Component {
135141
(<AccessibleButton className="mx_GroupView_featuredThings_addButton"
136142
onClick={this.onAddRoomsToSummaryClicked}
137143
>
138-
<img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
144+
<img src={CreateRoomSvg} width="64" height="64" />
139145
<div className="mx_GroupView_featuredThings_addButton_label">
140146
{ _t('Add a Room') }
141147
</div>
@@ -235,7 +241,7 @@ class FeaturedRoom extends React.Component {
235241
const deleteButton = this.props.editing ?
236242
<img
237243
className="mx_GroupView_featuredThing_deleteButton"
238-
src={require("../../../res/img/cancel-small.svg")}
244+
src={CancelSmallSvg}
239245
width="14"
240246
height="14"
241247
alt="Delete"
@@ -306,7 +312,7 @@ class RoleUserList extends React.Component {
306312
render() {
307313
const addButton = this.props.editing ?
308314
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
309-
<img src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
315+
<img src={CreateRoomSvg} width="64" height="64" />
310316
<div className="mx_GroupView_featuredThings_addButton_label">
311317
{ _t('Add a User') }
312318
</div>
@@ -386,7 +392,7 @@ class FeaturedUser extends React.Component {
386392
const deleteButton = this.props.editing ?
387393
<img
388394
className="mx_GroupView_featuredThing_deleteButton"
389-
src={require("../../../res/img/cancel-small.svg")}
395+
src={CancelSmallSvg}
390396
width="14"
391397
height="14"
392398
alt="Delete"
@@ -844,7 +850,7 @@ export default class GroupView extends React.Component {
844850
},
845851
) }
846852
<a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
847-
<img src={require("../../../res/img/external-link.svg")} width="11" height="10" alt='' />
853+
<img src={ExternalLinkSvg} width="11" height="10" alt='' />
848854
</a>
849855
</div>;
850856
}
@@ -925,7 +931,7 @@ export default class GroupView extends React.Component {
925931
onClick={this._onAddRoomsClick}
926932
>
927933
<div className="mx_GroupView_rooms_header_addRow_button">
928-
<img src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
934+
<img src={AddRoomSvg} width="24" height="24" />
929935
</div>
930936
<div className="mx_GroupView_rooms_header_addRow_label">
931937
{ _t('Add rooms to this community') }
@@ -1257,7 +1263,7 @@ export default class GroupView extends React.Component {
12571263
<div className="mx_GroupView_avatarPicker_edit">
12581264
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
12591265
<img
1260-
src={require("../../../res/img/camera.svg")}
1266+
src={CameraSvg}
12611267
alt={_t("Upload avatar")}
12621268
title={_t("Upload avatar")}
12631269
width="17"
@@ -1331,7 +1337,7 @@ export default class GroupView extends React.Component {
13311337
onClick={this._onCancelClick}
13321338
>
13331339
<img
1334-
src={require("../../../res/img/cancel.svg")}
1340+
src={CancelSvg}
13351341
className="mx_filterFlipColor"
13361342
width="18"
13371343
height="18"

‎src/components/structures/MyGroups.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import AccessibleButton from '../views/elements/AccessibleButton';
2626
import MatrixClientContext from "../../contexts/MatrixClientContext";
2727
import AutoHideScrollbar from "./AutoHideScrollbar";
2828
import { replaceableComponent } from "../../utils/replaceableComponent";
29+
import GroupsSvg from '../../../res/img/icons-groups.svg';
2930

3031
@replaceableComponent("structures.MyGroups")
3132
export default class MyGroups extends React.Component {
@@ -106,7 +107,7 @@ export default class MyGroups extends React.Component {
106107
}
107108

108109
return <div className="mx_MyGroups">
109-
<SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
110+
<SimpleRoomHeader title={_t("Communities")} icon={GroupsSvg} />
110111
<div className='mx_MyGroups_header'>
111112
<div className="mx_MyGroups_headerCard">
112113
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />

‎src/components/structures/RoomStatusBar.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { StaticNotificationState } from "../../stores/notifications/StaticNotifi
3030
import AccessibleButton from "../views/elements/AccessibleButton";
3131
import InlineSpinner from "../views/elements/InlineSpinner";
3232
import MatrixClientContext from "../../contexts/MatrixClientContext";
33+
import WarningTriangleSvg from '../../../res/img/feather-customised/warning-triangle.svg';
3334

3435
const STATUS_BAR_HIDDEN = 0;
3536
const STATUS_BAR_EXPANDED = 1;
@@ -285,7 +286,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
285286
<div role="alert">
286287
<div className="mx_RoomStatusBar_connectionLostBar">
287288
<img
288-
src={require("../../../res/img/feather-customised/warning-triangle.svg")}
289+
src={WarningTriangleSvg}
289290
width="24"
290291
height="24"
291292
title="/!\ "

‎src/components/structures/UserMenu.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedP
6262
import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
6363
import PosthogTrackers from "../../PosthogTrackers";
6464
import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
65+
import SwitchThemeSvg from '../../../res/img/element-icons/roomlist/dark-light-mode.svg';
6566

6667
const CustomStatusSection = () => {
6768
const cli = useContext(MatrixClientContext);
@@ -515,7 +516,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
515516
title={this.state.isDarkTheme ? _t("Switch to light mode") : _t("Switch to dark mode")}
516517
>
517518
<img
518-
src={require("../../../res/img/element-icons/roomlist/dark-light-mode.svg")}
519+
src={SwitchThemeSvg}
519520
alt={_t("Switch theme")}
520521
width={16}
521522
/>

‎src/components/views/avatars/WidgetAvatar.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,27 @@ import classNames from 'classnames';
2020
import { IApp } from "../../../stores/WidgetStore";
2121
import BaseAvatar, { BaseAvatarType } from "./BaseAvatar";
2222
import { mediaFromMxc } from "../../../customisations/Media";
23+
import DefaultAppSvg from '../../../../res/img/element-icons/room/default_app.svg';
24+
import DefaultVideoSvg from '../../../../res/img/element-icons/room/default_video.svg';
25+
import DefaultCalSvg from '../../../../res/img/element-icons/room/default_cal.svg';
26+
import DefaultDocSvg from '../../../../res/img/element-icons/room/default_doc.svg';
27+
import DefaultClockSvg from '../../../../res/img/element-icons/room/default_clock.svg';
2328

2429
interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
2530
app: IApp;
2631
}
2732

2833
const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 20, ...props }) => {
29-
let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg")];
34+
let iconUrls = [DefaultAppSvg];
3035
// heuristics for some better icons until Widgets support their own icons
3136
if (app.type.includes("jitsi")) {
32-
iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg")];
37+
iconUrls = [DefaultVideoSvg];
3338
} else if (app.type.includes("meeting") || app.type.includes("calendar")) {
34-
iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg")];
39+
iconUrls = [DefaultCalSvg];
3540
} else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
36-
iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg")];
41+
iconUrls = [DefaultDocSvg];
3742
} else if (app.type.includes("clock")) {
38-
iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg")];
43+
iconUrls = [DefaultClockSvg];
3944
}
4045

4146
return (

‎src/components/views/context_menus/GroupInviteTileContextMenu.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import Modal from '../../../Modal';
2626
import GroupStore from "../../../stores/GroupStore";
2727
import { MenuItem } from "../../structures/ContextMenu";
2828
import { replaceableComponent } from "../../../utils/replaceableComponent";
29+
import ContextDeleteSvg from '../../../../res/img/icon_context_delete.svg';
2930

3031
@replaceableComponent("views.context_menus.GroupInviteTileContextMenu")
3132
export default class GroupInviteTileContextMenu extends React.Component {
@@ -85,7 +86,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
8586
render() {
8687
return <div>
8788
<MenuItem className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject}>
88-
<img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" alt="" />
89+
<img className="mx_RoomTileContextMenu_tag_icon" src={ContextDeleteSvg} width="15" height="15" alt="" />
8990
{ _t('Reject') }
9091
</MenuItem>
9192
</div>;

‎src/components/views/dialogs/AddExistingToSpaceDialog.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import ProgressBar from "../elements/ProgressBar";
3939
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
4040
import QueryMatcher from "../../../autocomplete/QueryMatcher";
4141
import LazyRenderList from "../elements/LazyRenderList";
42+
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
4243

4344
// These values match CSS
4445
const ROW_HEIGHT = 32 + 12;
@@ -213,7 +214,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
213214
if (error) {
214215
footer = <>
215216
<img
216-
src={require("../../../../res/img/element-icons/warning-badge.svg")}
217+
src={WarningBadgeSvg}
217218
height="24"
218219
width="24"
219220
alt=""

‎src/components/views/dialogs/CreateSpaceFromCommunityDialog.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { inviteUsersToRoom } from "../../../RoomInvite";
4444
import ProgressBar from "../elements/ProgressBar";
4545
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
4646
import { CreateEventField, IGroupRoom, IGroupSummary } from "../../../@types/groups";
47+
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
4748

4849
interface IProps {
4950
matrixClient: MatrixClient;
@@ -241,7 +242,7 @@ const CreateSpaceFromCommunityDialog: React.FC<IProps> = ({ matrixClient: cli, g
241242
let footer;
242243
if (error) {
243244
footer = <>
244-
<img src={require("../../../../res/img/element-icons/warning-badge.svg")} height="24" width="24" alt="" />
245+
<img src={WarningBadgeSvg} height="24" width="24" alt="" />
245246

246247
<span className="mx_CreateSpaceFromCommunityDialog_error">
247248
<div className="mx_CreateSpaceFromCommunityDialog_errorHeading">{ _t("Failed to migrate community") }</div>

‎src/components/views/dialogs/ForwardDialog.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { roomContextDetailsText } from "../../../Rooms";
4848
import { Action } from "../../../dispatcher/actions";
4949
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
5050
import { ButtonEvent } from "../elements/AccessibleButton";
51+
import EllipsisSvg from '../../../../res/img/ellipsis.svg';
5152

5253
const AVATAR_SIZE = 30;
5354

@@ -216,7 +217,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
216217
<EntityTile
217218
className="mx_EntityTile_ellipsis"
218219
avatarJsx={
219-
<BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
220+
<BaseAvatar url={EllipsisSvg} name="..." width={36} height={36} />
220221
}
221222
name={text}
222223
presenceState="online"

‎src/components/views/dialogs/InviteDialog.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@ import { ScreenName } from '../../../PosthogTrackers';
7272
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
7373
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
7474
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
75+
import EmailPillSvg from '../../../../res/img/icon-email-pill-avatar.svg';
76+
import PillRemoveSvg from '../../../../res/img/icon-pill-remove.svg';
77+
import InfoSvg from '../../../../res/img/element-icons/info.svg';
7578

7679
// we have a number of types defined from the Matrix spec which can't reasonably be altered here.
7780
/* eslint-disable camelcase */
@@ -195,7 +198,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
195198
const avatar = (this.props.member as ThreepidMember).isEmail
196199
? <img
197200
className='mx_InviteDialog_userTile_avatar mx_InviteDialog_userTile_threepidAvatar'
198-
src={require("../../../../res/img/icon-email-pill-avatar.svg")}
201+
src={EmailPillSvg}
199202
width={avatarSize}
200203
height={avatarSize}
201204
/>
@@ -217,7 +220,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
217220
onClick={this.onRemove}
218221
>
219222
<img
220-
src={require("../../../../res/img/icon-pill-remove.svg")}
223+
src={PillRemoveSvg}
221224
alt={_t('Remove')}
222225
width={8}
223226
height={8}
@@ -301,7 +304,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
301304
const avatarSize = 36;
302305
const avatar = (this.props.member as ThreepidMember).isEmail
303306
? <img
304-
src={require("../../../../res/img/icon-email-pill-avatar.svg")}
307+
src={EmailPillSvg}
305308
width={avatarSize}
306309
height={avatarSize}
307310
/>
@@ -1472,7 +1475,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
14721475
keySharingWarning =
14731476
<p className='mx_InviteDialog_helpText'>
14741477
<img
1475-
src={require("../../../../res/img/element-icons/info.svg")}
1478+
src={InfoSvg}
14761479
width={14}
14771480
height={14} />
14781481
{ " " + _t("Invited people will be able to read old messages.") }

‎src/components/views/dialogs/ModalWidgetDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
4242
import { replaceableComponent } from "../../../utils/replaceableComponent";
4343
import { ELEMENT_CLIENT_ID } from "../../../identifiers";
4444
import SettingsStore from "../../../settings/SettingsStore";
45-
45+
import WarningBadgeSvg from '../../../../res/img/element-icons/warning-badge.svg';
4646
interface IProps {
4747
widgetDefinition: IModalWidgetOpenRequestData;
4848
widgetRoomId?: string;
@@ -187,7 +187,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
187187
>
188188
<div className="mx_ModalWidgetDialog_warning">
189189
<img
190-
src={require("../../../../res/img/element-icons/warning-badge.svg")}
190+
src={WarningBadgeSvg}
191191
height="16"
192192
width="16"
193193
alt=""

‎src/components/views/dialogs/UploadConfirmDialog.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
2323
import { getBlobSafeMimeType } from '../../../utils/blobs';
2424
import BaseDialog from "./BaseDialog";
2525
import DialogButtons from "../elements/DialogButtons";
26+
import FilesSvg from '../../../../res/img/feather-customised/files.svg';
2627

2728
interface IProps {
2829
file: File;
@@ -94,7 +95,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
9495
preview = <div>
9596
<div>
9697
<img className="mx_UploadConfirmDialog_fileIcon"
97-
src={require("../../../../res/img/feather-customised/files.svg")}
98+
src={FilesSvg}
9899
/>
99100
{ this.props.file.name } ({ filesize(this.props.file.size) })
100101
</div>

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ import { _t } from '../../../../languageHandler';
2222
import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
2323
import { replaceableComponent } from "../../../../utils/replaceableComponent";
2424
import { IDialogProps } from "../IDialogProps";
25+
import VerifiedSvg from '../../../../../res/img/e2e/verified.svg';
26+
import WarningSvg from '../../../../../res/img/e2e/warning.svg';
2527

2628
function iconFromPhase(phase: Phase) {
2729
if (phase === Phase.Done) {
28-
return require("../../../../../res/img/e2e/verified.svg");
30+
return VerifiedSvg;
2931
} else {
30-
return require("../../../../../res/img/e2e/warning.svg");
32+
return WarningSvg;
3133
}
3234
}
3335

‎src/components/views/elements/AddressTile.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
2424
import { IUserAddress } from '../../../UserAddress';
2525
import BaseAvatar from '../avatars/BaseAvatar';
2626
import EmailUserIcon from "../../../../res/img/icon-email-user.svg";
27+
import AddressDeleteSvg from '../../../../res/img/icon-address-delete.svg';
2728

2829
interface IProps {
2930
address: IUserAddress;
@@ -124,7 +125,7 @@ export default class AddressTile extends React.Component<IProps> {
124125
if (this.props.canDismiss) {
125126
dismiss = (
126127
<div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed}>
127-
<img src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
128+
<img src={AddressDeleteSvg} width="9" height="9" />
128129
</div>
129130
);
130131
}

‎src/components/views/elements/AppWarning.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import WarningSvg from '../../../../res/img/warning.svg';
4+
35
interface IProps {
46
errorMsg?: string;
57
}
@@ -8,7 +10,7 @@ const AppWarning: React.FC<IProps> = (props) => {
810
return (
911
<div className='mx_AppPermissionWarning'>
1012
<div className='mx_AppPermissionWarningImage'>
11-
<img src={require("../../../../res/img/warning.svg")} alt='' />
13+
<img src={WarningSvg} alt='' />
1214
</div>
1315
<div className='mx_AppPermissionWarningText'>
1416
<span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg || "Error" }</span>

0 commit comments

Comments
 (0)