chore: update icons with consistent viewbox

getAlby · Oct 18, 2023 · fbd4326 · fbd4326
1 parent edc6c44
commit fbd4326
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 12 deletions.
diff --git a/src/components/icons/albyIcon.ts b/src/components/icons/albyIcon.ts
@@ -1,5 +1,7 @@
 import {svg} from 'lit';
 
+// WARNING: this icon is colored to work OK on both light and dark modes
+
 export const albyIcon = svg`<svg width="45" height="64" viewBox="0 0 45 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M32.9716 52.1905C38.5774 52.1905 41.1289 39.7778 41.1289 35.0713C41.1289 31.4029 38.5976 29.1797 35.2699 29.1797C31.9629 29.1797 29.2782 30.6017 29.2449 32.3627C29.2448 37.01 28.4268 52.1905 32.9716 52.1905Z" fill="white" stroke="black" stroke-width="1.66938"/>
 <path d="M12.4972 52.1905C6.89139 52.1905 4.33989 39.7778 4.33989 35.0713C4.33989 31.4029 6.87114 29.1797 10.1989 29.1797C13.5058 29.1797 16.1906 30.6017 16.2239 32.3627C16.224 37.01 17.0419 52.1905 12.4972 52.1905Z" fill="white" stroke="black" stroke-width="1.66938"/>

diff --git a/src/components/icons/albyLogo.ts b/src/components/icons/albyLogo.ts
@@ -1,5 +1,7 @@
 import {svg} from 'lit';
 
+// WARNING: this icon is colored to work OK on both light and dark modes
+
 export const albyLogo = svg`<svg width="49" height="24" viewBox="0 0 49 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 -my-4">
 <ellipse opacity="0.1" cx="7.70773" cy="21.5226" rx="3.4509" ry="0.637088" fill="black"/>
 <path d="M11.0342 18.4211C12.817 18.4211 13.6285 14.4735 13.6285 12.9767C13.6285 11.8101 12.8235 11.103 11.7652 11.103C10.7135 11.103 9.85965 11.5553 9.84905 12.1153C9.84902 13.5933 9.5889 18.4211 11.0342 18.4211Z" fill="white" stroke="currentColor" stroke-width="0.530907"/>

diff --git a/src/components/icons/backIcon.ts b/src/components/icons/backIcon.ts
@@ -1,6 +1,9 @@
 import {svg} from 'lit';
 
-export const backIcon = svg`<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8">
-<path d="M13.7929 16.5L10.1464 12.8536C9.95118 12.6583 9.95118 12.3417 10.1464 12.1464L13.7929 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+
+export const backIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2929 16L10.6464 12.3536C10.4512 12.1583 10.4512 11.8417 10.6464 11.6464L14.2929 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
diff --git a/src/components/icons/bcCircleIcon.ts b/src/components/icons/bcCircleIcon.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change primary color to "currentColor"
+
 export const bcCircleIcon = svg`<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4">
 <mask id="myMask">
 <path d="M14.4998 8.69342C13.5647 12.4434 9.76614 14.7256 6.01526 13.7905C2.26591 12.8555 -0.0165632 9.0572 0.918915 5.30741C1.85352 1.55696 5.6521 -0.725459 9.40188 0.209473C13.1525 1.1444 15.4348 4.94319 14.4998 8.69342Z" fill="white"/>

diff --git a/src/components/icons/bcConnectedIcon.ts b/src/components/icons/bcConnectedIcon.ts
@@ -1,7 +1,9 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+
 export const bcConnectedIcon = svg`
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-
 <path stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>`;
diff --git a/src/components/icons/bcIcon.ts b/src/components/icons/bcIcon.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+
 export const bcIcon = svg`
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M20.467 9.58364C20.8686 7.1131 19.0009 5.75862 16.4352 4.83834L17.3135 1.49591L15.279 0.961432L14.4238 4.21577C13.889 4.07528 13.3395 3.94217 12.7935 3.81025L13.6547 0.534467L11.6213 0L10.7424 3.34125C10.2995 3.23448 9.86483 3.12899 9.44296 3.01841L9.44542 3.00797L6.63962 2.26953L6.06909 4.44258C6.06909 4.44258 7.579 4.80879 7.54676 4.82989C8.37077 5.04672 8.51324 5.59562 8.48275 6.02896L7.48221 9.83672L7.47855 9.8512L6.07612 15.1853C5.97179 15.4351 5.71068 15.8086 5.13466 15.6583C5.15463 15.6882 3.65584 15.2692 3.65584 15.2692L2.61304 17.5927L5.26067 18.2884C5.55635 18.3665 5.84844 18.4466 6.13748 18.5259L6.13789 18.526L6.13977 18.5265L6.14124 18.5269C6.33241 18.5794 6.52226 18.6314 6.71093 18.6823L5.82337 22.063L7.85559 22.5975L8.73456 19.2527C9.28955 19.4109 9.8284 19.5573 10.3557 19.6953L9.47987 23.0244L11.5144 23.5589L12.4019 20.1846C15.8739 20.8873 18.4943 20.6548 19.6357 17.5209C20.5555 14.9976 19.6421 13.5238 17.8231 12.5473C19.1605 12.2567 20.1761 11.3922 20.467 9.58364ZM11.6527 8.12503L11.9298 7.06916C12.0589 6.57751 12.5621 6.28358 13.0537 6.41263C13.5454 6.54169 13.8393 7.04487 13.7103 7.53652L13.4331 8.59239L14.4889 8.86954C14.9805 8.99859 15.2744 9.50178 15.1454 9.99342C15.0163 10.4851 14.5131 10.779 14.0215 10.6499L12.9657 10.3728L12.6885 11.4287C12.5595 11.9204 12.0563 12.2143 11.5646 12.0852C11.073 11.9562 10.7791 11.453 10.9081 10.9613L11.1853 9.90544L10.1293 9.62823C9.63766 9.49917 9.34372 8.99599 9.47278 8.50434C9.60184 8.0127 10.105 7.71876 10.5967 7.84782L11.6527 8.12503ZM14.1402 13.004L13.863 14.0599L12.807 13.7827C12.3154 13.6536 11.8122 13.9476 11.6832 14.4392C11.5541 14.9309 11.848 15.4341 12.3397 15.5631L13.3957 15.8403L13.1185 16.8962C12.9894 17.3879 13.2834 17.891 13.775 18.0201C14.2667 18.1492 14.7699 17.8552 14.8989 17.3636L15.1761 16.3077L16.2319 16.5848C16.7235 16.7139 17.2267 16.42 17.3557 15.9283C17.4848 15.4367 17.1909 14.9335 16.6992 14.8044L15.6435 14.5273L15.9206 13.4714C16.0497 12.9798 15.7557 12.4766 15.2641 12.3475C14.7725 12.2185 14.2693 12.5124 14.1402 13.004Z" fill="currentColor"/>

diff --git a/src/components/icons/bcLogo.ts b/src/components/icons/bcLogo.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+
 export const bcLogo = svg`<svg width="116" height="14" viewBox="0 0 116 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.88623 4.23009C7.4526 4.23009 7.94227 4.33038 8.35525 4.53097C8.76823 4.73156 9.11041 5.00295 9.3818 5.34513C9.65319 5.68732 9.85378 6.0885 9.98357 6.54867C10.1134 7.00885 10.1783 7.50443 10.1783 8.0354C10.1783 8.84956 10.0249 9.62242 9.71809 10.354C9.4231 11.0737 9.01602 11.705 8.49685 12.2478C7.97767 12.7788 7.3641 13.2035 6.65614 13.5221C5.94817 13.8289 5.18121 13.9823 4.35525 13.9823C4.24905 13.9823 4.06026 13.9764 3.78888 13.9646C3.52929 13.9646 3.2284 13.941 2.88622 13.8938C2.54404 13.8466 2.17826 13.7758 1.78888 13.6814C1.41129 13.587 1.05141 13.4572 0.709229 13.292L3.77118 0.424778L6.51454 0L5.4172 4.56637C5.65318 4.46018 5.88917 4.37758 6.12516 4.31858C6.36115 4.25959 6.61484 4.23009 6.88623 4.23009ZM4.58534 11.8053C4.99832 11.8053 5.3877 11.705 5.75348 11.5044C6.11926 11.3038 6.43195 11.0384 6.69153 10.708C6.96292 10.3658 7.17531 9.9823 7.3287 9.55752C7.4821 9.13274 7.55879 8.69027 7.55879 8.23009C7.55879 7.66372 7.4644 7.22124 7.27561 6.90266C7.08681 6.58407 6.73873 6.42478 6.23136 6.42478C6.06616 6.42478 5.84788 6.45428 5.57649 6.51328C5.3169 6.57227 5.08091 6.69617 4.86852 6.88496L3.70038 11.7345C3.77118 11.7463 3.83018 11.7581 3.87737 11.7699C3.93637 11.7817 3.99537 11.7935 4.05436 11.8053C4.11336 11.8053 4.18416 11.8053 4.26675 11.8053C4.34935 11.8053 4.45554 11.8053 4.58534 11.8053Z" fill="currentColor"/>
 <path d="M13.1552 13.7345H10.5357L12.7481 4.42478H15.3853L13.1552 13.7345ZM14.4295 3.29204C14.0637 3.29204 13.7333 3.18584 13.4384 2.97345C13.1434 2.74926 12.9959 2.41298 12.9959 1.9646C12.9959 1.71681 13.0431 1.48673 13.1375 1.27434C13.2437 1.05015 13.3794 0.861357 13.5446 0.707964C13.7097 0.542772 13.8985 0.412979 14.1109 0.318584C14.3351 0.224189 14.5711 0.176991 14.8189 0.176991C15.1847 0.176991 15.5151 0.289086 15.81 0.513274C16.105 0.725664 16.2525 1.05605 16.2525 1.50442C16.2525 1.75221 16.1994 1.9882 16.0932 2.21239C15.9988 2.42478 15.869 2.61357 15.7038 2.77876C15.5387 2.93215 15.344 3.05605 15.1198 3.15044C14.9074 3.24484 14.6773 3.29204 14.4295 3.29204Z" fill="currentColor"/>

diff --git a/src/components/icons/crossIcon.ts b/src/components/icons/crossIcon.ts
@@ -1,7 +1,7 @@
 import {svg} from 'lit';
 
-export const crossIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-7 h-7">
-<path d="M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M18 6L6.00001 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-</svg>
-`;
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+export const crossIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.6665 7.16699L12.4998 12.0003M12.4998 12.0003L17.3332 16.8337M12.4998 12.0003L17.3332 7.16699M12.4998 12.0003L7.6665 16.8337" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>`;
diff --git a/src/components/icons/disconnectIcon.ts b/src/components/icons/disconnectIcon.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+// - add class="hover-right" to the second path for the arrow animation
 export const disconnectIcon = svg`
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M11.25 20.25H4.75C4.19772 20.25 3.75 19.8023 3.75 19.25L3.75 4.75C3.75 4.19772 4.19772 3.75 4.75 3.75L11.25 3.75" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>

diff --git a/src/components/icons/helpIcon.ts b/src/components/icons/helpIcon.ts
@@ -1,6 +1,10 @@
 import {svg} from 'lit';
 
-export const helpIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" class="w-5 h-5">
-  <path fill="currentColor" fill-rule="evenodd" d="M7 1.333a5.667 5.667 0 1 0 0 11.334A5.667 5.667 0 0 0 7 1.334ZM.333 7a6.667 6.667 0 1 1 13.334 0A6.667 6.667 0 0 1 .333 7Z" clip-rule="evenodd"/><path fill="currentColor" fill-rule="evenodd" d="M7.258 4.68c-.505-.035-.986.204-1.154.543a.5.5 0 0 1-.896-.445c.402-.808 1.344-1.149 2.118-1.096.401.027.816.161 1.14.444C8.8 4.42 9 4.843 9 5.361c0 .774-.523 1.232-.867 1.533l-.052.046c-.39.344-.58.548-.58.893a.5.5 0 0 1-1 0c0-.833.54-1.31.9-1.627.007-.006.013-.01.018-.016.41-.362.581-.537.581-.829 0-.242-.084-.387-.194-.483-.12-.106-.31-.182-.548-.198Z" clip-rule="evenodd"/>
-  <path fill="currentColor" d="M6.333 9.667a.667.667 0 1 1 1.334 0 .667.667 0 0 1-1.333 0Z"/>
-</svg>`;
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+export const helpIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.665 18.33C13.5404 18.3311 14.4074 18.1592 15.2162 17.8242C16.025 17.4892 16.7596 16.9977 17.3778 16.3778C17.9977 15.7596 18.4892 15.025 18.8242 14.2162C19.1592 13.4074 19.3311 12.5404 19.33 11.665C19.3311 10.7896 19.1592 9.92256 18.8242 9.11378C18.4892 8.305 17.9976 7.5704 17.3778 6.95218C16.7596 6.33235 16.025 5.84079 15.2162 5.50577C14.4074 5.17075 13.5404 4.99887 12.665 5.00001C11.7896 4.99889 10.9226 5.17078 10.1138 5.5058C9.305 5.84082 8.5704 6.33236 7.95218 6.95218C7.33236 7.5704 6.84082 8.305 6.5058 9.11378C6.17078 9.92256 5.99889 10.7896 6.00001 11.665C5.99887 12.5404 6.17075 13.4074 6.50577 14.2162C6.84079 15.025 7.33235 15.7596 7.95218 16.3778C8.5704 16.9976 9.305 17.4892 10.1138 17.8242C10.9226 18.1592 11.7896 18.3311 12.665 18.33Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12.6649 12.9149V11.9152C12.9615 11.9152 13.2515 11.8272 13.4981 11.6625C13.7447 11.4977 13.9369 11.2635 14.0504 10.9895C14.1639 10.7155 14.1936 10.4139 14.1357 10.123C14.0779 9.83215 13.935 9.56495 13.7253 9.35523C13.5156 9.14551 13.2484 9.00269 12.9575 8.94483C12.6666 8.88697 12.3651 8.91667 12.091 9.03017C11.817 9.14366 11.5828 9.33587 11.418 9.58247C11.2532 9.82908 11.1653 10.119 11.1653 10.4156" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6653 15.7497C12.8642 15.7497 13.055 15.6707 13.1956 15.5301C13.3363 15.3895 13.4153 15.1987 13.4153 14.9999C13.4153 14.801 13.3363 14.6103 13.1956 14.4696C13.055 14.329 12.8642 14.25 12.6653 14.25C12.4664 14.25 12.2756 14.329 12.135 14.4696C11.9943 14.6103 11.9153 14.801 11.9153 14.9999C11.9153 15.1987 11.9943 15.3895 12.135 15.5301C12.2756 15.6707 12.4664 15.7497 12.6653 15.7497Z" fill="currentColor"/>
+</svg>
+`;
diff --git a/src/components/icons/linkIcon.ts b/src/components/icons/linkIcon.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+// - add class="hover-right" to the second path for the arrow animation
 export const linkIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.5 6H6.1C5.53995 6 5.25992 6 5.04601 6.10899C4.85785 6.20487 4.70487 6.35785 4.60899 6.54601C4.5 6.75992 4.5 7.03995 4.5 7.6V18.4C4.5 18.9601 4.5 19.2401 4.60899 19.454C4.70487 19.6422 4.85785 19.7951 5.04601 19.891C5.25992 20 5.53995 20 6.1 20H16.9C17.4601 20 17.7401 20 17.954 19.891C18.1422 19.7951 18.2951 19.6422 18.391 19.454C18.5 19.2401 18.5 18.9601 18.5 18.4V15" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M14.5 4H20.5M20.5 4V10M20.5 4L11.5 13" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="hover-right-up"/>

diff --git a/src/components/icons/loadingIcon.ts b/src/components/icons/loadingIcon.ts
@@ -1,5 +1,9 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - add animate-spin class
+// - change all colors to "currentColor"
+
 export const loadingIcon = svg`
 <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>

diff --git a/src/components/icons/satIcon.ts b/src/components/icons/satIcon.ts
@@ -1,5 +1,8 @@
 import {svg} from 'lit';
 
+// WARNING: if replacing this icon make sure to:
+// - change all colors to "currentColor"
+
 export const satIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM8.69253 8.74209L16.3304 10.8053L16.6668 9.34348L9.02893 7.2803L8.69253 8.74209ZM14.2194 5.69235L13.8127 7.46639L12.3649 7.07388L12.7717 5.29984L14.2194 5.69235ZM11.2272 18.7L11.6352 16.9263L10.1872 16.535L9.77913 18.3087L11.2272 18.7ZM15.6482 13.7661L8.01124 11.6995L8.34708 10.2376L15.984 12.3042L15.6482 13.7661ZM7.33193 14.6559L14.9696 16.7197L15.3059 15.2579L7.66823 13.1941L7.33193 14.6559Z" fill="currentColor"/>
 </svg>`;