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

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-02 17:14:33 +01:00 committed by GitHub
parent 522ad1aafb
commit 61cd463a3b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 104 additions and 54 deletions

View file

@ -17,6 +17,7 @@ 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;
@ -109,7 +110,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={FileDropSvg} className="mx_FileDropTarget_image" alt="" />
{ _t("Drop file here to upload") }
</div>;
}

View file

@ -46,6 +46,12 @@ 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>
@ -135,7 +141,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={CreateRoomSvg} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a Room') }
</div>
@ -235,7 +241,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={CancelSmallSvg}
width="14"
height="14"
alt="Delete"
@ -306,7 +312,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={CreateRoomSvg} width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label">
{ _t('Add a User') }
</div>
@ -386,7 +392,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={CancelSmallSvg}
width="14"
height="14"
alt="Delete"
@ -844,7 +850,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={ExternalLinkSvg} width="11" height="10" alt='' />
</a>
</div>;
}
@ -925,7 +931,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={AddRoomSvg} width="24" height="24" />
</div>
<div className="mx_GroupView_rooms_header_addRow_label">
{ _t('Add rooms to this community') }
@ -1257,7 +1263,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={CameraSvg}
alt={_t("Upload avatar")}
title={_t("Upload avatar")}
width="17"
@ -1331,7 +1337,7 @@ export default class GroupView extends React.Component {
onClick={this._onCancelClick}
>
<img
src={require("../../../res/img/cancel.svg")}
src={CancelSvg}
className="mx_filterFlipColor"
width="18"
height="18"

View file

@ -26,6 +26,7 @@ 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 {
@ -106,7 +107,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={GroupsSvg} />
<div className='mx_MyGroups_header'>
<div className="mx_MyGroups_headerCard">
<AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick} />

View file

@ -30,6 +30,7 @@ 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;
@ -285,7 +286,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={WarningTriangleSvg}
width="24"
height="24"
title="/!\ "

View file

@ -62,6 +62,7 @@ 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);
@ -515,7 +516,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={SwitchThemeSvg}
alt={_t("Switch theme")}
width={16}
/>