Merge pull request #2460 from matrix-org/jryans/versioned-img-urls

Load fonts and images via source-relative URLs and requires

karma.conf.js

@@ -168,6 +168,10 @@ module.exports = function (config) {
                                   path.resolve('./test'),
                                  ]
                     },
+                    {
+                        test: /\.(gif|png|svg|ttf)$/,
+                        loader: 'file-loader',
+                    },
                 ],
                 noParse: [
                     // for cross platform compatibility use [\\\/] as the path separator

package.json

@@ -47,7 +47,7 @@
     "start:init": "babel src -d lib --source-maps --copy-files",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 18 --ignore-path .eslintignore.errorfiles src test",
+    "lintwithexclusions": "eslint --max-warnings 13 --ignore-path .eslintignore.errorfiles src test",
     "clean": "rimraf lib",
     "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers ChromeHeadless",
@@ -125,6 +125,7 @@
     "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
     "expect": "^23.6.0",
+    "file-loader": "^3.0.1",
     "flow-parser": "^0.57.3",
     "jest-mock": "^23.2.0",
     "karma": "^3.0.0",

res/css/structures/_MyGroups.scss

@@ -54,7 +54,7 @@ limitations under the License.
 
     &:before {
         background-color: $accent-fg-color;
-        mask: url('../../img/icons-create-room.svg');
+        mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 80%;

res/css/structures/_RoomSubList.scss

@@ -105,7 +105,7 @@ limitations under the License.
 .mx_RoomSubList_addRoom {
     background-color: $roomheader-addroom-color;
     color: $roomsublist-background;
-    background-image: url('../../img/icons-room-add.svg');
+    background-image: url('$(res)/img/icons-room-add.svg');
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    background-image: url('../../img/topleft-chevron.svg');
+    background-image: url('$(res)/img/topleft-chevron.svg');
     background-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;

res/css/structures/_RoomView.scss

@@ -116,7 +116,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner {
     flex: 1;
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-position: center 367px;
     background-size: 25px;
     background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner:before {
     background-color: $greyed-fg-color;
-    mask: url('../../img/feather-icons/search-input.svg');
+    mask: url('$(res)/img/feather-icons/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 50px;

res/css/structures/_SearchBox.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
-    background-image: url('../../img/icons-close.svg');
+    background-image: url('$(res)/img/icons-close.svg');
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;

res/css/structures/_TagPanel.scss

@@ -130,12 +130,12 @@ limitations under the License.
 }
 
 .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
-    mask: url('../../img/feather-icons/users.svg');
+    mask: url('$(res)/img/feather-icons/users.svg');
     mask-position: center 11px;
 }
 
 .mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
-    mask: url('../../img/feather-icons/life-buoy.svg');
+    mask: url('$(res)/img/feather-icons/life-buoy.svg');
     mask-position: center 9px;
 }
 

res/css/structures/_UserSettings.scss

@@ -173,7 +173,7 @@ limitations under the License.
     padding: 0px;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -61,7 +61,7 @@ limitations under the License.
     padding: 0;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss

@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     &:before {
-        mask: url("../../img/e2e/lock-warning.svg");
+        mask: url("$(res)/img/e2e/lock-warning.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
         content: "";

res/css/views/elements/_DirectorySearchBox.scss

@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('../../img/icon-return.svg');
+    background-image: url('$(res)/img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -61,7 +61,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('../../img/icon_context_delete.svg');
+    background: url('$(res)/img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;

res/css/views/elements/_ImageView.scss

@@ -50,7 +50,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('../../img/trans.png'); */
+    /* background-image: url('$(res)/img/trans.png'); */
     pointer-events: all;
 }
 

res/css/views/rooms/_EntityTile.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('../../img/member_chevron.png');
+    background-image: url('$(res)/img/member_chevron.png');
     background-position: center right 10px;
     background-repeat: no-repeat;
     padding-right: 30px;

res/css/views/rooms/_EventTile.scss

@@ -291,8 +291,8 @@ limitations under the License.
 }
 
 /* always override hidden attribute for blocked and warning */
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
     display: block;
 }
 

res/css/views/rooms/_MemberList.scss

@@ -83,7 +83,7 @@ limitations under the License.
 
 .mx_MemberList_invite span {
     margin: 0 auto;
-    background-image: url('../../img/feather-icons/user-add.svg');
+    background-image: url('$(res)/img/feather-icons/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;

res/css/views/rooms/_RoomTile.scss

@@ -29,7 +29,7 @@ limitations under the License.
     display: none;
     flex: 0 0 16px;
     height: 16px;
-    background-image: url('../../img/icon_context.svg');
+    background-image: url('$(res)/img/icon_context.svg');
     background-repeat: no-repeat;
     background-position: center;
 }

res/css/views/rooms/_SearchBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
         width: 37px;
         height: 37px;
         background-color: $accent-color;
-        mask: url('../../img/feather-icons/search-input.svg');
+        mask: url('$(res)/img/feather-icons/search-input.svg');
         mask-repeat: no-repeat;
         mask-position: center;
     }
@@ -55,7 +55,7 @@ limitations under the License.
 
     .mx_SearchBar_cancel {
         background-color: $warning-color;
-        mask: url('../../img/cancel.svg');
+        mask: url('$(res)/img/cancel.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 14px;

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -54,7 +54,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -61,7 +61,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_label > span {
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-size: 25px;
     background-position: left bottom;
     background-repeat: no-repeat;

res/themes/dark/css/_dark.scss

@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message_dark.svg";
+$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
-$copy-button-url: "../../img/icon_copy_message_dark.svg";
+$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/dark/css/dark.scss

@@ -1,4 +1,5 @@
+@import "../../light/css/_paths.scss";
+@import "../../light/css/_fonts.scss";
 @import "../../light/css/_base.scss";
 @import "_dark.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/dharma/css/_dharma.scss

@@ -1,5 +1,3 @@
-@import "_fonts.scss";
-
 // XXX: check this?
 /* Nunito lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
@@ -171,8 +169,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -275,7 +273,7 @@ input[type=search].mx_textinput_icon {
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
 input[type=text].mx_textinput_icon.mx_textinput_search,
 input[type=search].mx_textinput_icon.mx_textinput_search {
-    background-image: url('../../img/feather-icons/search-input.svg');
+    background-image: url('$(res)/img/feather-icons/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,

res/themes/dharma/css/_fonts.scss

@@ -11,37 +11,37 @@
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
 }
 
 /*
@@ -51,14 +51,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

res/themes/dharma/css/dharma.scss

@@ -1,3 +1,4 @@
+@import "../../light/css/_paths.scss";
+@import "_fonts.scss";
 @import "_dharma.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/light/css/_base.scss

@@ -1,5 +1,3 @@
-@import "_fonts.scss";
-
 /* Open Sans lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
    nicely with Open Sans (on OSX, at least) and result in a huge
@@ -162,8 +160,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/light/css/_fonts.scss

@@ -7,42 +7,42 @@
  */
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
     font-weight: 600;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    src: url('$(res)/fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -54,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

res/themes/light/css/_paths.scss

@@ -0,0 +1,3 @@
+// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
+// This value is overridden by external themes in `riot-web`.
+$res: ../../..;

res/themes/light/css/light.scss

@@ -1,3 +1,4 @@
+@import "_paths.scss";
+@import "_fonts.scss";
 @import "_base.scss";
 @import "../../../../res/css/_components.scss";
-

src/Avatar.js

@@ -56,6 +56,6 @@ module.exports = {
         for (let i = 0; i < s.length; ++i) {
             total += s.charCodeAt(i);
         }
-        return 'img/' + images[total % images.length] + '.png';
+        return require('../res/img/' + images[total % images.length] + '.png');
     },
 };

src/components/structures/GroupView.js

@@ -125,7 +125,7 @@ const CategoryRoomList = React.createClass({
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -226,7 +226,7 @@ const FeaturedRoom = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -300,7 +300,7 @@ const RoleUserList = React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                 <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                  <div className="mx_GroupView_featuredThings_addButton_label">
                      { _t('Add a User') }
                  </div>
@@ -379,7 +379,7 @@ const FeaturedUser = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -855,7 +855,7 @@ export default React.createClass({
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
+                    <TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1189,7 +1189,7 @@ export default React.createClass({
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                                <img src="img/camera.svg"
+                                <img src={require("../../../res/img/camera.svg")}
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
@@ -1255,7 +1255,7 @@ export default React.createClass({
                 );
                 rightButtons.push(
                     <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
-                        <img src="img/cancel.svg" className="mx_filterFlipColor"
+                        <img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
                             width="18" height="18" alt={_t("Cancel")} />
                     </AccessibleButton>,
                 );
@@ -1265,13 +1265,13 @@ export default React.createClass({
                         <AccessibleButton className="mx_GroupHeader_button"
                             onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
                         >
-                            <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
+                            <TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
                         </AccessibleButton>,
                     );
                 }
                 rightButtons.push(
                     <AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
-                        <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                        <TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
                     </AccessibleButton>,
                 );
             }

src/components/structures/HomePage.js

@@ -108,7 +108,7 @@ class HomePage extends React.Component {
         if (this.context.matrixClient.isGuest()) {
             guestWarning = (
                 <div className="mx_HomePage_guest_warning">
-                    <img src="img/warning.svg" width="24" height="23" />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" />
                     <div>
                         <div>
                             { _t("You are currently using Riot anonymously as a guest.") }

src/components/structures/IndicatorScrollbar.js

@@ -66,7 +66,11 @@ export default class IndicatorScrollbar extends React.Component {
     }
 
     render() {
-        return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
+        return (<AutoHideScrollbar
+            ref={this._collectScrollerComponent}
+            wrappedRef={this._collectScroller}
+            {... this.props}
+        >
             { this.props.children }
         </AutoHideScrollbar>);
     }

src/components/structures/MatrixChat.js

@@ -302,7 +302,10 @@ export default React.createClass({
             // will check their settings.
             this.setState({
                 defaultServerName: null, // To un-hide any secrets people might be keeping
-                defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
+                defaultServerDiscoveryError: _t(
+                    "Invalid configuration: Cannot supply a default homeserver URL and " +
+                    "a default server name",
+                ),
             });
         }
 
@@ -1833,7 +1836,11 @@ export default React.createClass({
     render: function() {
         // console.log(`Rendering MatrixChat with view ${this.state.view}`);
 
-        if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
+        if (
+            this.state.view === VIEWS.LOADING ||
+            this.state.view === VIEWS.LOGGING_IN ||
+            this.state.loadingDefaultHomeserver
+        ) {
             const Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">

src/components/structures/MyGroups.js

@@ -107,7 +107,7 @@ export default withMatrixClient(React.createClass({
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
                 </div>
                 {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                        <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">

src/components/structures/RoomDirectory.js

@@ -571,7 +571,7 @@ module.exports = React.createClass({
         const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
         return (
             <div className="mx_RoomDirectory">
-                <SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
+                <SimpleRoomHeader title={ _t('Directory') } icon={require("../../../res/img/icons-directory.svg")} />
                 <div className="mx_RoomDirectory_list">
                     <div className="mx_RoomDirectory_listheader">
                         <DirectorySearchBox

src/components/structures/RoomStatusBar.js

@@ -198,7 +198,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
                         onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/newmessages.svg" width="24" height="24"
+                    <img src={require("../../../res/img/newmessages.svg")} width="24" height="24"
                         alt="" />
                 </div>
             );
@@ -209,7 +209,7 @@ module.exports = React.createClass({
             return (
                 <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
                         onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/scrolldown.svg" width="24" height="24"
+                    <img src={require("../../../res/img/scrolldown.svg")} width="24" height="24"
                         alt={_t("Scroll to bottom of page")}
                         title={_t("Scroll to bottom of page")} />
                 </AccessibleButton>
@@ -219,7 +219,7 @@ module.exports = React.createClass({
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
+                <TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
             );
         }
 
@@ -327,7 +327,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
+            <img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -346,7 +346,7 @@ module.exports = React.createClass({
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
                     <div>
                         <div className="mx_RoomStatusBar_connectionLostBar_title">
                             { _t('Connectivity to the server has been lost.') }

src/components/structures/RoomView.js

@@ -1777,20 +1777,20 @@ module.exports = React.createClass({
             if (call.type === "video") {
                 zoomButton = (
                     <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
-                        <TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
+                        <TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
                     </div>
                 );
 
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
-                        <TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
+                        <TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
                              alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
                              width="31" height="27" />
                     </div>;
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                    <TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
+                    <TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
                          alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                          width="21" height="26" />
                 </div>;
@@ -1802,7 +1802,7 @@ module.exports = React.createClass({
                     { videoMuteButton }
                     { zoomButton }
                     { statusBar }
-                    <TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17" />
+                    <TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
                 </div>;
         }
 

src/components/structures/TagPanel.js

@@ -136,7 +136,7 @@ const TagPanel = React.createClass({
         let clearButton;
         if (itemsSelected) {
             clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                <TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
                              alt={_t("Clear filter")}
                              title={_t("Clear filter")}
                 />

src/components/structures/TopLeftMenuButton.js

@@ -89,7 +89,7 @@ export default class TopLeftMenuButton extends React.Component {
                     resizeMethod="crop"
                 />
                 { nameElement }
-                <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
+                <img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
             </AccessibleButton>
         );
     }

src/components/structures/UploadBar.js

@@ -91,8 +91,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
                 <div className="mx_UploadBar_uploadProgressOuter">
                     <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
                 </div>
-                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
+                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
-                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
+                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
                     onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
                 />
                 <div className="mx_UploadBar_uploadBytes">

src/components/structures/UserSettings.js

@@ -1227,7 +1227,7 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
+                        <AccessibleButton element="img" src={require("../../../res/img/cancel-small.svg")} width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
                     </div>
                 </div>
@@ -1252,7 +1252,7 @@ module.exports = React.createClass({
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
+                         <AccessibleButton element="img" src={require("../../../res/img/plus.svg")} width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
                     </div>
                 </div>
             );
@@ -1322,7 +1322,7 @@ module.exports = React.createClass({
 
                     <div className="mx_UserSettings_avatarPicker">
                         <AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                            <img src="img/cancel.svg"
+                            <img src={require("../../../res/img/cancel.svg")}
                                 width="15" height="15"
                                 className="mx_filterFlipColor"
                                 alt={_t("Remove avatar")}
@@ -1334,7 +1334,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg" className="mx_filterFlipColor"
+                                <img src={require("../../../res/img/camera.svg")} className="mx_filterFlipColor"
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -79,7 +79,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
-                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Reject') }
             </div>
         </div>;

src/components/views/context_menus/RoomTileContextMenu.js

@@ -245,26 +245,26 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomTileContextMenu">
                 <div className="mx_RoomTileContextMenu_notif_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
+                    <img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
                 </div>
                 <div className={alertMeClasses} onClick={this._onClickAlertMe} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
                     { _t('All messages (noisy)') }
                 </div>
                 <div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
                     { _t('All messages') }
                 </div>
                 <div className={mentionsClasses} onClick={this._onClickMentions} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
                     { _t('Mentions only') }
                 </div>
                 <div className={muteNotifsClasses} onClick={this._onClickMute} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
                     { _t('Mute') }
                 </div>
             </div>
@@ -298,7 +298,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                     { leaveText }
                 </div>
             </div>
@@ -327,18 +327,18 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className={favouriteClasses} onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
                     { _t('Favourite') }
                 </div>
                 <div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
                     { _t('Low Priority') }
                 </div>
                 <div className={dmClasses} onClick={this._onClickDM} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
                     { _t('Direct Chat') }
                 </div>
             </div>

src/components/views/context_menus/TagTileContextMenu.js

@@ -59,7 +59,7 @@ export default class TagTileContextMenu extends React.Component {
             <div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
                 <TintableSvg
                     className="mx_TagTileContextMenu_item_icon"
-                    src="img/icons-groups.svg"
+                    src={require("../../../../res/img/icons-groups.svg")}
                     width="15"
                     height="15"
                 />
@@ -67,7 +67,7 @@ export default class TagTileContextMenu extends React.Component {
             </div>
             <hr className="mx_TagTileContextMenu_separator" />
             <div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
-                <img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Remove') }
             </div>
         </div>;

src/components/views/dialogs/BaseDialog.js

@@ -111,7 +111,7 @@ export default React.createClass({
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
-                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
+                <TintableSvg src={require("../../../../res/img/icons-close-button.svg")} width="35" height="35" />
             </AccessibleButton>;
         }
 

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 onClick={this.props.onNewDMClick}
             >
                 <div className="mx_RoomTile_avatar">
-                    <img src="img/create-big.svg" width="26" height="26" />
+                    <img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;

src/components/views/dialogs/ShareDialog.js

@@ -26,11 +26,11 @@ import * as ContextualMenu from "../../structures/ContextualMenu";
 const socials = [
     {
         name: 'Facebook',
-        img: 'img/social/facebook.png',
+        img: require("../../../../res/img/social/facebook.png"),
         url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
     }, {
         name: 'Twitter',
-        img: 'img/social/twitter-2.png',
+        img: require("../../../../res/img/social/twitter-2.png"),
         url: (url) => `https://twitter.com/home?status=${url}`,
     }, /* // icon missing
         name: 'Google Plus',
@@ -38,15 +38,15 @@ const socials = [
         url: (url) => `https://plus.google.com/share?url=${url}`,
     },*/ {
         name: 'LinkedIn',
-        img: 'img/social/linkedin.png',
+        img: require("../../../../res/img/social/linkedin.png"),
         url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
     }, {
         name: 'Reddit',
-        img: 'img/social/reddit.png',
+        img: require("../../../../res/img/social/reddit.png"),
         url: (url) => `http://www.reddit.com/submit?url=${url}`,
     }, {
         name: 'email',
-        img: 'img/social/email-1.png',
+        img: require("../../../../res/img/social/email-1.png"),
         url: (url) => `mailto:?body=${url}`,
     },
 ];
@@ -202,7 +202,7 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {

src/components/views/directory/NetworkDropdown.js

@@ -18,7 +18,7 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
 
-const DEFAULT_ICON_URL = "img/network-matrix.svg";
+const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
 
 export default class NetworkDropdown extends React.Component {
     constructor(props) {
@@ -191,7 +191,7 @@ export default class NetworkDropdown extends React.Component {
         } else if (!instance) {
             key = server + '_all';
             name = 'Matrix';
-            icon = <img src="img/network-matrix.svg" />;
+            icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
             span_class = 'mx_NetworkDropdown_menu_network';
         } else {
             key = server + '_inst_' + instance.instance_id;

src/components/views/elements/AddressSelector.js

@@ -150,7 +150,7 @@ export default React.createClass({
                             showAddress={this.props.showAddress}
                             justified={true}
                             networkName="vector"
-                            networkUrl="img/search-icon-vector.svg"
+                            networkUrl={require("../../../../res/img/search-icon-vector.svg")}
                         />
                     </div>,
                 );

src/components/views/elements/AddressTile.js

@@ -54,7 +54,7 @@ export default React.createClass({
                 address.avatarMxc, 25, 25, 'crop',
             ));
         } else if (address.addressType === 'email') {
-            imgUrls.push('img/icon-email-user.svg');
+            imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }
 
         // Removing networks for now as they're not really supported
@@ -141,7 +141,7 @@ export default React.createClass({
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
-                    <TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
+                    <TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
                 </div>
             );
         }

src/components/views/elements/AppPermission.js

@@ -47,7 +47,7 @@ export default class AppPermission extends React.Component {
         return (
             <div className='mx_AppPermissionWarning'>
                 <div className='mx_AppPermissionWarningImage'>
-                    <img src='img/warning.svg' alt={_t('Warning!')} />
+                    <img src={require("../../../../res/img/warning.svg")} alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
                     <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>

src/components/views/elements/AppTile.js

@@ -582,19 +582,21 @@ export default class AppTile extends React.Component {
         // editing is done in scalar
         const showEditButton = Boolean(this._scalarClient && this._canUserModify());
         const deleteWidgetLabel = this._deleteWidgetLabel();
-        let deleteIcon = 'img/cancel_green.svg';
+        let deleteIcon = require("../../../../res/img/cancel_green.svg");
         let deleteClasses = 'mx_AppTileMenuBarWidget';
         if (this._canUserModify()) {
-            deleteIcon = 'img/icon-delete-pink.svg';
+            deleteIcon = require("../../../../res/img/icon-delete-pink.svg");
             deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
         }
 
         // Picture snapshot - only show button when apps are maximised.
         const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
-        const showPictureSnapshotIcon = 'img/camera_green.svg';
+        const showPictureSnapshotIcon = require("../../../../res/img/camera_green.svg");
-        const popoutWidgetIcon = 'img/button-new-window.svg';
+        const popoutWidgetIcon = require("../../../../res/img/button-new-window.svg");
-        const reloadWidgetIcon = 'img/button-refresh.svg';
+        const reloadWidgetIcon = require("../../../../res/img/button-refresh.svg");
-        const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
+        const minimizeIcon = require("../../../../res/img/minimize.svg");
+        const maximizeIcon = require("../../../../res/img/maximize.svg");
+        const windowStateIcon = (this.props.show ? minimizeIcon : maximizeIcon);
 
         let appTileClass;
         if (this.props.miniMode) {
@@ -653,7 +655,7 @@ export default class AppTile extends React.Component {
 
                         { /* Edit widget */ }
                         { showEditButton && <TintableSvgButton
-                            src="img/edit_green.svg"
+                            src={require("../../../../res/img/edit_green.svg")}
                             className={"mx_AppTileMenuBarWidget " +
                               (this.props.showDelete ? "mx_AppTileMenuBarWidgetPadding" : "")}
                             title={_t('Edit')}

src/components/views/elements/AppWarning.js

@@ -5,7 +5,7 @@ const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src='img/warning.svg' alt='' />
+                <img src={require("../../../../res/img/warning.svg")} alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
                 <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>

src/components/views/elements/CreateRoomButton.js

@@ -25,7 +25,7 @@ const CreateRoomButton = function(props) {
         <ActionButton action="view_create_room"
             mouseOverAction={props.callout ? "callout_create_room" : null}
             label={_t("Create new room")}
-            iconPath="img/icons-create-room.svg"
+            iconPath={require("../../../../res/img/icons-create-room.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/EditableItemList.js

@@ -62,13 +62,13 @@ const EditableItem = React.createClass({
             { this.props.onAdd ?
                 <div className="mx_EditableItem_addButton">
                     <img className="mx_filterFlipColor"
-                        src="img/plus.svg" width="14" height="14"
+                        src={require("../../../../res/img/plus.svg")} width="14" height="14"
                         alt={_t("Add")} onClick={this.onAdd} />
                 </div>
                 :
                 <div className="mx_EditableItem_removeButton">
                     <img className="mx_filterFlipColor"
-                        src="img/cancel-small.svg" width="14" height="14"
+                        src={require("../../../../res/img/cancel-small.svg")} width="14" height="14"
                         alt={_t("Delete")} onClick={this.onRemove} />
                 </div>
             }

src/components/views/elements/HomeButton.js

@@ -24,7 +24,7 @@ const HomeButton = function(props) {
     return (
         <ActionButton action="view_home_page"
             label={_t("Home")}
-            iconPath="img/icons-home.svg"
+            iconPath={require("../../../../res/img/icons-home.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/ImageView.js

@@ -176,7 +176,7 @@ module.exports = React.createClass({
                     <img src={this.props.src} style={style} />
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">

src/components/views/elements/InlineSpinner.js

@@ -26,7 +26,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_InlineSpinner">
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/ManageIntegsButton.js

@@ -80,7 +80,11 @@ export default class ManageIntegsButton extends React.Component {
             });
 
             if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
-                integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
+                integrationsWarningTriangle = <img
+                    src={require("../../../../res/img/warning.svg")}
+                    title={_t('Integrations Error')}
+                    width="17"
+                />;
                 // Popup shown when hovering over integrationsButton_error (via CSS)
                 integrationsErrorPopup = (
                     <span className="mx_RoomSettings_integrationsButton_errorPopup">
@@ -91,7 +95,7 @@ export default class ManageIntegsButton extends React.Component {
 
             integrationsButton = (
                 <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
-                    <TintableSvg src="img/feather-icons/grid.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
                     { integrationsWarningTriangle }
                     { integrationsErrorPopup }
                 </AccessibleButton>

src/components/views/elements/MessageSpinner.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_Spinner">
                 <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/RoomDirectoryButton.js

@@ -25,7 +25,7 @@ const RoomDirectoryButton = function(props) {
         <ActionButton action="view_room_directory"
             mouseOverAction={props.callout ? "callout_room_directory" : null}
             label={_t("Room directory")}
-            iconPath="img/icons-directory.svg"
+            iconPath={require("../../../../res/img/icons-directory.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/SettingsButton.js

@@ -24,7 +24,7 @@ const SettingsButton = function(props) {
     return (
         <ActionButton action="view_user_settings"
             label={_t("Settings")}
-            iconPath="img/icons-settings.svg"
+            iconPath={require("../../../../res/img/icons-settings.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/Spinner.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
         const imgClass = this.props.imgClassName || "";
         return (
             <div className="mx_Spinner">
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/StartChatButton.js

@@ -25,7 +25,7 @@ const StartChatButton = function(props) {
         <ActionButton action="view_create_chat"
             mouseOverAction={props.callout ? "callout_start_chat" : null}
             label={_t("Start chat")}
-            iconPath="img/icons-people.svg"
+            iconPath={require("../../../../res/img/icons-people.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/globals/CookieBar.js

@@ -51,7 +51,7 @@ export default class CookieBar extends React.Component {
         const toolbarClasses = "mx_MatrixToolbar";
         return (
             <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
                 <div className="mx_MatrixToolbar_content">
                     { this.props.policyUrl ? _t(
                         "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
@@ -95,7 +95,7 @@ export default class CookieBar extends React.Component {
                     { _t("Yes, I want to help!") }
                 </AccessibleButton>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
+                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );

src/components/views/globals/MatrixToolbar.js

@@ -35,11 +35,11 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                    { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
                 </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} /></AccessibleButton>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
             </div>
         );
     },

src/components/views/globals/NewVersionBar.js

@@ -96,7 +96,7 @@ export default React.createClass({
         }
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                     {_t("A new version of Riot is available.")}
                 </div>

src/components/views/globals/PasswordNagBar.js

@@ -31,7 +31,7 @@ export default React.createClass({
         return (
             <div className={toolbarClasses} onClick={this.onUpdateClicked}>
                 <img className="mx_MatrixToolbar_warning"
-                    src="img/warning.svg"
+                    src={require("../../../../res/img/warning.svg")}
                     width="24"
                     height="23"
                     alt=""

src/components/views/globals/UpdateCheckBar.js

@@ -71,9 +71,9 @@ export default React.createClass({
 
         let image;
         if (doneStatuses.includes(this.props.status)) {
-            image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />;
+            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
         } else {
-            image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt="" />;
+            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
         }
 
         return (
@@ -83,7 +83,7 @@ export default React.createClass({
                     {message}
                 </div>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
-                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
+                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );

src/components/views/groups/GroupMemberInfo.js

@@ -188,7 +188,7 @@ module.exports = React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         { avatar }

src/components/views/groups/GroupMemberList.js

@@ -87,7 +87,7 @@ export default React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullMemberList} />
         );
@@ -214,7 +214,7 @@ export default React.createClass({
                 onClick={this.onInviteToGroupButtonClick}
             >
                 <div className="mx_RightPanel_icon" >
-                    <TintableSvg src="img/icon-invite-people.svg" width="18" height="14" />
+                    <TintableSvg src={require("../../../../res/img/icon-invite-people.svg")} width="18" height="14" />
                 </div>
                 <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
             </AccessibleButton>);

src/components/views/groups/GroupRoomInfo.js

@@ -215,7 +215,7 @@ module.exports = React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         { avatar }

src/components/views/groups/GroupRoomList.js

@@ -77,7 +77,7 @@ export default React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullRoomList} />
         );
@@ -137,7 +137,7 @@ export default React.createClass({
                     onClick={this.onAddRoomToGroupButtonClick}
                 >
                     <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icons-room-add.svg" width="18" height="14" />
+                        <TintableSvg src={require("../../../../res/img/icons-room-add.svg")} width="18" height="14" />
                     </div>
                     <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
                 </AccessibleButton>

src/components/views/login/CountryDropdown.js

@@ -70,7 +70,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={`img/flags/${iso2}.png`} />;
+        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
     }
 
     _getShortOption(iso2) {

src/components/views/messages/MAudioBody.js

@@ -81,7 +81,7 @@ export default class MAudioBody extends React.Component {
         if (this.state.error !== null) {
             return (
                 <span className="mx_MAudioBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error decrypting audio") }
                 </span>
             );
@@ -94,7 +94,7 @@ export default class MAudioBody extends React.Component {
             // Not sure how tall the audio player is so not sure how tall it should actually be.
             return (
                 <span className="mx_MAudioBody">
-                    <img src="img/spinner.gif" alt={content.body} width="16" height="16" />
+                    <img src={require("../../../../res/img/spinner.gif")} alt={content.body} width="16" height="16" />
                 </span>
             );
         }

src/components/views/messages/MFileBody.js

@@ -29,15 +29,15 @@ import request from 'browser-request';
 import Modal from '../../../Modal';
 
 
-// A cached tinted copy of "img/download.svg"
+// A cached tinted copy of require("../../../../res/img/download.svg")
 let tintedDownloadImageURL;
 // Track a list of mounted MFileBody instances so that we can update
-// the "img/download.svg" when the tint changes.
+// the require("../../../../res/img/download.svg") when the tint changes.
 let nextMountId = 0;
 const mounts = {};
 
 /**
- * Updates the tinted copy of "img/download.svg" when the tint changes.
+ * Updates the tinted copy of require("../../../../res/img/download.svg") when the tint changes.
  */
 function updateTintedDownloadImage() {
     // Download the svg as an XML document.
@@ -46,7 +46,7 @@ function updateTintedDownloadImage() {
     // Also note that we can't use fetch here because fetch doesn't support
     // file URLs, which the download image will be if we're running from
     // the filesystem (like in an Electron wrapper).
-    request({uri: "img/download.svg"}, (err, response, body) => {
+    request({uri: require("../../../../res/img/download.svg")}, (err, response, body) => {
         if (err) return;
 
         const svg = new DOMParser().parseFromString(body, "image/svg+xml");
@@ -254,7 +254,7 @@ module.exports = React.createClass({
     },
 
     tint: function() {
-        // Update our tinted copy of "img/download.svg"
+        // Update our tinted copy of require("../../../../res/img/download.svg")
         if (this.refs.downloadImage) {
             this.refs.downloadImage.src = tintedDownloadImageURL;
         }

src/components/views/messages/MImageBody.js

@@ -282,7 +282,12 @@ export default class MImageBody extends React.Component {
 
         // e2e image hasn't been decrypted yet
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            placeholder = <img src="img/spinner.gif" alt={content.body} width="32" height="32" />;
+            placeholder = <img
+                src={require("../../../../res/img/spinner.gif")}
+                alt={content.body}
+                width="32"
+                height="32"
+            />;
         } else if (!this.state.imgLoaded) {
             // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
             placeholder = this.getPlaceholder();
@@ -363,7 +368,7 @@ export default class MImageBody extends React.Component {
         if (this.state.error !== null) {
             return (
                 <span className="mx_MImageBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error decrypting image") }
                 </span>
             );

src/components/views/messages/MStickerBody.js

@@ -35,7 +35,7 @@ export default class MStickerBody extends MImageBody {
     // img onLoad hasn't fired yet.
     getPlaceholder() {
         const TintableSVG = sdk.getComponent('elements.TintableSvg');
-        return <TintableSVG src="img/icons-show-stickers.svg" width="75" height="75" />;
+        return <TintableSVG src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over

src/components/views/messages/MVideoBody.js

@@ -135,7 +135,7 @@ module.exports = React.createClass({
         if (this.state.error !== null) {
             return (
                 <span className="mx_MVideoBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16" />
+                    <img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
                     { _t("Error decrypting video") }
                 </span>
             );
@@ -148,7 +148,7 @@ module.exports = React.createClass({
             return (
                 <span className="mx_MVideoBody" ref="body">
                     <div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner" ref="image">
-                        <img src="img/spinner.gif" alt={content.body} width="16" height="16" />
+                        <img src={require("../../../../res/img/spinner.gif")} alt={content.body} width="16" height="16" />
                     </div>
                 </span>
             );

src/components/views/messages/RoomCreate.js

@@ -48,7 +48,7 @@ module.exports = React.createClass({
             return <div />; // We should never have been instaniated in this case
         }
         return <div className="mx_CreateEvent">
-            <img className="mx_CreateEvent_image" src="img/room-continuation.svg" />
+            <img className="mx_CreateEvent_image" src={require("../../../../res/img/room-continuation.svg")} />
             <div className="mx_CreateEvent_header">
                 {_t("This room is a continuation of another conversation.")}
             </div>

src/components/views/right_panel/GroupHeaderButtons.js

@@ -65,12 +65,12 @@ export default class GroupHeaderButtons extends HeaderButtons {
         ];
 
         return [
-            <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+            <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
                 isHighlighted={this.isPhase(groupPhases)}
                 clickPhase={RightPanel.Phase.GroupMemberList}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
-            <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc="img/icons-room-nobg.svg"
+            <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
                 isHighlighted={this.isPhase(roomPhases)}
                 clickPhase={RightPanel.Phase.GroupRoomList}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}

src/components/views/right_panel/RoomHeaderButtons.js

@@ -52,17 +52,17 @@ export default class RoomHeaderButtons extends HeaderButtons {
         ];
 
         return [
-            <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/feather-icons/user.svg"
+            <HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
                 isHighlighted={this.isPhase(membersPhases)}
                 clickPhase={RightPanel.Phase.RoomMemberList}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
-            <HeaderButton key="_filesButton" title={_t('Files')} iconSrc="img/feather-icons/files.svg"
+            <HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
                 isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
                 clickPhase={RightPanel.Phase.FilePanel}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
-            <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc="img/feather-icons/notifications.svg"
+            <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
                 isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
                 clickPhase={RightPanel.Phase.NotificationPanel}
                 analytics={['Right Panel', 'Notification List Button', 'click']}

src/components/views/room_settings/ColorSettings.js

@@ -131,7 +131,7 @@ module.exports = React.createClass({
                     if (i === this.state.index) {
                         selected = (
                             <div className="mx_RoomSettings_roomColor_selected">
-                                <img src="img/tick.svg" width="17" height="14" alt="./" />
+                                <img src={require("../../../../res/img/tick.svg")} width="17" height="14" alt="./" />
                             </div>
                         );
                     }

src/components/views/rooms/AuxPanel.js

@@ -147,7 +147,7 @@ module.exports = React.createClass({
                 <div className="mx_RoomView_fileDropTarget">
                     <div className="mx_RoomView_fileDropTargetLabel"
                       title={_t("Drop File Here")}>
-                        <TintableSvg src="img/upload-big.svg" width="45" height="59" />
+                        <TintableSvg src={require("../../../../res/img/upload-big.svg")} width="45" height="59" />
                         <br />
                         { _t("Drop file here to upload") }
                     </div>

src/components/views/rooms/EntityTile.js

@@ -160,7 +160,7 @@ const EntityTile = React.createClass({
         if (this.props.showInviteButton) {
             inviteButton = (
                 <div className="mx_EntityTile_invite">
-                    <img src="img/plus.svg" width="16" height="16" />
+                    <img src={require("../../../../res/img/plus.svg")} width="16" height="16" />
                 </div>
             );
         }
@@ -169,8 +169,8 @@ const EntityTile = React.createClass({
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
             const src = {
-                [EntityTile.POWER_STATUS_MODERATOR]: "img/mod.svg",
+                [EntityTile.POWER_STATUS_MODERATOR]: require("../../../../res/img/mod.svg"),
-                [EntityTile.POWER_STATUS_ADMIN]: "img/admin.svg",
+                [EntityTile.POWER_STATUS_ADMIN]: require("../../../../res/img/admin.svg"),
             }[powerStatus];
             const alt = {
                 [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),

src/components/views/rooms/EventTile.js

@@ -768,23 +768,31 @@ module.exports.haveTileForEvent = function(e) {
 function E2ePadlockUndecryptable(props) {
     return (
         <E2ePadlock alt={_t("Undecryptable")}
-            src="img/e2e-blocked.svg" width="12" height="12"
+            src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12"
             style={{ marginLeft: "-1px" }} {...props} />
     );
 }
 
 function E2ePadlockEncrypting(props) {
-    return <E2ePadlock alt={_t("Encrypting")} src="img/e2e-encrypting.svg" width="10" height="12" {...props} />;
+    return (
+        <E2ePadlock alt={_t("Encrypting")}
+            src={require("../../../../res/img/e2e-encrypting.svg")} width="10" height="12"
+            {...props} />
+    );
 }
 
 function E2ePadlockNotSent(props) {
-    return <E2ePadlock alt={_t("Encrypted, not sent")} src="img/e2e-not_sent.svg" width="10" height="12" {...props} />;
+    return (
+        <E2ePadlock alt={_t("Encrypted, not sent")}
+            src={require("../../../../res/img/e2e-not_sent.svg")} width="10" height="12"
+            {...props} />
+    );
 }
 
 function E2ePadlockVerified(props) {
     return (
         <E2ePadlock alt={_t("Encrypted by a verified device")}
-            src="img/e2e-verified.svg" width="10" height="12"
+            src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12"
             {...props} />
     );
 }
@@ -792,7 +800,7 @@ function E2ePadlockVerified(props) {
 function E2ePadlockUnverified(props) {
     return (
         <E2ePadlock alt={_t("Encrypted by an unverified device")}
-            src="img/e2e-warning.svg" width="15" height="12"
+            src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12"
             style={{ marginLeft: "-2px" }} {...props} />
     );
 }
@@ -800,7 +808,7 @@ function E2ePadlockUnverified(props) {
 function E2ePadlockUnencrypted(props) {
     return (
         <E2ePadlock alt={_t("Unencrypted message")}
-            src="img/e2e-unencrypted.svg" width="12" height="12"
+            src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12"
             {...props} />
     );
 }

src/components/views/rooms/LinkPreviewWidget.js

@@ -135,7 +135,7 @@ module.exports = React.createClass({
                     </div>
                 </div>
                 <img className="mx_LinkPreviewWidget_cancel mx_filterFlipColor"
-                    src="img/cancel.svg" width="18" height="18"
+                    src={require("../../../../res/img/cancel.svg")} width="18" height="18"
                     onClick={this.props.onCancelClick} />
             </div>
         );

src/components/views/rooms/MemberDeviceInfo.js

@@ -27,19 +27,19 @@ export default class MemberDeviceInfo extends React.Component {
         if (this.props.device.isBlocked()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_blacklisted">
-                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")} />
+                    <img src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")} />
                     </div>
             );
         } else if (this.props.device.isVerified()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_verified">
-                    <img src="img/e2e-verified.svg" width="10" height="12" alt={_t("Verified")} />
+                    <img src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12" alt={_t("Verified")} />
                     </div>
             );
         } else {
             indicator = (
                     <div className="mx_MemberDeviceInfo_unverified">
-                    <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")} />
+                    <img src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")} />
                     </div>
             );
         }

src/components/views/rooms/MemberInfo.js

@@ -815,7 +815,7 @@ module.exports = withMatrixClient(React.createClass({
                 onClick={this.onNewDMClick}
             >
                 <div className="mx_RoomTile_avatar">
-                    <img src="img/create-big.svg" width="26" height="26" />
+                    <img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>{ _t("Start a chat") }</i></div>
             </AccessibleButton>;
@@ -963,7 +963,7 @@ module.exports = withMatrixClient(React.createClass({
             <div className="mx_MemberInfo">
                     <div className="mx_MemberInfo_name">
                         <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
-                            <img src="img/minimise.svg" width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
+                            <img src={require("../../../../res/img/minimise.svg")} width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
                         </AccessibleButton>
                         <EmojiText element="h2">{ memberName }</EmojiText>
                     </div>

src/components/views/rooms/MemberList.js

@@ -253,7 +253,7 @@ module.exports = React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={onClick} />
         );

src/components/views/rooms/MessageComposer.js

@@ -155,12 +155,12 @@ export default class MessageComposer extends React.Component {
             const fileAcceptedOrError = this.props.uploadAllowed(files[i]);
             if (fileAcceptedOrError === true) {
                 acceptedFiles.push(<li key={i}>
-                    <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> { files[i].name || _t('Attachment') }
+                    <TintableSvg key={i} src={require("../../../../res/img/files.svg")} width="16" height="16" /> { files[i].name || _t('Attachment') }
                 </li>);
                 fileList.push(files[i]);
             } else {
                 failedFiles.push(<li key={i}>
-                    <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> { files[i].name || _t('Attachment') } <p>{ _t('Reason') + ": " + fileAcceptedOrError}</p>
+                    <TintableSvg key={i} src={require("../../../../res/img/files.svg")} width="16" height="16" /> { files[i].name || _t('Attachment') } <p>{ _t('Reason') + ": " + fileAcceptedOrError}</p>
                 </li>);
             }
         }
@@ -320,11 +320,11 @@ export default class MessageComposer extends React.Component {
         const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
         if (roomIsEncrypted) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
-            e2eImg = 'img/e2e-verified.svg';
+            e2eImg = require("../../../../res/img/e2e-verified.svg");
             e2eTitle = _t('Encrypted room');
             e2eClass = 'mx_MessageComposer_e2eIcon';
         } else {
-            e2eImg = 'img/e2e-unencrypted.svg';
+            e2eImg = require("../../../../res/img/e2e-unencrypted.svg");
             e2eTitle = _t('Unencrypted room');
             e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
         }
@@ -344,16 +344,16 @@ export default class MessageComposer extends React.Component {
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
                 <AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
-                    <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
+                    <img src={require("../../../../res/img/hangup.svg")} alt={_t('Hangup')} title={_t('Hangup')} width="25" height="25" />
                 </AccessibleButton>;
         } else {
             callButton =
                 <AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
-                    <TintableSvg src="img/feather-icons/phone.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/phone.svg")} width="20" height="20" />
                 </AccessibleButton>;
             videoCallButton =
                 <AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
-                    <TintableSvg src="img/feather-icons/video.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/video.svg")} width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -395,7 +395,7 @@ export default class MessageComposer extends React.Component {
             const uploadButton = (
                 <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
                         onClick={this.onUploadClick} title={_t('Upload file')}>
-                    <TintableSvg src="img/feather-icons/paperclip.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/paperclip.svg")} width="20" height="20" />
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple
@@ -407,7 +407,7 @@ export default class MessageComposer extends React.Component {
                 <AccessibleButton element="img" className="mx_MessageComposer_formatting"
                      alt={_t("Show Text Formatting Toolbar")}
                      title={_t("Show Text Formatting Toolbar")}
-                     src="img/button-text-formatting.svg"
+                     src={require("../../../../res/img/button-text-formatting.svg")}
                      onClick={this.onToggleFormattingClicked}
                      style={{visibility: this.state.showFormatting ? 'hidden' : 'visible'}}
                      key="controls_formatting" />
@@ -451,7 +451,7 @@ export default class MessageComposer extends React.Component {
 
             controls.push(<div className="mx_MessageComposer_replaced_wrapper">
                 <div className="mx_MessageComposer_replaced_valign">
-                    <img className="mx_MessageComposer_roomReplaced_icon" src="img/room_replaced.svg" />
+                    <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
                     <span className="mx_MessageComposer_roomReplaced_header">
                         {_t("This room has been replaced and is no longer active.")}
                     </span><br />
@@ -487,7 +487,7 @@ export default class MessageComposer extends React.Component {
                             title={_t(name)}
                             onMouseDown={onFormatButtonClicked}
                             key={name}
-                            src={`img/button-text-${name}${suffix}.svg`}
+                            src={require(`../../../../res/img/button-text-${name}${suffix}.svg`)}
                             height="17" />;
                 },
             );
@@ -500,11 +500,11 @@ export default class MessageComposer extends React.Component {
                         <img title={this.state.inputState.isRichTextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off")}
                              onMouseDown={this.onToggleMarkdownClicked}
                             className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
-                            src={`img/button-md-${!this.state.inputState.isRichTextEnabled}.png`} />
+                            src={require(`../../../../res/img/button-md-${!this.state.inputState.isRichTextEnabled}.png`)} />
                         <AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
                              onClick={this.onToggleFormattingClicked}
                              className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
-                             src="img/icon-text-cancel.svg" />
+                             src={require("../../../../res/img/icon-text-cancel.svg")} />
                     </div>
                 </div>;
         }

src/components/views/rooms/MessageComposerInput.js

@@ -1599,7 +1599,7 @@ export default class MessageComposerInput extends React.Component {
                     <img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
                          onMouseDown={this.onMarkdownToggleClicked}
                          title={this.state.isRichTextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
-                         src={`img/button-md-${!this.state.isRichTextEnabled}.png`} />
+                         src={require(`../../../../res/img/button-md-${!this.state.isRichTextEnabled}.png`)} />
                     <Editor ref={this._collectEditor}
                             dir="auto"
                             className="mx_MessageComposer_editor"

src/components/views/rooms/PinnedEventTile.js

@@ -67,7 +67,7 @@ module.exports = React.createClass({
         if (this._canUnpin()) {
             unpinButton = (
                 <AccessibleButton onClick={this.onUnpinClicked} className="mx_PinnedEventTile_unpinButton">
-                    <img src="img/cancel-red.svg" width="8" height="8" alt={_t('Unpin Message')} title={_t('Unpin Message')} />
+                    <img src={require("../../../../res/img/cancel-red.svg")} width="8" height="8" alt={_t('Unpin Message')} title={_t('Unpin Message')} />
                 </AccessibleButton>
             );
         }

src/components/views/rooms/PinnedEventsPanel.js

@@ -130,7 +130,7 @@ module.exports = React.createClass({
             <div className="mx_PinnedEventsPanel">
                 <div className="mx_PinnedEventsPanel_body">
                     <AccessibleButton className="mx_PinnedEventsPanel_cancel" onClick={this.props.onCancelClick}>
-                        <img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18" />
+                        <img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
                     </AccessibleButton>
                     <h3 className="mx_PinnedEventsPanel_header">{ _t("Pinned Messages") }</h3>
                     { tiles }

src/components/views/rooms/ReplyPreview.js

@@ -68,7 +68,7 @@ export default class ReplyPreview extends React.Component {
                     { '💬 ' + _t('Replying') }
                 </EmojiText>
                 <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
-                    <img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
+                    <img className="mx_filterFlipColor" src={require("../../../../res/img/cancel.svg")} width="18" height="18"
                          onClick={cancelQuoting} />
                 </div>
                 <div className="mx_ReplyPreview_clear" />

src/components/views/rooms/RoomHeader.js

@@ -312,14 +312,14 @@ module.exports = React.createClass({
                     </div>
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
-                            <img src="img/camera.svg"
+                            <img src={require("../../../../res/img/camera.svg")}
                                  alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                  width="17" height="15" />
                         </label>
                         <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
                     </div>
                     <div className="mx_RoomHeader_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                        <img src="img/cancel.svg"
+                        <img src={require("../../../../res/img/cancel.svg")}
                             className="mx_filterFlipColor"
                             width="10"
                             alt={_t("Remove avatar")}
@@ -337,7 +337,7 @@ module.exports = React.createClass({
         if (this.props.onSettingsClick) {
             settingsButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
-                    <TintableSvg src="img/feather-icons/settings.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/settings.svg")} width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -353,7 +353,7 @@ module.exports = React.createClass({
                 <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_pinnedButton"
                                   onClick={this.props.onPinnedClick} title={_t("Pinned Messages")}>
                     { pinsIndicator }
-                    <TintableSvg src="img/icons-pin.svg" width="16" height="16" />
+                    <TintableSvg src={require("../../../../res/img/icons-pin.svg")} width="16" height="16" />
                 </AccessibleButton>;
         }
 
@@ -361,7 +361,7 @@ module.exports = React.createClass({
 //        if (this.props.onLeaveClick) {
 //            leave_button =
 //                <div className="mx_RoomHeader_button" onClick={this.props.onLeaveClick} title="Leave room">
-//                    <TintableSvg src="img/leave.svg" width="26" height="20"/>
+//                    <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20"/>
 //                </div>;
 //        }
 
@@ -369,7 +369,7 @@ module.exports = React.createClass({
         if (this.props.onForgetClick) {
             forgetButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
-                    <TintableSvg src="img/leave.svg" width="26" height="20" />
+                    <TintableSvg src={require("../../../../res/img/leave.svg")} width="26" height="20" />
                 </AccessibleButton>;
         }
 
@@ -377,7 +377,7 @@ module.exports = React.createClass({
         if (this.props.onSearchClick && this.props.inRoom) {
             searchButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
-                    <TintableSvg src="img/feather-icons/search.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/search.svg")} width="20" height="20" />
                 </AccessibleButton>;
         }
 
@@ -385,7 +385,7 @@ module.exports = React.createClass({
         if (this.props.inRoom) {
             shareRoomButton =
                 <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
-                    <TintableSvg src="img/feather-icons/share.svg" width="20" height="20" />
+                    <TintableSvg src={require("../../../../res/img/feather-icons/share.svg")} width="20" height="20" />
                 </AccessibleButton>;
         }
 

src/components/views/rooms/RoomPreviewBar.js

@@ -124,7 +124,7 @@ module.exports = React.createClass({
                     emailMatchBlock =
                         <div className="mx_RoomPreviewBar_warning">
                             <div className="mx_RoomPreviewBar_warningIcon">
-                                <img src="img/warning.svg" width="24" height="23" title= "/!\\" alt="/!\\" />
+                                <img src={require("../../../../res/img/warning.svg")} width="24" height="23" title= "/!\\" alt="/!\\" />
                             </div>
                             <div className="mx_RoomPreviewBar_warningText">
                                 { _t("This invitation was sent to an email address which is not associated with this account:") }

src/components/views/rooms/RoomSettings.js

@@ -616,7 +616,7 @@ module.exports = React.createClass({
                 <div>
                     <label>
                         <input type="checkbox" ref="encrypt" onClick={this.onEnableEncryptionClick} />
-                        <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
+                        <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12" />
                         { _t('Enable encryption') } { _t('(warning: cannot be disabled again!)') }
                     </label>
                     { settings }
@@ -627,8 +627,8 @@ module.exports = React.createClass({
                 <div>
                     <label>
                     { isEncrypted
-                      ? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
+                      ? <img className="mx_RoomSettings_e2eIcon" src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12" />
-                      : <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src="img/e2e-unencrypted.svg" width="12" height="12" />
+                      : <img className="mx_RoomSettings_e2eIcon mx_filterFlipColor" src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12" />
                     }
                     { isEncrypted ? _t("Encryption is enabled in this room") : _t("Encryption is not enabled in this room") }.
                     </label>

src/components/views/rooms/RoomTile.js

@@ -392,7 +392,13 @@ module.exports = React.createClass({
 
         let dmIndicator;
         if (this._isDirectMessageRoom(this.props.room.roomId)) {
-            dmIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
+            dmIndicator = <img
+                src={require("../../../../res/img/icon_person.svg")}
+                className="mx_RoomTile_dm"
+                width="11"
+                height="13"
+                alt="dm"
+            />;
         }
 
         return <AccessibleButton tabIndex="0"

src/components/views/rooms/SearchableEntityList.js

@@ -120,7 +120,7 @@ const SearchableEntityList = React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showAll} />
         );