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