Use official SimpleX SVG symbol in contact links

Author: Bikram Gole

contact.html

@@ -74,7 +74,7 @@ <h2>Direct Links 🔗</h2>
         <a class="contact-item tilt" href="mailto:Bikramgole.genius@keemail.me">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
-              <svg viewBox="0 0 24 24" role="img" focusable="false">
+              <svg class="mono-icon" viewBox="0 0 24 24" role="img" focusable="false">
                 <path d="M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm9 7L4.8 8h14.4L12 13Z"/>
               </svg>
             </span>
@@ -85,7 +85,7 @@ <h3 class="contact-title">
         <a class="contact-item tilt" href="mailto:Develope.genius@gmail.com">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
-              <svg viewBox="0 0 24 24" role="img" focusable="false">
+              <svg class="mono-icon" viewBox="0 0 24 24" role="img" focusable="false">
                 <path d="M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm9 7L4.8 8h14.4L12 13Z"/>
               </svg>
             </span>
@@ -96,7 +96,7 @@ <h3 class="contact-title">
         <a class="contact-item tilt" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
-              <svg viewBox="0 0 24 24" role="img" focusable="false">
+              <svg class="mono-icon" viewBox="0 0 24 24" role="img" focusable="false">
                 <path d="M12 .5a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58v-2.2c-3.34.72-4.04-1.61-4.04-1.61a3.17 3.17 0 0 0-1.33-1.75c-1.08-.75.08-.74.08-.74a2.5 2.5 0 0 1 1.82 1.23 2.54 2.54 0 0 0 3.47 1 2.54 2.54 0 0 1 .76-1.59c-2.66-.3-5.47-1.33-5.47-5.92a4.63 4.63 0 0 1 1.24-3.22 4.3 4.3 0 0 1 .12-3.17s1.01-.32 3.3 1.23a11.4 11.4 0 0 1 6.01 0c2.28-1.55 3.3-1.23 3.3-1.23a4.3 4.3 0 0 1 .12 3.17 4.62 4.62 0 0 1 1.23 3.22c0 4.6-2.81 5.61-5.49 5.91a2.84 2.84 0 0 1 .81 2.2v3.27c0 .32.22.69.83.58A12 12 0 0 0 12 .5Z"/>
               </svg>
             </span>
@@ -107,7 +107,7 @@ <h3 class="contact-title">
         <a class="contact-item tilt" href="https://discord.com/users/1471849836931190945" target="_blank" rel="noopener noreferrer">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
-              <svg viewBox="0 0 24 24" role="img" focusable="false">
+              <svg class="mono-icon" viewBox="0 0 24 24" role="img" focusable="false">
                 <path d="M20.32 4.37A19.8 19.8 0 0 0 16.4 3.1a.07.07 0 0 0-.08.04c-.17.31-.37.73-.5 1.05a18.26 18.26 0 0 0-5.63 0c-.13-.32-.33-.74-.5-1.05a.07.07 0 0 0-.08-.04 19.74 19.74 0 0 0-3.93 1.27.06.06 0 0 0-.03.03C3.16 8.16 2.46 11.83 2.8 15.45a.08.08 0 0 0 .03.05 19.9 19.9 0 0 0 4.83 2.44.08.08 0 0 0 .09-.03c.38-.52.72-1.06 1.01-1.64a.08.08 0 0 0-.04-.11 13 13 0 0 1-1.55-.74.08.08 0 0 1-.01-.14c.1-.07.2-.15.3-.22a.07.07 0 0 1 .08-.01c3.26 1.5 6.79 1.5 10 0a.07.07 0 0 1 .09.01c.1.08.2.16.3.22a.08.08 0 0 1-.01.14c-.5.29-1.02.54-1.55.74a.08.08 0 0 0-.04.11c.3.58.63 1.12 1.01 1.64a.08.08 0 0 0 .09.03 19.84 19.84 0 0 0 4.84-2.44.08.08 0 0 0 .03-.05c.41-4.19-.68-7.83-2.85-11.05a.06.06 0 0 0-.03-.03ZM9.55 13.24c-.98 0-1.78-.9-1.78-2s.79-2 1.78-2c1 0 1.8.9 1.79 2 0 1.1-.79 2-1.79 2Zm4.9 0c-.98 0-1.78-.9-1.78-2s.79-2 1.78-2 1.8.9 1.79 2c0 1.1-.79 2-1.79 2Z"/>
               </svg>
             </span>
@@ -119,8 +119,19 @@ <h3 class="contact-title">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
               <svg viewBox="0 0 24 24" role="img" focusable="false">
-                <rect x="2.2" y="2.2" width="19.6" height="19.6" rx="6"/>
-                <path d="M8 8.6h7.5c.9 0 1.7.7 1.7 1.7S16.4 12 15.4 12h-6.8c-1 0-1.8.8-1.8 1.8S7.6 15.6 8.6 15.6H16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <g clip-path="url(#sxClip)">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.13863 6.06633L6.08626 10.0138L10.1445 5.95657L12.1177 7.92916L8.05926 11.9862L12.0074 15.9333L9.97913 17.9614L6.031 14.0143L1.9731 18.0715L0 16.0989L4.05845 12.0419L0.11081 8.09448L2.13863 6.06633Z" fill="#023789"/>
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.94745 18L11.9601 15.9875L11.9593 15.9869L15.9857 11.9628L12.0371 8.01663L12.0375 8.01624L10.0625 6.04177L6.11361 2.09393L8.12687 0.0814148L12.0758 4.02925L16.1011 0.00585938L18.0757 1.98032L14.0504 6.00392L17.999 9.95053L22.0252 5.92637L24 7.90084L19.9739 11.925L23.9238 15.873L21.9105 17.8855L17.9606 13.9375L13.9353 17.9615L17.8852 21.9097L15.8719 23.9222L11.922 19.974L7.89749 23.998L5.92291 22.0235L9.94745 18Z" fill="url(#sxGradient)"/>
+                </g>
+                <defs>
+                  <linearGradient id="sxGradient" x1="9.061" y1="-0.49" x2="6.736" y2="22.188" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#01F1FF"/>
+                    <stop offset="1" stop-color="#0197FF"/>
+                  </linearGradient>
+                  <clipPath id="sxClip">
+                    <rect width="24" height="24" fill="white"/>
+                  </clipPath>
+                </defs>
               </svg>
             </span>
             SimpleX

styles.css

@@ -1923,9 +1923,12 @@ kbd {
 }
 
 .contact-logo svg {
-  width: 0.72rem;
-  height: 0.72rem;
+  width: 0.78rem;
+  height: 0.78rem;
   display: block;
+}
+
+.contact-logo svg.mono-icon {
   fill: currentColor;
 }