Deduplicate icons using Compound Design Tokens (#28219)

* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png

@@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details.
 
             &[aria-checked="true"]::before {
                 content: "";
-                width: 12px;
-                height: 12px;
-                margin-left: -20px;
-                margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                width: 16px;
+                height: 16px;
+                margin-left: -22px;
+                margin-right: 6px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png

@@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("$(res)/img/element-icons/trashcan.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
             }
 
             &.mx_RoomStatusBar_unsentRetry {

playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png

@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("$(res)/img/element-icons/trashcan.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
     }
 
     .mx_MessageContextMenu_iconResend::before {
@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {

playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png

@@ -351,7 +351,7 @@ Please see LICENSE files in the repository root for full details.
                 height: 24px;
                 grid-column: 1;
                 grid-row: 1;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 position: absolute;

playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png

@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
                 color: $accent;
 
                 &::before {
-                    mask-image: url("$(res)/img/feather-customised/check.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                     background-color: $accent;
                 }
             }

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png

@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: var(--cpd-color-bg-action-primary-rest);
 
             &::before {
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
             }
         }
 

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png

@@ -129,7 +129,8 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_button_more::before {
-    mask-image: url("$(res)/img/image-view/more.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 28px;
 }
 
 .mx_ImageView_button_close {

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
 
                 height: 100%;
                 width: 100%;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-position: center;
                 mask-size: 100%;
                 mask-repeat: no-repeat;

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png

@@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
         color: $accent;
 
         &::before {
-            mask-image: url("$(res)/img/feather-customised/check.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
             background-color: $accent;
         }
     }

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png

@@ -122,4 +122,8 @@ Please see LICENSE files in the repository root for full details.
             --MessageActionBar-icon-size: 12px;
         }
     }
+
+    .mx_MessageActionBar_optionsButton {
+        --MessageActionBar-icon-size: 22px;
+    }
 }

playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         height: 14px;
         width: 14px;
         background-color: $icon-button-color;
-        mask-image: url("$(res)/img/feather-customised/trash.custom.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;

res/css/structures/_GenericDropdownMenu.pcss

@@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details.
                 width: 12px;
                 height: 12px;
                 margin-right: 8px;
-                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 mask-size: 100%;
                 mask-repeat: no-repeat;
                 background-color: $primary-content;

res/css/structures/_RoomStatusBar.pcss

@@ -277,7 +277,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MessageComposer_buttonMenu::before {
-    mask-image: url("$(res)/img/image-view/more.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    mask-size: 24px;
 }
 
 .mx_MessageComposer_sendMessage {

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
     background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;
-    mask-image: url("$(res)/img/element-icons/trashcan.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
 }
 
 .mx_VoiceRecordComposerTile_uploadingState {

res/css/views/dialogs/_InviteDialog.pcss

@@ -35,6 +35,6 @@ Please see LICENSE files in the repository root for full details.
         top: 0;
         left: 0;
         background-color: $alert;
-        mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg");
     }
 }

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -161,7 +161,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_LegacyCallViewButtons_button_more::before {
-            mask-image: url("$(res)/img/voip/call-view/more.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
         }
         /* Stateless buttons */
 

res/css/views/elements/_AccessibleButton.pcss

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

res/css/views/elements/_ImageView.pcss

@@ -10,15 +10,14 @@ 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";
 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 {