Update theme icon for client preferences in user links

- Add appearance.svg file and classes
- Update the icon name in php
- Update icon name in test data and Snapshot

To test: change return value of
  isClientPreferencesPinned() from SkinVector22
  PHP Class to false

Bug: T351142
Change-Id: If61f3019430be3cb9c926b09bc397e27d8e636f2

includes/SkinVector22.php

@@ -496,7 +496,7 @@ class SkinVector22 extends SkinMustache {
 				$this->msg( 'vector-client-prefs-label' )->text(),
 				'',
 				// @todo: Use new theme icon (T351142)
-				'settings'
+				'appearance'
 			) : null,
 			'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
 				Constants::FEATURE_STICKY_HEADER

resources/skins.vector.styles/images/appearance.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		appearance
+	</title>
+	<path fill-rule="evenodd" d="M5.25 14.5a4.25 4.25 0 0 0 4.247-4.092c.3-.21.706-.21 1.006 0a4.25 4.25 0 0 0 8.431.59L19 11a1 1 0 1 0-.182-1.984 4.252 4.252 0 0 0-7.896-.615 2.895 2.895 0 0 0-1.844 0 4.25 4.25 0 0 0-7.896.615 1 1 0 1 0-.116 1.981A4.251 4.251 0 0 0 5.25 14.5Zm0-2a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5ZM17 10.25a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/>
+</svg>

resources/skins.vector.styles/mixins.less

@@ -98,3 +98,7 @@
 	left: auto !important; /* stylelint-disable-line declaration-no-important */
 	right: 0;
 }
+
+.vector-icon.mw-ui-icon-wikimedia-appearance {
+	background-image: url( ./images/appearance.svg );
+}

tests/jest/__snapshots__/userLinks.test.js.snap

@@ -62,7 +62,7 @@ exports[`UserLinks renders 1`] = `
 			<li id=\\"pt-userpage\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/User:Admin\\" title=\\"Your user page [.]\\" accesskey=\\".\\"><span class=\\"vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar\\"></span> <span>Admin</span></a></li>
 			<li id=\\"pt-mytalk\\" class=\\"mw-list-item\\"><a href=\\"/wiki/User_talk:Admin\\" title=\\"Your talk page [n]\\" accesskey=\\"n\\"><span class=\\"vector-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk\\"></span> <span>Talk</span></a></li>
 			<li id=\\"pt-sandbox\\" class=\\"new mw-list-item\\"><a href=\\"/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1\\" title=\\"Your sandbox (page does not exist)\\"><span class=\\"vector-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox\\"></span> <span>Sandbox</span></a></li>
-			<li id=\\"pt-preferences\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences\\" title=\\"Your preferences\\"><span class=\\"vector-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings\\"></span> <span>Preferences</span></a></li>
+			<li id=\\"pt-preferences\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences\\" title=\\"Your preferences\\"><span class=\\"vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance\\"></span> <span>Preferences</span></a></li>
 			<li id=\\"pt-betafeatures\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences#mw-prefsection-betafeatures\\" title=\\"Beta features\\"><span class=\\"vector-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask\\"></span> <span>Beta</span></a></li>
 			<li id=\\"pt-watchlist\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" title=\\"A list of pages you are monitoring for changes [l]\\" accesskey=\\"l\\"><span class=\\"vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\"></span> <span>Watchlist</span></a></li>
 			<li id=\\"pt-uploads\\" class=\\"mw-list-item\\"><a href=\\"/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1\\" title=\\"List of files you have uploaded\\"><span class=\\"vector-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery\\"></span> <span>Uploads</span></a></li>

tests/jest/userLinksData.js

@@ -52,7 +52,7 @@ const templateData = {
 			<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span class="vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span> <span>Admin</span></a></li>
 			<li id="pt-mytalk" class="mw-list-item"><a href="/wiki/User_talk:Admin" title="Your talk page [n]" accesskey="n"><span class="vector-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk"></span> <span>Talk</span></a></li>
 			<li id="pt-sandbox" class="new mw-list-item"><a href="/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1" title="Your sandbox (page does not exist)"><span class="vector-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox"></span> <span>Sandbox</span></a></li>
-			<li id="pt-preferences" class="mw-list-item"><a href="/wiki/Special:Preferences" title="Your preferences"><span class="vector-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings"></span> <span>Preferences</span></a></li>
+			<li id="pt-preferences" class="mw-list-item"><a href="/wiki/Special:Preferences" title="Your preferences"><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span>Preferences</span></a></li>
 			<li id="pt-betafeatures" class="mw-list-item"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span class="vector-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask"></span> <span>Beta</span></a></li>
 			<li id="pt-watchlist" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [l]" accesskey="l"><span class="vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist"></span> <span>Watchlist</span></a></li>
 			<li id="pt-uploads" class="mw-list-item"><a href="/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1" title="List of files you have uploaded"><span class="vector-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery"></span> <span>Uploads</span></a></li>