Prefer wrapped Compound React icon assets (#122)

* Prefer wrapped Compound React icon assets Signed-off-by: Michael Telatynski <[email protected]> * Add eslint rule for CDT svg imports Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Fix height Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 4, 2024 · 7ef8663 · 7ef8663
1 parent 0a9b4ae
commit 7ef8663
Show file tree

Hide file tree

Showing 34 changed files with 835 additions and 158 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,6 +46,7 @@ module.exports = {
 
         "import/no-duplicates": ["error"],
         // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+        // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
         "no-restricted-imports": [
             "error",
             {
@@ -150,6 +151,10 @@ module.exports = {
                         message:
                             "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
                     },
+                    {
+                        group: ["@vector-im/compound-design-tokens/icons/*"],
+                        message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
+                    },
                 ],
             },
         ],

diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx
@@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
                 <div className="mx_RoomStatusBar">
                     <div role="alert">
                         <div className="mx_RoomStatusBar_connectionLostBar">
-                            <WarningIcon width="24" height="24" />
+                            <WarningIcon width="24px" height="24px" />
                             <div>
                                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                                     {_t("room|status_bar|server_connectivity_lost_title")}

diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -12,8 +12,8 @@ import {
     LegacyRendezvousFailureReason,
     MSC4108FailureReason,
 } from "matrix-js-sdk/src/rendezvous";
-import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
-import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg";
+import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
+import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";

diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx
@@ -21,8 +21,8 @@ import {
     EventType,
 } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
-import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
+import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
 
 import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
 import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";

diff --git a/src/components/views/messages/PinnedMessageBadge.tsx b/src/components/views/messages/PinnedMessageBadge.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { JSX } from "react";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 
 import { _t } from "../../../languageHandler.tsx";
 
@@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx";
 export function PinnedMessageBadge(): JSX.Element {
     return (
         <div className="mx_PinnedMessageBadge">
-            <PinIcon width="16" />
+            <PinIcon width="16px" height="16px" />
             {_t("room|pinned_message_badge")}
         </div>
     );

diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
@@ -10,7 +10,7 @@ import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "re
 import classNames from "classnames";
 import { IconButton, Text } from "@vector-im/compound-web";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
+import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { _t } from "../../../languageHandler";

diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx
@@ -10,8 +10,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Button, Link, Separator, Text } from "@vector-im/compound-web";
-import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg";
-import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg";
+import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
+import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";

diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -21,22 +21,22 @@ import {
     Form,
 } from "@vector-im/compound-web";
 import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
-import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
 import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
-import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
+import ExportArchiveIcon from "@vector-im/compound-design-tokens/assets/web/icons/export-archive";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
 import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
-import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
-import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
+import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
+import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
-import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
+import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";

diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
@@ -31,12 +31,12 @@ import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
 import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
-import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
+import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
 import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
 import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg";
-import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
+import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
+import VisibilityOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 
 import dis from "../../../dispatcher/dispatcher";

diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
@@ -26,7 +26,7 @@ import {
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { throttle } from "lodash";
 import { Button, Tooltip } from "@vector-im/compound-web";
-import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";

diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
@@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { JSX, useCallback, useState } from "react";
 import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web";
-import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
-import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg";
-import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg";
-import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
-import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
+import ViewIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
+import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
+import ForwardIcon from "@vector-im/compound-design-tokens/assets/web/icons/forward";
+import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
+import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 import classNames from "classnames";
 
 import dis from "../../../dispatcher/dispatcher";

diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { JSX, useEffect, useMemo, useState } from "react";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 import { Button } from "@vector-im/compound-web";
 import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
@@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
             >
                 <div className="mx_PinnedMessageBanner_content">
                     <Indicators count={eventCount} currentIndex={currentEventIndex} />
-                    <PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
+                    <PinIcon width="20px" height="20px" className="mx_PinnedMessageBanner_PinIcon" />
                     {!isSinglePinnedEvent && (
                         <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
                             {_t(

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
@@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useCallback, useContext, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
-import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
-import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
+import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
+import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call";
 import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
-import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
-import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg";
-import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
+import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
+import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
+import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
 import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";

diff --git a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { useContext } from "react";
-import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat-solid.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-solid";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { IconButton, Tooltip } from "@vector-im/compound-web";
 

diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useContext, useState } from "react";
 import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
 import { IndicatorIcon } from "@vector-im/compound-web";
-import { Icon as ThreadIconSolid } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
 
 import { _t } from "../../../languageHandler";
 import { CardContext } from "../right_panel/context";

diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx
@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
-import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg";
-import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg";
+import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";

diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx
@@ -17,7 +17,7 @@ import {
     MatrixClient,
     DEVICE_CODE_SCOPE,
 } from "matrix-js-sdk/src/matrix";
-import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg";
+import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code";
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";

diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ChangeEvent, useMemo } from "react";
-import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
+import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 
 import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
 import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";

diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { ComponentProps, forwardRef } from "react";
-import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
+import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
 import classNames from "classnames";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 
@@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
                     ref={ref}
                 >
                     <>
-                        <Icon className="mx_ThreadsActivityCentreButton_Icon" />
+                        <ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
                         {/* This is dirty, but we need to add the label to the indicator icon */}
                         {displayLabel && (
                             <Text

diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useCallback, useEffect, useState } from "react";
 import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import { Button, Tooltip } from "@vector-im/compound-web";
-import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
+import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";