Deduplicate icons using Compound Design Tokens (#28219)

* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/RoomStatusBar.tsx

@@ -17,8 +17,8 @@ import {
     SyncState,
     SyncStateData,
 } from "matrix-js-sdk/src/matrix";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg";
 import { _t, _td } from "../../languageHandler";
 import Resend from "../../Resend";
 import dis from "../../dispatcher/dispatcher";

src/components/views/elements/Pill.tsx

@@ -10,7 +10,7 @@ import React, { ReactElement } from "react";
 import classNames from "classnames";
 import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
-import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import { LinkIcon, UserSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -18,7 +18,6 @@ import { usePermalink } from "../../../hooks/usePermalink";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
-import { Icon as UserIcon } from "../../../../res/img/compound/user.svg";
 
 export enum PillType {
     UserMention = "TYPE_USER_MENTION",
@@ -63,7 +62,7 @@ const PillMemberAvatar: React.FC<{
     if (member) {
         return <MemberAvatar member={member} size="16px" aria-hidden="true" hideTitle />;
     }
-    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
+    return <UserSolidIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
 };
 
 export interface PillProps {

src/components/views/messages/MessageActionBar.tsx

@@ -21,16 +21,18 @@ import {
     EventType,
 } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
-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 ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import {
+    PinIcon,
+    UnpinIcon,
+    OverflowHorizontalIcon,
+    ReplyIcon,
+    DeleteIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";
 import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
 import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg";
 import { Icon as ThreadIcon } from "../../../../res/img/element-icons/message/thread.svg";
-import { Icon as TrashcanIcon } from "../../../../res/img/element-icons/trashcan.svg";
-import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg";
 import { Icon as ExpandMessageIcon } from "../../../../res/img/element-icons/expand-message.svg";
 import { Icon as CollapseMessageIcon } from "../../../../res/img/element-icons/collapse-message.svg";
 import type { Relations } from "matrix-js-sdk/src/matrix";
@@ -130,7 +132,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 tabIndex={isActive ? 0 : -1}
                 placement="left"
             >
-                <ContextMenuIcon />
+                <OverflowHorizontalIcon />
             </ContextMenuTooltipButton>
             {contextMenu}
         </React.Fragment>
@@ -454,7 +456,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 key="cancel"
                 placement="left"
             >
-                <TrashcanIcon />
+                <DeleteIcon />
             </RovingAccessibleButton>
         );
 

src/components/views/rooms/RoomKnocksBar.tsx

@@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
-import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
 import dis from "../../../dispatcher/dispatcher";
 import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";

src/components/views/rooms/RoomTileSubtitle.tsx

@@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
+import { ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore";
 import { Call } from "../../../models/Call";
 import { RoomTileCallSummary } from "./RoomTileCallSummary";
 import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast";
-import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg";
 
 interface Props {
     call: Call | null;
@@ -49,7 +49,7 @@ export const RoomTileSubtitle: React.FC<Props> = ({
             "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
         });
 
-        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_12" /> : null;
+        const icon = messagePreview.isThreadReply ? <ThreadsIcon className="mx_Icon mx_Icon_12" /> : null;
 
         return (
             <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>

src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

@@ -9,9 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React, { useCallback, useState, VFC } from "react";
-import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import { CloseIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
 import { formatRelativeTime } from "../../../../../DateUtils";
 import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
 import { _t } from "../../../../../languageHandler";