update icons

taikoxyz · Oct 24, 2023 · 61b194f · 61b194f
1 parent ad16ed8
commit 61b194f
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 27 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -37,15 +37,17 @@
 
 <script lang="ts">
   export let type: IconType;
-  export let size = 20;
-  export let width = size;
-  export let height = size;
-  export let minX = 0;
-  export let minY = 0;
-  export let vWidth = width;
-  export let vHeight = height;
-  export let viewBox = `${minX} ${minY} ${vWidth} ${vHeight}`;
+  export let size = 20; // Default size
+  export let width: number = size; // You can now pass width and height as props, or they will default to size
+  export let height: number = size;
   export let fillClass = 'fill-primary-icon';
+
+  // Fixed viewBox
+  const minX = 0;
+  const minY = 0;
+  const vWidth = 20;
+  const vHeight = 20;
+  const viewBox = `${minX} ${minY} ${vWidth} ${vHeight}`;
 </script>
 
 <svg {width} {height} class={$$props.class} {viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -223,30 +225,76 @@
   {:else if type === 'sun'}
     <path
       class={fillClass}
-      fill="none"
-      d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
-    ></path>
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m10,2c.41,0,.75.34.75.75v1.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-1.5c0-.41.34-.75.75-.75Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m10,15c.41,0,.75.34.75.75v1.5c0,.41-.34.75-.75.75s-.75-.34-.75-.75v-1.5c0-.41.34-.75.75-.75Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m10,7c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m15.66,5.4c.29-.29.29-.77,0-1.06-.29-.29-.77-.29-1.06,0l-1.06,1.06c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.06-1.06Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m6.46,14.6c.29-.29.29-.77,0-1.06-.29-.29-.77-.29-1.06,0l-1.06,1.06c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.06-1.06Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m18,10c0,.41-.34.75-.75.75h-1.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h1.5c.41,0,.75.34.75.75Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m5,10c0,.41-.34.75-.75.75h-1.5c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h1.5c.41,0,.75.34.75.75Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m14.6,15.66c.29.29.77.29,1.06,0s.29-.77,0-1.06l-1.06-1.06c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.06,1.06Z" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m5.4,6.46c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-1.06-1.06c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l1.06,1.06Z" />
   {:else if type === 'moon'}
     <path
       class={fillClass}
       fill="none"
-      d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
-    ></path>
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m7.67,1.93c.23.18.33.48.26.77-.14.55-.21,1.13-.21,1.73,0,3.87,3.13,7,7,7,1.14,0,2.22-.27,3.17-.76.26-.13.58-.1.81.08.23.18.33.48.26.77-.93,3.68-4.27,6.41-8.24,6.41-4.69,0-8.5-3.81-8.5-8.5,0-3.31,1.89-6.17,4.65-7.58.26-.13.58-.1.81.08Z" />
   {:else if type === 'list'}
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      transform="scale(0.8) translate(3, 3)"
-      d="M3.375 6.75C3.375 6.12868 3.87868 5.625 4.5 5.625C5.12132 5.625 5.625 6.12868 5.625 6.75C5.625 7.37132 5.12132 7.875 4.5 7.875C3.87868 7.875 3.375 7.37132 3.375 6.75ZM8.25 6.75C8.25 6.33579 8.58579 6 9 6H21C21.4142 6 21.75 6.33579 21.75 6.75C21.75 7.16421 21.4142 7.5 21 7.5H9C8.58579 7.5 8.25 7.16421 8.25 6.75ZM3.375 12C3.375 11.3787 3.87868 10.875 4.5 10.875C5.12132 10.875 5.625 11.3787 5.625 12C5.625 12.6213 5.12132 13.125 4.5 13.125C3.87868 13.125 3.375 12.6213 3.375 12ZM8.25 12C8.25 11.5858 8.58579 11.25 9 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H9C8.58579 12.75 8.25 12.4142 8.25 12ZM3.375 17.25C3.375 16.6287 3.87868 16.125 4.5 16.125C5.12132 16.125 5.625 16.6287 5.625 17.25C5.625 17.8713 5.12132 18.375 4.5 18.375C3.87868 18.375 3.375 17.8713 3.375 17.25ZM8.25 17.25C8.25 16.8358 8.58579 16.5 9 16.5H21C21.4142 16.5 21.75 16.8358 21.75 17.25C21.75 17.6642 21.4142 18 21 18H9C8.58579 18 8.25 17.6642 8.25 17.25Z"
+      d="m6.8,5.8c0-.33.27-.6.6-.6h8.4c.33,0,.6.27.6.6s-.27.6-.6.6H7.4c-.33,0-.6-.27-.6-.6Zm0,4.2c0-.33.27-.6.6-.6h8.4c.33,0,.6.27.6.6s-.27.6-.6.6H7.4c-.33,0-.6-.27-.6-.6Zm0,4.2c0-.33.27-.6.6-.6h8.4c.33,0,.6.27.6.6s-.27.6-.6.6H7.4c-.33,0-.6-.27-.6-.6Z"
+      fill="none" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m3.6,5.8c0-.44.36-.8.8-.8h0c.44,0,.8.36.8.8h0c0,.45-.36.81-.8.81h0c-.44,0-.8-.36-.8-.8h0Z"
+      fill="none" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m3.6,14.2c0-.44.36-.8.8-.8h0c.44,0,.8.36.8.8h0c0,.45-.36.81-.8.81h0c-.44,0-.8-.36-.8-.8h0Z"
+      fill="none" /><path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="m3.6,10c0-.44.36-.8.8-.8h0c.44,0,.8.36.8.8h0c0,.45-.36.81-.8.81h0c-.44,0-.8-.36-.8-.8h0Z"
       fill="none" />
   {:else if type === 'cards'}
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      transform="translate(6, 6)"
-      d="M2.4001 0.600098C1.40599 0.600098 0.600098 1.40599 0.600098 2.4001V4.4001C0.600098 5.39421 1.40599 6.2001 2.4001 6.2001H4.4001C5.39421 6.2001 6.2001 5.39421 6.2001 4.4001V2.4001C6.2001 1.40599 5.39421 0.600098 4.4001 0.600098H2.4001ZM2.4001 7.80034C1.40599 7.80034 0.600098 8.60623 0.600098 9.60034V11.6003C0.600098 12.5945 1.40599 13.4003 2.4001 13.4003H4.4001C5.39421 13.4003 6.2001 12.5945 6.2001 11.6003V9.60034C6.2001 8.60623 5.39421 7.80034 4.4001 7.80034H2.4001ZM9.60034 0.600098C8.60623 0.600098 7.80034 1.40599 7.80034 2.4001V4.4001C7.80034 5.39421 8.60623 6.2001 9.60034 6.2001H11.6003C12.5945 6.2001 13.4003 5.39421 13.4003 4.4001V2.4001C13.4003 1.40599 12.5945 0.600098 11.6003 0.600098H9.60034ZM9.60034 7.80034C8.60623 7.80034 7.80034 8.60623 7.80034 9.60034V11.6003C7.80034 12.5945 8.60623 13.4003 9.60034 13.4003H11.6003C12.5945 13.4003 13.4003 12.5945 13.4003 11.6003V9.60034C13.4003 8.60623 12.5945 7.80034 11.6003 7.80034H9.60034Z"
+      d="m5.4,3.6c-.99,0-1.8.81-1.8,1.8v2c0,.99.81,1.8,1.8,1.8h2c.99,0,1.8-.81,1.8-1.8v-2c0-.99-.81-1.8-1.8-1.8h-2Zm0,7.2c-.99,0-1.8.81-1.8,1.8v2c0,.99.81,1.8,1.8,1.8h2c.99,0,1.8-.81,1.8-1.8v-2c0-.99-.81-1.8-1.8-1.8h-2Zm7.2-7.2c-.99,0-1.8.81-1.8,1.8v2c0,.99.81,1.8,1.8,1.8h2c.99,0,1.8-.81,1.8-1.8v-2c0-.99-.81-1.8-1.8-1.8h-2Zm0,7.2c-.99,0-1.8.81-1.8,1.8v2c0,.99.81,1.8,1.8,1.8h2c.99,0,1.8-.81,1.8-1.8v-2c0-.99-.81-1.8-1.8-1.8h-2Z"
       fill="none" />
   {:else if type === 'magnifier'}
     <path
@@ -260,28 +308,28 @@
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M10.2502 8.13886C9.62122 10.4861 7.20854 11.8791 4.86129 11.2501C4.08607 11.0424 3.41644 10.6411 2.88866 10.1123L2.63943 9.86311L4.58601 9.86276C4.91738 9.8627 5.18596 9.59402 5.18591 9.26265C5.18585 8.93128 4.91717 8.6627 4.5858 8.66276L1.19105 8.66337C1.03192 8.6634 0.879316 8.72664 0.766813 8.83919C0.654311 8.95173 0.591126 9.10436 0.59116 9.2635L0.591873 12.657C0.591943 12.9883 0.860629 13.2569 1.192 13.2568C1.52337 13.2568 1.79194 12.9881 1.79187 12.6567L1.79146 10.7122L2.03935 10.9601C2.71217 11.6341 3.56632 12.1455 4.5507 12.4092C7.53811 13.2097 10.6088 11.4369 11.4093 8.44944C11.495 8.12936 11.3051 7.80036 10.985 7.7146C10.6649 7.62883 10.3359 7.81878 10.2502 8.13886ZM11.2333 5.16095C11.3458 5.04841 11.409 4.89577 11.409 4.73662L11.4084 1.34307C11.4084 1.0117 11.1397 0.74311 10.8083 0.743164C10.477 0.743219 10.2084 1.01189 10.2084 1.34326L10.2088 3.28796L9.96091 3.04011C9.28811 2.36617 8.43377 1.85461 7.44948 1.59087C4.46207 0.790397 1.39138 2.56326 0.590906 5.55067C0.505141 5.87075 0.69509 6.19975 1.01517 6.28552C1.33525 6.37128 1.66425 6.18133 1.75002 5.86125C2.37896 3.514 4.79164 2.12104 7.13889 2.74998C7.91414 2.95771 8.5838 3.35905 9.11158 3.88783L9.36047 4.13672L7.41489 4.13672C7.08352 4.13672 6.81489 4.40535 6.81489 4.73672C6.81489 5.06809 7.08352 5.33672 7.41489 5.33672H10.809C10.9681 5.33672 11.1208 5.27349 11.2333 5.16095Z"
+      d="m16.8,11.84c-1,3.75-4.86,5.97-8.6,4.97-1.24-.33-2.31-.97-3.15-1.82l-.4-.4h3.11c.53,0,.96-.43.96-.96,0-.53-.43-.96-.96-.96H2.34c-.25,0-.5.1-.68.28-.18.18-.28.42-.28.68v5.42c0,.53.43.96.96.96.53,0,.96-.43.96-.96v-3.1s.4.4.4.4c1.07,1.08,2.44,1.89,4.01,2.31,4.77,1.28,9.67-1.55,10.95-6.32.14-.51-.17-1.04-.68-1.17-.51-.14-1.04.17-1.17.68Zm1.57-4.75c.18-.18.28-.42.28-.68V.98c0-.53-.43-.96-.96-.96-.53,0-.96.43-.96.96v3.1s-.4-.4-.4-.4c-1.07-1.08-2.44-1.89-4.01-2.31C7.56.1,2.66,2.93,1.38,7.7c-.14.51.17,1.04.68,1.17.51.14,1.04-.17,1.17-.68,1-3.75,4.86-5.97,8.6-4.97,1.24.33,2.31.97,3.15,1.82l.4.4h-3.11c-.53,0-.96.43-.96.96s.43.96.96.96h5.42c.25,0,.5-.1.68-.28Z"
       fill="none" />
   {:else if (type = 'option-dots')}
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      transform="translate(17)"
+      transform="translate(17,2)"
       d="M2 0C2.82843 0 3.5 0.671573 3.5 1.5C3.5 2.32843 2.82843 3 2 3C1.17157 3 0.5 2.32843 0.5 1.5C0.5 0.671573 1.17157 0 2 0Z"
       fill="none" />
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      transform="translate(17)"
+      transform="translate(17,2)"
       d="M2 5.5C2.82843 5.5 3.5 6.17157 3.5 7C3.5 7.82843 2.82843 8.5 2 8.5C1.17157 8.5 0.5 7.82843 0.5 7C0.5 6.17157 1.17157 5.5 2 5.5Z"
       fill="none" />
     <path
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      transform="translate(17)"
+      transform="translate(17,2)"
       d="M3.5 12.5C3.5 11.6716 2.82843 11 2 11C1.17157 11 0.5 11.6716 0.5 12.5C0.5 13.3284 1.17157 14 2 14C2.82843 14 3.5 13.3284 3.5 12.5Z"
       fill="none" />
   {/if}

diff --git a/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte b/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
@@ -7,6 +7,8 @@
   export let iconType1: IconType;
   export let iconType2: IconType;
 
+  export let size: number = 20;
+
   export let selectedDefault: IconType = iconType1;
 
   const dispatch = createEventDispatcher();
@@ -23,6 +25,6 @@
 
 <div role="button" tabindex="0" class={classes} on:click={handleLabelClick} on:keypress={handleLabelClick}>
   <input type="checkbox" class="border-none" bind:checked={isDefault} />
-  <Icon type={iconType1} class="fill-primary-icon swap-on" width={25} height={25} vHeight={25} vWidth={25} />
-  <Icon type={iconType2} class="fill-primary-icon swap-off" width={25} height={25} vHeight={25} vWidth={25} />
+  <Icon type={iconType1} class="fill-primary-icon swap-on" {size} />
+  <Icon type={iconType2} class="fill-primary-icon swap-off" {size} />
 </div>
diff --git a/packages/bridge-ui-v2/src/components/Icon/RotatingIcon.svelte b/packages/bridge-ui-v2/src/components/Icon/RotatingIcon.svelte
@@ -3,11 +3,10 @@
   export let loading: boolean;
   export let type: IconType;
   export let size: number = 20;
-  export let viewBox: string;
 </script>
 
 <div class={loading ? 'rotating' : ''}>
-  <Icon {type} {size} {viewBox} />
+  <Icon {type} {size} />
 </div>
 
 <style>

diff --git a/packages/bridge-ui-v2/src/components/ThemeButton/ThemeButton.svelte b/packages/bridge-ui-v2/src/components/ThemeButton/ThemeButton.svelte
@@ -25,6 +25,6 @@
 
 <label class="swap swap-rotate">
   <input type="checkbox" class="border-none" bind:checked={isDarkTheme} on:change={switchTheme} />
-  <Icon type="sun" class="fill-primary-icon swap-on" width={25} height={25} vHeight={25} vWidth={25} />
-  <Icon type="moon" class="fill-primary-icon swap-off" width={25} height={25} vHeight={25} vWidth={25} />
+  <Icon type="sun" class="fill-primary-icon swap-on " size={25} />
+  <Icon type="moon" class="fill-primary-icon swap-off" size={25} />
 </label>