Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 17, 2024 · 825d3f4 · 825d3f4
1 parent eedeb2c
commit 825d3f4
Show file tree

Hide file tree

Showing 35 changed files with 32 additions and 99 deletions.
diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss
@@ -103,7 +103,7 @@ Please see LICENSE files in the repository root for full details.
                 height: 12px;
                 margin-left: -20px;
                 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;

diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss
@@ -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 {

diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -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 {

diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
@@ -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;

diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -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;
                 }
             }

diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss
@@ -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");
             }
         }
 

diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss
@@ -129,7 +129,7 @@ $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");
 }
 
 .mx_ImageView_button_close {

diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss
@@ -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;

diff --git a/res/css/views/elements/_Validation.pcss b/res/css/views/elements/_Validation.pcss
@@ -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;
         }
     }

diff --git a/res/css/views/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss
@@ -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;

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.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;

diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
@@ -277,7 +277,7 @@ 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");
 }
 
 .mx_MessageComposer_sendMessage {

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.pcss b/res/css/views/rooms/_VoiceRecordComposerTile.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 {

diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.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");
     }
 }
diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.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 */
 

diff --git a/res/img/compound/thread-16px.svg b/res/img/compound/thread-16px.svg
diff --git a/res/img/compound/user.svg b/res/img/compound/user.svg
diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg
diff --git a/res/img/feather-customised/check.svg b/res/img/feather-customised/check.svg
diff --git a/res/img/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg
diff --git a/res/img/feather-customised/warning-triangle.svg b/res/img/feather-customised/warning-triangle.svg
diff --git a/res/img/format/bold.svg b/res/img/format/bold.svg
diff --git a/res/img/format/code.svg b/res/img/format/code.svg
diff --git a/res/img/format/italics.svg b/res/img/format/italics.svg
diff --git a/res/img/format/quote.svg b/res/img/format/quote.svg
diff --git a/res/img/format/strikethrough.svg b/res/img/format/strikethrough.svg
diff --git a/res/img/image-view/more.svg b/res/img/image-view/more.svg
diff --git a/res/img/voip/call-view/more.svg b/res/img/voip/call-view/more.svg
diff --git 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";

diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx
@@ -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, UserIcon } 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",