Replace more icons with compound (#31381)

* Replace element-icons/chat-bubbles.svg with compound

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

* Replace element-icons/chat-bubbles.svg with compound

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

* Replace external-link.svg with compound

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

* Replace element-icons/hide.svg with compound

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

* Replace element-icons/explore.svg with compound

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

* Replace element-icons/hash-*.svg with compound

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

* Replace element-icons/share.svg with compound

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

* Replace element-icons/group-members.svg with compound

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

* Replace element-icons/mask-as-*.svg with compound

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

* Replace element-icons/low-priority.svg with compound

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

* Replace element-icons/plus-circle.svg with compound

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

* Replace element-icons/roles.svg with compound

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

* Update jest snapshots

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

* Update screenshots

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

* Update screenshots

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

* Update screenshot

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

---------

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

res/css/structures/_HomePage.pcss

@@ -88,11 +88,11 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_HomePage_button_explore::before {
-                mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
             }
 
             &.mx_HomePage_button_createGroup::before {
-                mask-image: url("$(res)/img/element-icons/group-members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
             }
         }
     }

res/css/structures/_LeftPanel.pcss

@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_LeftPanel_exploreButton::before {
-                mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
             }
 
             .mx_LeftPanel_recentsButton::before {

res/css/structures/_SpacePanel.pcss

@@ -228,7 +228,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
         }
 
         &.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
@@ -453,7 +453,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconExplore::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
     }
 
     .mx_SpacePanel_iconPreferences::before {

res/css/structures/_SpaceRoomView.pcss

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

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
-        mask-image: url("$(res)/img/element-icons/room/share.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
     }
 
     .mx_MessageContextMenu_iconUnhidePreview::before {
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconOpenInMapSite::before {
-        mask-image: url("$(res)/img/external-link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
     }
 
     .mx_MessageContextMenu_iconEndPoll::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -3,15 +3,15 @@
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/low-priority.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/arrow-down.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconMarkAsRead::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/mark-as-read.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/mark-as-read.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconMarkAsUnread::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/mark-as-unread.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/mark-as-unread.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {

res/css/views/dialogs/_ForwardDialog.pcss

@@ -147,7 +147,7 @@ Please see LICENSE files in the repository root for full details.
 
                     &.mx_ForwardList_sending .mx_ForwardList_sendIcon {
                         background-color: $accent;
-                        mask-image: url("$(res)/img/element-icons/circle-sending.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg");
                         mask-position: center;
                         mask-repeat: no-repeat;
                         mask-size: 14px;
@@ -157,7 +157,7 @@ Please see LICENSE files in the repository root for full details.
 
                     &.mx_ForwardList_sent .mx_ForwardList_sendIcon {
                         background-color: $accent;
-                        mask-image: url("$(res)/img/element-icons/circle-sent.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
                         mask-position: center;
                         mask-repeat: no-repeat;
                         mask-size: 14px;

res/css/views/dialogs/_JoinRuleDropdown.pcss

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_JoinRuleDropdown_restricted::before {
-        mask-image: url("$(res)/img/element-icons/group-members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
         mask-size: contain;
     }
 

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RoomSettingsDialog_rolesIcon::before {
-    mask-image: url("$(res)/img/element-icons/room/settings/roles.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/admin.svg");
 }
 
 .mx_RoomSettingsDialog_notificationsIcon::before {
@@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RoomSettingsDialog_peopleIcon::before {
-    mask-image: url("$(res)/img/element-icons/group-members.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
 }
 
 .mx_RoomSettingsDialog .mx_Dialog_title {

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_filterPublicRooms::before {
-                mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
             }
 
             &.mx_SpotlightDialog_filterPublicSpaces::before {
@@ -414,7 +414,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
         }
 
         .mx_SpotlightDialog_otherSearches {
@@ -447,11 +447,11 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_joinRoomAlias::before {
-                mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
             }
 
             .mx_SpotlightDialog_explorePublicRooms::before {
-                mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
             }
 
             .mx_SpotlightDialog_explorePublicSpaces::before {
@@ -459,7 +459,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_startGroupChat::before {
-                mask-image: url("$(res)/img/element-icons/group-members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
             }
 
             .mx_SpotlightDialog_searchMessages::before {
@@ -523,7 +523,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_metaspaceResult_orphans-space {
-                mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
             }
         }
     }

res/css/views/elements/_ExternalLink.pcss

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ExternalLink_icon {
     display: inline-block;
-    mask-image: url("$(res)/img/external-link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
     background-color: currentColor;
     mask-repeat: no-repeat;
     mask-size: contain;

res/css/views/messages/_CreateEvent.pcss

@@ -11,6 +11,6 @@ Please see LICENSE files in the repository root for full details.
 
     &::before {
         background-color: $header-panel-text-primary-color;
-        mask-image: url("$(res)/img/element-icons/chat-bubbles.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
     }
 }

res/css/views/messages/_HiddenBody.pcss

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         height: 14px;
         width: 14px;
         background-color: $muted-fg-color;
-        mask-image: url("$(res)/img/element-icons/hide.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
 
         mask-repeat: no-repeat;
         mask-position: center;

res/css/views/rooms/_EventTile.pcss

@@ -61,11 +61,11 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile_receiptSent::before {
-        mask-image: url("$(res)/img/element-icons/circle-sent.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
     }
 
     .mx_EventTile_receiptSending::before {
-        mask-image: url("$(res)/img/element-icons/circle-sending.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg");
     }
 
     .mx_EventTile_content {

res/css/views/rooms/_HistoryTile.pcss

@@ -11,6 +11,6 @@ Please see LICENSE files in the repository root for full details.
 
     &::before {
         background-color: $header-panel-text-primary-color;
-        mask-image: url("$(res)/img/element-icons/hide.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
     }
 }

res/css/views/rooms/_LegacyRoomList.pcss

@@ -11,23 +11,23 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_LegacyRoomList_iconPlus::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/plus-circle.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }
 .mx_LegacyRoomList_iconNewRoom::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }
 .mx_LegacyRoomList_iconNewVideoRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
 }
 .mx_LegacyRoomList_iconAddExistingRoom::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
 }
 .mx_LegacyRoomList_iconExplore::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
 }
 .mx_LegacyRoomList_iconStartChat::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_LegacyRoomList_iconInvite::before {
-    mask-image: url("$(res)/img/element-icons/room/share.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
 }

res/css/views/rooms/_LegacyRoomListHeader.pcss

@@ -95,13 +95,13 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_LegacyRoomListHeader_iconNewRoom::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }
 .mx_LegacyRoomListHeader_iconNewVideoRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
 }
 .mx_LegacyRoomListHeader_iconExplore::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
 }
 .mx_LegacyRoomListHeader_iconPlus::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");

res/css/views/rooms/_LiveContentSummary.pcss

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
         vertical-align: text-bottom;
         content: "";
         background-color: $secondary-content;
-        mask-image: url("$(res)/img/element-icons/group-members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
         mask-size: 16px;
         width: 16px;
         height: 16px;

res/css/views/terms/_InlineTermsAgreement.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_InlineTermsAgreement_link {
     display: inline-block;
-    mask-image: url("$(res)/img/external-link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
     background-color: $accent;
     mask-repeat: no-repeat;
     mask-size: contain;

res/img/element-icons/chat-bubble.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M 12.046004,0 C 5.4431281,0 0.08988791,5.3729108 0.08988791,12.000001 c 0,2.059897 0.5163635,3.998954 1.42753269,5.692825 l -1.46565664,4.725598 c -0.26501811,0.853738 0.53179935,1.6561 1.38305454,1.392383 L 6.0478246,22.382286 C 7.8109429,23.410602 9.8598215,24 12.046004,24 18.648792,24 24,18.627023 24,12.000001 24,5.3729108 18.648792,0 12.046004,0 Z M 6.7319388,10.667139 c 0.7336504,0 1.3279866,0.596453 1.3279866,1.332862 0,0.736298 -0.5943362,1.332861 -1.3279866,1.33286 -0.7336504,0 -1.3279866,-0.596562 -1.3279865,-1.33286 0,-0.736409 0.5943361,-1.332862 1.3279865,-1.332862 z m 5.3140652,0 c 0.733607,0 1.327986,0.596453 1.327986,1.332862 0,0.736298 -0.594379,1.33286 -1.327986,1.33286 -0.733716,1e-6 -1.327987,-0.596562 -1.327987,-1.33286 0,-0.736409 0.594271,-1.332862 1.327987,-1.332862 z m 5.311946,0 c 0.733607,0 1.330105,0.596453 1.330105,1.332862 0,0.736298 -0.596498,1.332861 -1.330105,1.33286 -0.733715,0 -1.327987,-0.596562 -1.327987,-1.33286 0,-0.736409 0.594272,-1.332862 1.327987,-1.332862 z" />
-</svg>

res/img/element-icons/chat-bubbles.svg

@@ -1,11 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.90964 11.5297C9.09231 11.5297 11.6724 8.94865 11.6724 5.76483C11.6724 2.581 9.09231 0 5.90964 0C2.72697 0 0.146904 2.581 0.146904 5.76483C0.146904 6.65678 0.3494 7.50142 0.710912 8.25525L0.0648767 10.3556C-0.171716 11.1248 0.550948 11.8442 1.31906 11.6041L3.39724 10.9544C4.15657 11.323 5.00898 11.5297 5.90964 11.5297Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.03851 12.8449C5.70399 13.1151 6.4314 13.2638 7.19345 13.2638C10.3676 13.2638 13.5 10.6832 13.5 7.49979C13.5 6.63255 13.2676 5.81005 12.8651 5.07227C14.6487 6.05071 15.8583 7.94999 15.8583 10.1326C15.8583 11.0243 15.6564 11.8688 15.2959 12.6224L15.9404 14.7232C16.1765 15.4926 15.4533 16.2114 14.6854 15.9708L12.6155 15.322C11.8585 15.6902 11.0088 15.8966 10.111 15.8966C7.91459 15.8966 6.00594 14.661 5.03851 12.8449Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

res/img/element-icons/circle-sending.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="8" cy="8" r="7.5" stroke="#8D99A5"/>
-</svg>