From 12e233970c20b3a04aa965c8a4717ab69748a7b0 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 25 Jul 2024 13:15:45 -0400 Subject: [PATCH] Import Compound icons in the new recommended way The Compound design tokens package is now set up to generate React components for every icon, so we no longer need to use our more error-prone method of importing the SVGs. --- src/Header.tsx | 2 +- src/Modal.tsx | 2 +- src/button/Button.tsx | 36 ++++++++++++++++++++++------------ src/button/InviteButton.tsx | 2 +- src/room/AppSelectionModal.tsx | 2 +- src/room/EncryptionLock.tsx | 6 ++++-- src/room/InviteModal.tsx | 6 ++++-- src/room/LayoutToggle.tsx | 18 +++++++++++++---- src/room/RoomPage.tsx | 2 +- src/tile/GridTile.tsx | 20 ++++++++++--------- src/tile/MediaView.tsx | 2 +- src/tile/SpotlightTile.tsx | 10 ++++++---- 12 files changed, 68 insertions(+), 40 deletions(-) diff --git a/src/Header.tsx b/src/Header.tsx index e0fb9297..1929bcf5 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -19,7 +19,7 @@ import { FC, HTMLAttributes, ReactNode, forwardRef } from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Heading, Text } from "@vector-im/compound-web"; -import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; +import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import styles from "./Header.module.css"; import Logo from "./icons/Logo.svg?react"; diff --git a/src/Modal.tsx b/src/Modal.tsx index f51dd628..4328dad2 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 CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react"; +import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import classNames from "classnames"; import { Heading, Glass } from "@vector-im/compound-web"; diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 4ad3d4b3..63e29420 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -20,14 +20,16 @@ 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 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 VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react"; -import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.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 { + MicOnSolidIcon, + MicOffSolidIcon, + VideoCallSolidIcon, + VideoCallOffSolidIcon, + EndCallIcon, + ShareScreenSolidIcon, + SettingsSolidIcon, + ChevronDownIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import styles from "./Button.module.css"; @@ -149,7 +151,7 @@ export const MicButton: FC<{ return ( ); @@ -169,7 +171,7 @@ export const VideoButton: FC<{ return ( ); @@ -189,7 +191,7 @@ export const ScreenshareButton: FC<{ return ( ); @@ -209,7 +211,11 @@ export const HangupButton: FC<{ className={classNames(styles.hangupButton, className)} {...rest} > - + ); @@ -225,7 +231,11 @@ export const SettingsButton: FC<{ return ( ); diff --git a/src/button/InviteButton.tsx b/src/button/InviteButton.tsx index a35ef781..8a807057 100644 --- a/src/button/InviteButton.tsx +++ b/src/button/InviteButton.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 UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg?react"; +import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; export const InviteButton: FC< Omit, "children"> diff --git a/src/room/AppSelectionModal.tsx b/src/room/AppSelectionModal.tsx index ffb9932d..5868c9d8 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 PopOutIcon from "@vector-im/compound-design-tokens/icons/pop-out.svg?react"; +import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; 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 5408f707..fe60ad30 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -17,8 +17,10 @@ limitations under the License. import { FC } from "react"; import { Tooltip } from "@vector-im/compound-web"; import { useTranslation } from "react-i18next"; -import LockSolidIcon from "@vector-im/compound-design-tokens/icons/lock-solid.svg?react"; -import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react"; +import { + LockSolidIcon, + LockOffIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import styles from "./EncryptionLock.module.css"; diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx index 3a66ebea..8d1a4ead 100644 --- a/src/room/InviteModal.tsx +++ b/src/room/InviteModal.tsx @@ -18,8 +18,10 @@ import { FC, MouseEvent, useCallback, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { Room } from "matrix-js-sdk"; import { Button, Text } from "@vector-im/compound-web"; -import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg?react"; -import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react"; +import { + LinkIcon, + CheckIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import useClipboard from "react-use-clipboard"; import { Modal } from "../Modal"; diff --git a/src/room/LayoutToggle.tsx b/src/room/LayoutToggle.tsx index d74f26b3..fe3020ed 100644 --- a/src/room/LayoutToggle.tsx +++ b/src/room/LayoutToggle.tsx @@ -17,8 +17,10 @@ limitations under the License. import { ChangeEvent, FC, useCallback, useId } from "react"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@vector-im/compound-web"; -import SpotlightIcon from "@vector-im/compound-design-tokens/icons/spotlight.svg?react"; -import GridIcon from "@vector-im/compound-design-tokens/icons/grid.svg?react"; +import { + SpotlightIcon, + GridIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import classNames from "classnames"; import styles from "./LayoutToggle.module.css"; @@ -54,7 +56,11 @@ export const LayoutToggle: FC = ({ layout, setLayout, className }) => { /> = ({ layout, setLayout, className }) => { /> diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx index 1a14fb7e..bfcf94fd 100644 --- a/src/room/RoomPage.tsx +++ b/src/room/RoomPage.tsx @@ -17,7 +17,7 @@ limitations under the License. import { FC, useEffect, useState, useCallback, ReactNode } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { useTranslation } from "react-i18next"; -import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react"; +import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { useClientLegacy } from "../ClientContext"; import { ErrorView, LoadingView } from "../FullScreenView"; diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index eb2625e8..dbaadc1b 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -24,15 +24,17 @@ import { import { animated } from "@react-spring/web"; import classNames from "classnames"; import { useTranslation } from "react-i18next"; -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 MicOffIcon from "@vector-im/compound-design-tokens/icons/mic-off.svg?react"; -import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react"; -import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react"; -import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react"; -import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg?react"; -import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; -import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react"; +import { + MicOnSolidIcon, + MicOffSolidIcon, + MicOffIcon, + OverflowHorizontalIcon, + VolumeOnIcon, + VolumeOffIcon, + VisibilityOnIcon, + UserProfileIcon, + ExpandIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { ContextMenu, MenuItem, diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index e34b4fdd..9fe08643 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next"; import classNames from "classnames"; import { VideoTrack } from "@livekit/components-react"; import { Text, Tooltip } from "@vector-im/compound-web"; -import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg?react"; +import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import styles from "./MediaView.module.css"; import { Avatar } from "../Avatar"; diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx index 5407b1a7..5d00c9cb 100644 --- a/src/tile/SpotlightTile.tsx +++ b/src/tile/SpotlightTile.tsx @@ -23,10 +23,12 @@ import { useRef, useState, } from "react"; -import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react"; -import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react"; -import ChevronLeftIcon from "@vector-im/compound-design-tokens/icons/chevron-left.svg?react"; -import ChevronRightIcon from "@vector-im/compound-design-tokens/icons/chevron-right.svg?react"; +import { + ExpandIcon, + CollapseIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import { animated } from "@react-spring/web"; import { Observable, map } from "rxjs"; import { useObservableEagerState } from "observable-hooks";