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

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

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

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<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 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,

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