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>
2024-10-18 14:51:54 +01:00
parent e5a436a00a
commit 90e8c13c0f
49 changed files with 72 additions and 110 deletions
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/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";
--- a/src/components/views/elements/Pill.tsx
+++ b/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 {
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/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>
        );

--- a/src/components/views/rooms/RoomKnocksBar.tsx
+++ b/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";
--- a/src/components/views/rooms/RoomTileSubtitle.tsx
+++ b/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}>
--- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
+++ b/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";