Merge pull request #2509 from robintown/icon-imports

Import Compound icons in the new recommended way

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

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

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 {
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
+  MicOnSolidIcon,
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg?react";
+  MicOffSolidIcon,
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg?react";
+  VideoCallSolidIcon,
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg?react";
+  VideoCallOffSolidIcon,
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg?react";
+  EndCallIcon,
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg?react";
+  ShareScreenSolidIcon,
-import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
+  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 (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-label={label} />
+        <Icon aria-label={label} width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -169,7 +171,7 @@ export const VideoButton: FC<{
   return (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-label={label} />
+        <Icon aria-label={label} width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -189,7 +191,7 @@ export const ScreenshareButton: FC<{
   return (
     <Tooltip label={label}>
       <Button variant="toolbar" {...rest} on={enabled}>
-        <ShareScreenSolidIcon aria-label={label} />
+        <ShareScreenSolidIcon aria-label={label} width={24} height={24} />
       </Button>
     </Tooltip>
   );
@@ -209,7 +211,11 @@ export const HangupButton: FC<{
         className={classNames(styles.hangupButton, className)}
         {...rest}
       >
-        <EndCallIcon aria-label={t("hangup_button_label")} />
+        <EndCallIcon
+          aria-label={t("hangup_button_label")}
+          width={24}
+          height={24}
+        />
       </Button>
     </Tooltip>
   );
@@ -225,7 +231,11 @@ export const SettingsButton: FC<{
   return (
     <Tooltip label={t("common.settings")}>
       <Button variant="toolbar" {...rest}>
-        <SettingsSolidIcon aria-label={t("common.settings")} />
+        <SettingsSolidIcon
+          aria-label={t("common.settings")}
+          width={24}
+          height={24}
+        />
       </Button>
     </Tooltip>
   );

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<ComponentPropsWithoutRef<"button">, "children">

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

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 {
-import LockOffIcon from "@vector-im/compound-design-tokens/icons/lock-off.svg?react";
+  LockSolidIcon,
+  LockOffIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./EncryptionLock.module.css";
 

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 {
-import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg?react";
+  LinkIcon,
+  CheckIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";

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 {
-import GridIcon from "@vector-im/compound-design-tokens/icons/grid.svg?react";
+  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<Props> = ({ layout, setLayout, className }) => {
       />
       <Tooltip label={t("layout_spotlight_label")}>
         <label htmlFor={spotlightId}>
-          <SpotlightIcon aria-label={t("layout_spotlight_label")} />
+          <SpotlightIcon
+            aria-label={t("layout_spotlight_label")}
+            width={24}
+            height={24}
+          />
         </label>
       </Tooltip>
       <input
@@ -67,7 +73,11 @@ export const LayoutToggle: FC<Props> = ({ layout, setLayout, className }) => {
       />
       <Tooltip label={t("layout_grid_label")}>
         <label htmlFor={gridId}>
-          <GridIcon aria-label={t("layout_grid_label")} />
+          <GridIcon
+            aria-label={t("layout_grid_label")}
+            width={24}
+            height={24}
+          />
         </label>
       </Tooltip>
     </div>

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

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 {
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
+  MicOnSolidIcon,
-import MicOffIcon from "@vector-im/compound-design-tokens/icons/mic-off.svg?react";
+  MicOffSolidIcon,
-import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react";
+  MicOffIcon,
-import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react";
+  OverflowHorizontalIcon,
-import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react";
+  VolumeOnIcon,
-import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg?react";
+  VolumeOffIcon,
-import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+  VisibilityOnIcon,
-import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react";
+  UserProfileIcon,
+  ExpandIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
   MenuItem,

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

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 {
-import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react";
+  ExpandIcon,
-import ChevronLeftIcon from "@vector-im/compound-design-tokens/icons/chevron-left.svg?react";
+  CollapseIcon,
-import ChevronRightIcon from "@vector-im/compound-design-tokens/icons/chevron-right.svg?react";
+  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";