From 2730cea181cd27ae9b5353a736af57b1dc75c472 Mon Sep 17 00:00:00 2001 From: Robin Date: Wed, 27 Sep 2023 19:06:10 -0400 Subject: [PATCH] Fix imports --- package.json | 2 +- src/E2EEBanner.tsx | 2 +- src/Header.tsx | 2 +- src/Modal.tsx | 2 +- src/UserMenu.tsx | 8 ++++---- src/auth/LoginPage.tsx | 2 +- src/auth/RegisterPage.tsx | 2 +- src/button/Button.tsx | 20 ++++++++++---------- src/button/CopyButton.tsx | 4 ++-- src/button/ShareButton.tsx | 2 +- src/button/VolumeIcon.tsx | 6 +++--- src/input/AvatarInputField.tsx | 2 +- src/input/Input.tsx | 2 +- src/input/SelectInput.tsx | 2 +- src/input/StarRatingInput.tsx | 4 ++-- src/room/AppSelectionModal.tsx | 2 +- src/room/EncryptionLock.tsx | 4 ++-- src/room/InCallView.tsx | 4 ++-- src/room/LayoutToggle.tsx | 4 ++-- src/settings/SettingsModal.tsx | 12 ++++++------ src/tabs/Tabs.stories.tsx | 6 +++--- src/video-grid/VideoTile.tsx | 4 ++-- test/mocks/svgr.ts | 4 ++-- 23 files changed, 51 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 84ef350a..d763f529 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ ], "moduleNameMapper": { "\\.css$": "identity-obj-proxy", - "\\.svg$": "/test/mocks/svgr.ts", + "\\.svg\\?react$": "/test/mocks/svgr.ts", "^\\./IndexedDBWorker\\?worker$": "/test/mocks/workerMock.ts", "^\\./olm$": "/test/mocks/olmMock.ts" }, diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx index 774f3582..c4223b2d 100644 --- a/src/E2EEBanner.tsx +++ b/src/E2EEBanner.tsx @@ -18,7 +18,7 @@ import { Trans } from "react-i18next"; import { Banner } from "./Banner"; import styles from "./E2EEBanner.module.css"; -import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg"; +import LockOffIcon from "./icons/LockOff.svg?react"; import { useEnableE2EE } from "./settings/useSetting"; export const E2EEBanner = () => { diff --git a/src/Header.tsx b/src/Header.tsx index aea3da71..7c2937cf 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -22,7 +22,7 @@ import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { Heading } from "@vector-im/compound-web"; import styles from "./Header.module.css"; -import { ReactComponent as Logo } from "./icons/Logo.svg"; +import Logo from "./icons/Logo.svg?react"; import { Avatar, Size } from "./Avatar"; import { Facepile } from "./Facepile"; import { EncryptionLock } from "./room/EncryptionLock"; diff --git a/src/Modal.tsx b/src/Modal.tsx index b644abe4..ac701402 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -27,7 +27,7 @@ import { } from "@radix-ui/react-dialog"; import { Drawer } from "vaul"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; -import { ReactComponent as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg"; +import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react"; import classNames from "classnames"; import { Heading } from "@vector-im/compound-web"; diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx index 515e71f0..42f31951 100644 --- a/src/UserMenu.tsx +++ b/src/UserMenu.tsx @@ -24,10 +24,10 @@ import { PopoverMenuTrigger } from "./popover/PopoverMenu"; import { Menu } from "./Menu"; import { TooltipTrigger } from "./Tooltip"; import { Avatar, Size } from "./Avatar"; -import { ReactComponent as UserIcon } from "./icons/User.svg"; -import { ReactComponent as SettingsIcon } from "./icons/Settings.svg"; -import { ReactComponent as LoginIcon } from "./icons/Login.svg"; -import { ReactComponent as LogoutIcon } from "./icons/Logout.svg"; +import UserIcon from "./icons/User.svg?react"; +import SettingsIcon from "./icons/Settings.svg?react"; +import LoginIcon from "./icons/Login.svg?react"; +import LogoutIcon from "./icons/Logout.svg?react"; import { Body } from "./typography/Typography"; import styles from "./UserMenu.module.css"; diff --git a/src/auth/LoginPage.tsx b/src/auth/LoginPage.tsx index f17f24fa..6569f262 100644 --- a/src/auth/LoginPage.tsx +++ b/src/auth/LoginPage.tsx @@ -18,7 +18,7 @@ import { FC, FormEvent, useCallback, useRef, useState } from "react"; import { useHistory, useLocation, Link } from "react-router-dom"; import { Trans, useTranslation } from "react-i18next"; -import { ReactComponent as Logo } from "../icons/LogoLarge.svg"; +import Logo from "../icons/LogoLarge.svg?react"; import { useClient } from "../ClientContext"; import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { Button } from "../button"; diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx index d0c22fc8..52c652f6 100644 --- a/src/auth/RegisterPage.tsx +++ b/src/auth/RegisterPage.tsx @@ -34,7 +34,7 @@ import { Button } from "../button"; import { useClientLegacy } from "../ClientContext"; import { useInteractiveRegistration } from "./useInteractiveRegistration"; import styles from "./LoginPage.module.css"; -import { ReactComponent as Logo } from "../icons/LogoLarge.svg"; +import Logo from "../icons/LogoLarge.svg?react"; import { LoadingView } from "../FullScreenView"; import { useRecaptcha } from "./useRecaptcha"; import { Caption, Link } from "../typography/Typography"; diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 3d269dc2..efb9f295 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -20,18 +20,18 @@ import { useButton } from "@react-aria/button"; import { mergeProps, useObjectRef } from "@react-aria/utils"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; -import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg"; -import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg"; -import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg"; -import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg"; -import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg"; -import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg"; -import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg"; -import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg"; +import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react"; +import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react"; +import VideoCallIcon from "@vector-im/compound-design-tokens/icons/video-call.svg?react"; +import VideoCallOffIcon from "@vector-im/compound-design-tokens/icons/video-call-off.svg?react"; +import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react"; +import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react"; +import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react"; +import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react"; import styles from "./Button.module.css"; -import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg"; -import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg"; +import Fullscreen from "../icons/Fullscreen.svg?react"; +import FullscreenExit from "../icons/FullscreenExit.svg?react"; import { VolumeIcon } from "./VolumeIcon"; export type ButtonVariant = diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx index 91c8e750..c2631c6e 100644 --- a/src/button/CopyButton.tsx +++ b/src/button/CopyButton.tsx @@ -17,8 +17,8 @@ limitations under the License. import { useTranslation } from "react-i18next"; import useClipboard from "react-use-clipboard"; -import { ReactComponent as CheckIcon } from "../icons/Check.svg"; -import { ReactComponent as CopyIcon } from "../icons/Copy.svg"; +import CheckIcon from "../icons/Check.svg?react"; +import CopyIcon from "../icons/Copy.svg?react"; import { Button, ButtonVariant } from "./Button"; interface Props { diff --git a/src/button/ShareButton.tsx b/src/button/ShareButton.tsx index 2f7f1334..02c0fc9c 100644 --- a/src/button/ShareButton.tsx +++ b/src/button/ShareButton.tsx @@ -17,7 +17,7 @@ limitations under the License. import { ComponentPropsWithoutRef, FC } from "react"; import { Button } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; -import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg"; +import UserAddSolidIcon from "@vector-im/compound-design-tokens/icons/user-add-solid.svg?react"; export const ShareButton: FC< Omit, "children"> diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx index 00aebb06..626dcece 100644 --- a/src/button/VolumeIcon.tsx +++ b/src/button/VolumeIcon.tsx @@ -17,9 +17,9 @@ limitations under the License. import { ComponentPropsWithoutRef, FC } from "react"; -import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg"; -import { ReactComponent as AudioLow } from "../icons/AudioLow.svg"; -import { ReactComponent as Audio } from "../icons/Audio.svg"; +import AudioMuted from "../icons/AudioMuted.svg?react"; +import AudioLow from "../icons/AudioLow.svg?react"; +import Audio from "../icons/Audio.svg?react"; interface Props extends ComponentPropsWithoutRef<"svg"> { /** diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx index 8a069718..b8897c4a 100644 --- a/src/input/AvatarInputField.tsx +++ b/src/input/AvatarInputField.tsx @@ -28,7 +28,7 @@ import { useTranslation } from "react-i18next"; import { Avatar, Size } from "../Avatar"; import { Button } from "../button"; -import { ReactComponent as EditIcon } from "../icons/Edit.svg"; +import EditIcon from "../icons/Edit.svg?react"; import styles from "./AvatarInputField.module.css"; interface Props extends AllHTMLAttributes { diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 387d02d0..b6826681 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -25,7 +25,7 @@ import { import classNames from "classnames"; import styles from "./Input.module.css"; -import { ReactComponent as CheckIcon } from "../icons/Check.svg"; +import CheckIcon from "../icons/Check.svg?react"; import { TranslatedError } from "../TranslatedError"; interface FieldRowProps { diff --git a/src/input/SelectInput.tsx b/src/input/SelectInput.tsx index ff6ea7c3..0feb346e 100644 --- a/src/input/SelectInput.tsx +++ b/src/input/SelectInput.tsx @@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next"; import { Popover } from "../popover/Popover"; import { ListBox } from "../ListBox"; import styles from "./SelectInput.module.css"; -import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; +import ArrowDownIcon from "../icons/ArrowDown.svg?react"; interface Props extends AriaSelectOptions { className?: string; diff --git a/src/input/StarRatingInput.tsx b/src/input/StarRatingInput.tsx index 3017a117..8667998e 100644 --- a/src/input/StarRatingInput.tsx +++ b/src/input/StarRatingInput.tsx @@ -17,8 +17,8 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; import styles from "./StarRatingInput.module.css"; -import { ReactComponent as StarSelected } from "../icons/StarSelected.svg"; -import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg"; +import StarSelected from "../icons/StarSelected.svg?react"; +import StarUnselected from "../icons/StarUnselected.svg?react"; interface Props { starCount: number; diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index a6216ee1..8220ffbc 100644 --- a/src/room/AppSelectionModal.tsx +++ b/src/room/AppSelectionModal.tsx @@ -17,7 +17,7 @@ limitations under the License. import { FC, MouseEvent, useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button, Text } from "@vector-im/compound-web"; -import { ReactComponent as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg"; +import PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react"; import { logger } from "matrix-js-sdk/src/logger"; import { Modal } from "../Modal"; diff --git a/src/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx index 6544a35b..a96edee2 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -17,8 +17,8 @@ limitations under the License. import { FC } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; -import { ReactComponent as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg"; -import { ReactComponent as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; +import LockIcon from "@vector-im/compound-design-tokens/icons/lock.svg?react"; +import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react"; import styles from "./EncryptionLock.module.css"; diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 313cc42f..bab0da04 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -33,8 +33,8 @@ import useMeasure from "react-use-measure"; import { logger } from "matrix-js-sdk/src/logger"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession"; -import { ReactComponent as LogoMark } from "../icons/LogoMark.svg"; -import { ReactComponent as LogoType } from "../icons/LogoType.svg"; +import LogoMark from "../icons/LogoMark.svg?react"; +import LogoType from "../icons/LogoType.svg?react"; import type { IWidgetApiRequest } from "matrix-widget-api"; import { HangupButton, diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx index 5252204b..88d9aef7 100644 --- a/src/room/LayoutToggle.tsx +++ b/src/room/LayoutToggle.tsx @@ -17,8 +17,8 @@ limitations under the License. import { ChangeEvent, FC, useCallback, useId } from "react"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; -import { ReactComponent as SpotlightViewIcon } from "@vector-im/compound-design-tokens/icons/spotlight-view.svg"; -import { ReactComponent as GridViewIcon } from "@vector-im/compound-design-tokens/icons/grid-view.svg"; +import SpotlightViewIcon from "@vector-im/compound-design-tokens/icons/spotlight-view.svg?react"; +import GridViewIcon from "@vector-im/compound-design-tokens/icons/grid-view.svg?react"; import classNames from "classnames"; import styles from "./LayoutToggle.module.css"; diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 5f01e4ce..3a6d9649 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -22,12 +22,12 @@ import { MatrixClient } from "matrix-js-sdk"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; import { TabContainer, TabItem } from "../tabs/Tabs"; -import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; -import { ReactComponent as VideoIcon } from "../icons/Video.svg"; -import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; -import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg"; -import { ReactComponent as UserIcon } from "../icons/User.svg"; -import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg"; +import AudioIcon from "../icons/Audio.svg?react"; +import VideoIcon from "../icons/Video.svg?react"; +import DeveloperIcon from "../icons/Developer.svg?react"; +import OverflowIcon from "../icons/Overflow.svg?react"; +import UserIcon from "../icons/User.svg?react"; +import FeedbackIcon from "../icons/Feedback.svg?react"; import { SelectInput } from "../input/SelectInput"; import { useShowInspector, diff --git a/src/tabs/Tabs.stories.tsx b/src/tabs/Tabs.stories.tsx index 87d76baf..9b921621 100644 --- a/src/tabs/Tabs.stories.tsx +++ b/src/tabs/Tabs.stories.tsx @@ -17,9 +17,9 @@ limitations under the License. import { FC } from "react"; import { TabContainer, TabItem } from "./Tabs"; -import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; -import { ReactComponent as VideoIcon } from "../icons/Video.svg"; -import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg"; +import AudioIcon from "../icons/Audio.svg?react"; +import VideoIcon from "../icons/Video.svg?react"; +import DeveloperIcon from "../icons/Developer.svg?react"; import { Body } from "../typography/Typography"; export default { diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index c8e9fedf..3ab2ee83 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -34,8 +34,8 @@ import { RoomMember, RoomMemberEvent, } from "matrix-js-sdk/src/models/room-member"; -import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg"; -import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg"; +import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react"; +import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react"; import { Text } from "@vector-im/compound-web"; import { Avatar } from "../Avatar"; diff --git a/test/mocks/svgr.ts b/test/mocks/svgr.ts index 18490609..cb6723c1 100644 --- a/test/mocks/svgr.ts +++ b/test/mocks/svgr.ts @@ -1,3 +1,3 @@ // Mock file for SVG imports -export default "SvgrURL"; -export const ReactComponent = "div"; +const ReactComponent = "svg"; +export default ReactComponent;