subscriptions: Move raw svg for plus and check icons to zulip-icon.

Fixes #35899.

We don't make any visual changes to how the svgs/icons look, we just
move them to use the zulip-icon system.

We also replace use of the raw images of each in the help center and add
appropriate color for both in the help center.

starlight_help/src/content/docs/introduction-to-channels.mdx

@@ -13,6 +13,7 @@ import ChannelsIntro from "./include/_ChannelsIntro.mdx";
 import BarChartIcon from "~icons/fa/bar-chart";
 import SortAlphaAscIcon from "~icons/fa/sort-alpha-asc";
 import UserOIcon from "~icons/fa/user-o";
+import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus";
 
 <ChannelsIntro />
 
@@ -32,7 +33,7 @@ subscribe to [private](/help/channel-permissions#private-channels) channels.
       1. Scroll through the list of channels. You can use the **search box** near the
          top of the menu to filter the list by channel name or description.
       1. Click the **subscribe to channel**
-         (<img src="../../../../static/images/help/desktop-web-plus-icon.svg" alt="plus" class="help-center-icon" />)
+         (<SubscriberPlusIcon class="zulip-unplugin-icon subscriber-plus-icon" />)
          icon to the left of a channel to subscribe to it.
     </FlattenedSteps>
 

starlight_help/src/content/docs/unsubscribe-from-a-channel.mdx

@@ -12,6 +12,8 @@ import ChannelActions from "./include/_ChannelActions.mdx";
 import ChannelLongPressMenu from "./include/_ChannelLongPressMenu.mdx";
 import MobileChannels from "./include/_MobileChannels.mdx";
 
+import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check";
+
 You can always unsubscribe from any channel in Zulip.
 
 <Tabs>
@@ -44,7 +46,7 @@ You can always unsubscribe from any channel in Zulip.
       <NavigationSteps target="relative/gear/channel-settings" />
 
       1. Click the **unsubscribe from channel**
-         (<img src="../../../../static/images/help/desktop-web-check-icon.svg" alt="checkmark" class="help-center-icon" />)
+         (<SubscriberCheckIcon class="zulip-unplugin-icon subscriber-check-icon" />)
          icon to the left of a channel to unsubscribe from it.
     </FlattenedSteps>
   </TabItem>

starlight_help/src/content/docs/user-groups.mdx

@@ -11,6 +11,9 @@ import CloudPaidPlansOnly from "./include/_CloudPaidPlansOnly.mdx";
 import UserGroupsApplications from "./include/_UserGroupsApplications.mdx";
 import UserGroupsIntro from "./include/_UserGroupsIntro.mdx";
 
+import SubscriberCheckIcon from "~icons/zulip-icon/subscriber-check";
+import SubscriberPlusIcon from "~icons/zulip-icon/subscriber-plus";
+
 <CloudPaidPlansOnly />
 
 <UserGroupsIntro />
@@ -29,7 +32,7 @@ organization's structure in Zulip's permissions system.
 
       1. Scroll through the list of user groups. You can use the **search box** near
          the top of the menu to filter the list by group name or description.
-      1. Click the **join group** (<img src="../../../../static/images/help/desktop-web-plus-icon.svg" alt="plus" class="help-center-icon" />) icon to the left of a user group to
+      1. Click the **join group** (<SubscriberPlusIcon class="zulip-unplugin-icon subscriber-plus-icon" />) icon to the left of a user group to
          join the group, if you have
          [permission](/help/manage-user-groups#configure-group-permissions) to do so.
     </FlattenedSteps>
@@ -43,7 +46,7 @@ organization's structure in Zulip's permissions system.
     <FlattenedSteps>
       <NavigationSteps target="relative/gear/group-settings" />
 
-      1. Click the **leave group** (<img src="../../../../static/images/help/desktop-web-check-icon.svg" alt="checkmark" class="help-center-icon" />) icon to the left of a user group to leave the
+      1. Click the **leave group** (<SubscriberCheckIcon class="zulip-unplugin-icon subscriber-check-icon" />) icon to the left of a user group to leave the
          group, if you have
          [permission](/help/manage-user-groups#configure-group-permissions) to do so.
     </FlattenedSteps>

starlight_help/src/styles/main.css

@@ -178,6 +178,18 @@
     color: var(--color-user-circle-deactivated);
 }
 
+.subscriber-check-icon {
+    /* This color is borrowed from subscriptions.css to make it look
+       the same as the web app. */
+    fill: hsl(240deg 96% 68%);
+}
+
+.subscriber-plus-icon {
+    /* This color is borrowed from subscriptions.css to make it look
+       the same as the web app. */
+    fill: hsl(0deg 0% 72%);
+}
+
 .sl-markdown-content {
     img {
         vertical-align: top;

web/shared/icons/subscriber-check.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+    <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+</svg>

web/shared/icons/subscriber-plus.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+    <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
+</svg>

web/src/stream_settings_components.ts

@@ -127,7 +127,7 @@ function display_subscribe_toggle_spinner($stream_row: JQuery): void {
     $stream_row.find(".check").removeClass("sub_unsub_button");
 
     /* Hide the tick. */
-    const $tick = $stream_row.find("svg");
+    const $tick = $stream_row.find(".sub-unsub-icon");
     $tick.addClass("hide");
 
     /* Add a spinner to show the request is in process. */
@@ -142,7 +142,7 @@ function hide_subscribe_toggle_spinner($stream_row: JQuery): void {
     $stream_row.find(".check").addClass("sub_unsub_button");
 
     /* Show the tick. */
-    const $tick = $stream_row.find("svg");
+    const $tick = $stream_row.find(".sub-unsub-icon");
     $tick.removeClass("hide");
 
     /* Destroy the spinner. */

web/styles/subscriptions.css

@@ -747,29 +747,39 @@ h4.user_group_setting_subsection_title {
         background-repeat: no-repeat;
         background-position: center center;
         display: flex;
+        justify-content: center;
 
-        & svg {
+        & .sub-unsub-icon {
-            fill: hsl(0deg 0% 72%);
+            display: flex;
-            width: 70%;
+            height: 100%;
-            margin: 0% 15%;
+            align-items: center;
+            /* This color is used in .subscriber-check-icon of the help
+               center to make the icon color same as the web app. Do change
+               the color there when changing the color here */
+            color: hsl(0deg 0% 72%);
+            font-size: 1.0938em; /* 70% of 1.5625em */
+
+            &.hide {
+                display: none;
+            }
         }
 
-        &.checked:hover svg {
+        &.checked:hover .sub-unsub-icon {
-            fill: hsl(240deg 41% 50%);
+            color: hsl(240deg 41% 50%);
         }
 
         &.not-direct-member {
-            svg {
+            .sub-unsub-icon {
                 cursor: default;
             }
         }
 
         &.disabled {
-            &:not(.checked) svg {
+            &:not(.checked) .sub-unsub-icon {
-                fill: hsl(0deg 0% 87%);
+                color: hsl(0deg 0% 87%);
             }
 
-            svg {
+            .sub-unsub-icon {
                 cursor: not-allowed;
             }
         }
@@ -792,8 +802,11 @@ h4.user_group_setting_subsection_title {
         }
     }
 
-    .checked svg {
+    .checked .sub-unsub-icon {
-        fill: hsl(240deg 96% 68%);
+        /* This color is used in .subscriber-check-icon of the help
+           center to make the icon color same as the web app. Do change
+           the color there when changing the color here */
+        color: hsl(240deg 96% 68%);
     }
 
     .icon {
@@ -881,9 +894,9 @@ h4.user_group_setting_subsection_title {
         background-color: var(--color-active-row-modal);
     }
 
-    .check:not(.checked, .disabled):hover svg,
+    .check:not(.checked, .disabled):hover .sub-unsub-icon,
-    &.active .check:not(.checked, .disabled):hover svg {
+    &.active .check:not(.checked, .disabled):hover .sub-unsub-icon {
-        fill: hsl(0deg 0% 27%);
+        color: hsl(0deg 0% 27%);
     }
 
     &::selection,

web/templates/stream_settings/browse_streams_list_item.hbs

@@ -14,9 +14,7 @@
                     </span>
                 </template>
 
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                <i class="zulip-icon zulip-icon-subscriber-check sub-unsub-icon"></i>
-                    <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
-                </svg>
             </div>
             <div class='sub_unsub_status'></div>
         </div>
@@ -42,9 +40,7 @@
                     </span>
                 </template>
 
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                <i class="zulip-icon zulip-icon-subscriber-plus sub-unsub-icon"></i>
-                    <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
-                </svg>
             </div>
             <div class='sub_unsub_status'></div>
         </div>