diff --git a/packages/common/components/MediaViewer/MediaViewer.js b/packages/common/components/MediaViewer/MediaViewer.js
index ca50e41d39..59778c3222 100644
--- a/packages/common/components/MediaViewer/MediaViewer.js
+++ b/packages/common/components/MediaViewer/MediaViewer.js
@@ -7,6 +7,15 @@ import Hammer from "hammerjs";
import { isMobileOnly } from "react-device-detect";
import { FileStatus } from "@docspace/common/constants";
+import InfoOutlineReactSvgUrl from "../../../../public/images/info.outline.react.svg?url";
+import CopyReactSvgUrl from "../../../../public/images/copy.react.svg?url";
+import DuplicateReactSvgUrl from "../../../../public/images/duplicate.react.svg?url";
+import DownloadReactSvgUrl from "../../../../public/images/download.react.svg?url";
+import DownloadAsReactSvgUrl from "../../../../public/images/download-as.react.svg?url";
+import RenameReactSvgUrl from "../../../../public/images/rename.react.svg?url";
+import TrashReactSvgUrl from "../../../../public/images/trash.react.svg?url";
+import MoveReactSvgUrl from "../../../../public/images/duplicate.react.svg?url";
+
const mediaTypes = Object.freeze({
audio: 1,
video: 2,
@@ -507,21 +516,21 @@ class MediaViewer extends React.Component {
{
key: "download",
label: t("Common:Download"),
- icon: "images/download.react.svg",
+ icon: { DownloadReactSvgUrl },
onClick: () => onClickDownload(targetFile, t),
disabled: false,
},
{
key: "rename",
label: t("Rename"),
- icon: "images/rename.react.svg",
+ icon: { RenameReactSvgUrl },
onClick: () => onClickRename(targetFile),
disabled: false,
},
{
key: "delete",
label: t("Common:Delete"),
- icon: "images/trash.react.svg",
+ icon: { TrashReactSvgUrl },
onClick: () => onClickDelete(targetFile, t),
disabled: false,
},
@@ -532,7 +541,7 @@ class MediaViewer extends React.Component {
id: "option_room-info",
key: "room-info",
label: t("Common:Info"),
- icon: "/static/images/info.outline.react.svg",
+ icon: { InfoOutlineReactSvgUrl },
onClick: () => {
return onShowInfoPanel(targetFile);
},
@@ -541,21 +550,21 @@ class MediaViewer extends React.Component {
{
key: "download",
label: t("Common:Download"),
- icon: "images/download.react.svg",
+ icon: { DownloadReactSvgUrl },
onClick: () => onClickDownload(targetFile, t),
disabled: false,
},
{
key: "move-to",
label: t("MoveTo"),
- icon: "images/move.react.svg",
+ icon: { MoveReactSvgUrl },
onClick: onMoveAction,
disabled: isPreviewFile,
},
// {
// key: "download-as",
// label: t("Translations:DownloadAs"),
- // icon: "images/download-as.react.svg", // TODO: uncomment when we can download media by changing the format
+ // icon: {DownloadAsReactSvgUrl}, // TODO: uncomment when we can download media by changing the format
// onClick: onClickDownloadAs,
// disabled: false,
// },
@@ -563,7 +572,7 @@ class MediaViewer extends React.Component {
id: "option_copy-to",
key: "copy-to",
label: t("Translations:Copy"),
- icon: "/static/images/copy.react.svg",
+ icon: { CopyReactSvgUrl },
onClick: onCopyAction,
disabled: isPreviewFile,
},
@@ -571,14 +580,14 @@ class MediaViewer extends React.Component {
id: "option_create-copy",
key: "copy",
label: t("Common:Duplicate"),
- icon: "/static/images/duplicate.react.svg",
+ icon: { DuplicateReactSvgUrl },
onClick: () => onDuplicate(targetFile, t),
disabled: isPreviewFile,
},
{
key: "rename",
label: t("Rename"),
- icon: "images/rename.react.svg",
+ icon: { RenameReactSvgUrl },
onClick: () => onClickRename(targetFile),
disabled: isPreviewFile,
},
@@ -591,7 +600,7 @@ class MediaViewer extends React.Component {
{
key: "delete",
label: t("Common:Delete"),
- icon: "images/trash.react.svg",
+ icon: { TrashReactSvgUrl },
onClick: () => onClickDelete(targetFile, t),
disabled: isPreviewFile,
},
diff --git a/packages/common/components/Section/section.stories.js b/packages/common/components/Section/section.stories.js
index 2fd27f75bc..87978b3607 100644
--- a/packages/common/components/Section/section.stories.js
+++ b/packages/common/components/Section/section.stories.js
@@ -17,6 +17,8 @@ import withReadme from "storybook-readme/with-readme";
import { boolean, withKnobs } from "@storybook/addon-knobs/react";
import Readme from "./README.md";
import { Router } from "react-router-dom";
+import ActionsHeaderTouchReactSvgUrl from "../../../../public/images/actions.header.touch.react.svg?url";
+
const { authStore } = store;
const HeaderContent = styled.div`
@@ -63,7 +65,7 @@ const sectionHeaderContent = (
/>
Section Header
action("PlusIcon Clicked")(e)}
/>
diff --git a/packages/components/empty-screen-container/empty-screen-container.stories.js b/packages/components/empty-screen-container/empty-screen-container.stories.js
index 912499e055..398c83847d 100644
--- a/packages/components/empty-screen-container/empty-screen-container.stories.js
+++ b/packages/components/empty-screen-container/empty-screen-container.stories.js
@@ -2,6 +2,7 @@ import React from "react";
import EmptyScreenContainer from "./";
import Link from "../link";
import CrossReactSvgUrl from "../../../public/images/cross.react.svg";
+import EmptyScreenFilterPng from "../../../public/images/empty_screen_filter.png";
export default {
title: "Components/EmptyScreenContainer",
@@ -37,7 +38,7 @@ const Template = (args) => {
export const Default = Template.bind({});
Default.args = {
- imageSrc: "/static/images/empty_screen_filter.png",
+ imageSrc: { EmptyScreenFilterPng },
imageAlt: "Empty Screen Filter image",
headerText: "No results matching your search could be found",
subheadingText: "No files to be displayed in this section",
diff --git a/packages/components/selector/README.md b/packages/components/selector/README.md
index 0a09f889bb..19ff5c515d 100644
--- a/packages/components/selector/README.md
+++ b/packages/components/selector/README.md
@@ -13,7 +13,7 @@ import Selector from "@docspace/components/selector";
cancelButtonLabel="Cancel"
emptyScreenDescription="The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time."
emptyScreenHeader="No other accounts here yet"
- emptyScreenImage="static/images/empty_screen_filter.png"
+ emptyScreenImage={EmptyScreenFilterPng}
hasNextPage={false}
headerLabel="Room list"
items={[]}
@@ -30,11 +30,11 @@ import Selector from "@docspace/components/selector";
rowLoader={<>>}
searchEmptyScreenDescription=" SEARCH !!! The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time."
searchEmptyScreenHeader="No other accounts here yet search"
- searchEmptyScreenImage="static/images/empty_screen_filter.png"
+ searchEmptyScreenImage={EmptyScreenFilterPng}
searchLoader={<>>}
searchPlaceholder="Search"
searchValue=""
- selectAllIcon="static/images/room.archive.svg"
+ selectAllIcon={RoomArchiveSvgUrl}
selectAllLabel="All accounts"
selectedAccessRight={{}}
selectedItems={[]}
diff --git a/packages/components/viewer/index.js b/packages/components/viewer/index.js
index b86444313b..59b4afe6ca 100644
--- a/packages/components/viewer/index.js
+++ b/packages/components/viewer/index.js
@@ -13,6 +13,7 @@ import IconButton from "@docspace/components/icon-button";
import { isMobileOnly } from "react-device-detect";
+import ViewerMediaCloseSvgUrl from "../../../public/images/viewer.media.close.svg?url";
import MediaNextIcon from "../../../public/images/viewer.next.react.svg";
import MediaPrevIcon from "../../../public/images/viewer.prew.react.svg";
import ViewerPlayer from "./sub-components/viewer-player";
@@ -215,7 +216,7 @@ export const Viewer = (props) => {
>