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

* Revert "replace all require(svgs) with esm import (#7948)"

This reverts commit 61cd463a3b.

* add .default to svg icon inline requires

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

* add shameful eslint ignore

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

* format eslintrc

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

* add missed MFileBody change

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

* one more broken svg

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

* and ignore it

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-03 18:51:38 +01:00 committed by GitHub
parent 8a7ffb4f90
commit d98a73b003
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 119 additions and 131 deletions

View file

@ -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>;
}

View file

@ -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"

View file

@ -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">

View file

@ -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="/!\ "

View file

@ -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}
/>