From 08b029abeedaeedc690f01497627b6220c118080 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 26 Feb 2025 18:10:28 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20Update=20all=20svgs=20prop?=
 =?UTF-8?q?erties=20+=20update=20``size``=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icons/angularIcon.svelte      | 29 ++++-----
 src/components/icons/githubIcon.svelte       |  8 +--
 src/components/icons/logo.svelte             |  8 +--
 src/components/icons/raycastIcon.svelte      | 11 ++--
 src/components/icons/reactIcon.svelte        | 28 ++++++---
 src/components/icons/svelteIcon.svelte       | 10 +--
 src/components/icons/vueIcon.svelte          | 20 +++---
 src/components/icons/webComponentIcon.svelte | 64 ++++----------------
 src/components/icons/xIcon.svelte            |  9 +--
 src/types/icon.ts                            |  2 +-
 10 files changed, 73 insertions(+), 116 deletions(-)

diff --git a/src/components/icons/angularIcon.svelte b/src/components/icons/angularIcon.svelte
index 1af071e..ca36b3c 100644
--- a/src/components/icons/angularIcon.svelte
+++ b/src/components/icons/angularIcon.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  width={iconSize || 16}
+  height={iconSize || 16}
   viewBox="0 0 242 256"
   ><g clip-path="url(#a)"
     ><mask
@@ -27,25 +27,22 @@
         d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z"
       /></g
     ></g
-  ><defs>
-    <linearGradient id="c" x1="53.2" x2="245" y1="231.9" y2="140.7" gradientUnits="userSpaceOnUse"
-      ><stop stop-color={iconProps.color || '#E40035'} /><stop
-        offset=".2"
-        stop-color={iconProps.color || '#F60A48'}
-      /><stop offset=".4" stop-color={iconProps.color || '#F20755'} /><stop
-        offset=".5"
-        stop-color={iconProps.color || '#DC087D'}
-      /><stop offset=".7" stop-color={iconProps.color || '#9717E7'} /><stop
+  ><defs
+    ><linearGradient id="c" x1="53.2" x2="245" y1="231.9" y2="140.7" gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#E40035" /><stop offset=".2" stop-color="#F60A48" /><stop
+        offset=".4"
+        stop-color="#F20755"
+      /><stop offset=".5" stop-color="#DC087D" /><stop offset=".7" stop-color="#9717E7" /><stop
         offset="1"
-        stop-color={iconProps.color || '#6C00F5'}
+        stop-color="#6C00F5"
       /></linearGradient
     >
     <linearGradient id="d" x1="44.5" x2="170" y1="30.7" y2="174" gradientUnits="userSpaceOnUse">
-      <stop stop-color={iconProps.color || '#FF31D9'} /><stop
+      <stop stop-color="#FF31D9" /><stop
         offset="1"
-        stop-color={iconProps.color || '#FF5BE1'}
+        stop-color="#FF5BE1"
         stop-opacity="0"
       /></linearGradient
-    ><clipPath id="a"><path fill={iconProps.color || '#fff'} d="M0 0h242v256H0z" /></clipPath></defs
+    ><clipPath id="a"><path fill="#fff" d="M0 0h242v256H0z" /></clipPath></defs
   ></svg
 >
diff --git a/src/components/icons/githubIcon.svelte b/src/components/icons/githubIcon.svelte
index 8a7a881..8e8dc00 100644
--- a/src/components/icons/githubIcon.svelte
+++ b/src/components/icons/githubIcon.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
 <svg
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  width={iconSize || 16}
+  height={iconSize || 16}
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   preserveAspectRatio="xMidYMid"
   viewBox="0 0 256 256"
   ><path
     d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"
-    fill={iconProps.color || 'currentColor'}
+    fill="currentColor"
   />
 </svg>
diff --git a/src/components/icons/logo.svelte b/src/components/icons/logo.svelte
index a9e2ced..01fe489 100644
--- a/src/components/icons/logo.svelte
+++ b/src/components/icons/logo.svelte
@@ -1,11 +1,5 @@
-<script lang="ts">
-  import type { IconProps } from '@/types/icon';
-
-  export let iconProps: IconProps;
-</script>
-
 <svg
-  width={iconProps.size}
+  width="30"
   name="SVGL Logo"
   viewBox="0 0 512 512"
   fill="none"
diff --git a/src/components/icons/raycastIcon.svelte b/src/components/icons/raycastIcon.svelte
index 6c7ad1c..5b5a2df 100644
--- a/src/components/icons/raycastIcon.svelte
+++ b/src/components/icons/raycastIcon.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
+  export let className: IconProps['className'];
 </script>
 
 <svg
-  width={iconProps.size || 28}
-  height={iconProps.size || 28}
-  class={iconProps.className}
+  width={iconSize || 28}
+  height={iconSize || 28}
+  class={className}
   viewBox="0 0 28 28"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
@@ -16,6 +17,6 @@
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M7 18.079V21L0 14L1.46 12.54L7 18.081V18.079ZM9.921 21H7L14 28L15.46 26.54L9.921 21ZM26.535 15.462L27.996 14L13.996 0L12.538 1.466L18.077 7.004H14.73L10.864 3.146L9.404 4.606L11.809 7.01H10.129V17.876H20.994V16.196L23.399 18.6L24.859 17.14L20.994 13.274V9.927L26.535 15.462ZM7.73 6.276L6.265 7.738L7.833 9.304L9.294 7.844L7.73 6.276ZM20.162 18.708L18.702 20.17L20.268 21.738L21.73 20.276L20.162 18.708ZM4.596 9.41L3.134 10.872L7 14.738V11.815L4.596 9.41ZM16.192 21.006H13.268L17.134 24.872L18.596 23.41L16.192 21.006Z"
-    fill={iconProps.color || '#FF6363'}
+    fill="#FF6363"
   />
 </svg>
diff --git a/src/components/icons/reactIcon.svelte b/src/components/icons/reactIcon.svelte
index d638238..0d72163 100644
--- a/src/components/icons/reactIcon.svelte
+++ b/src/components/icons/reactIcon.svelte
@@ -1,17 +1,27 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
 <svg
-  viewBox="0 0 256 228"
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  viewBox="0 0 569 512"
+  version="1.1"
+  width={iconSize || 16}
+  height={iconSize || 16}
   xmlns="http://www.w3.org/2000/svg"
-  preserveAspectRatio="xMidYMid"
-  ><path
-    d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621 6.238-30.281 2.16-54.676-11.769-62.708-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848 155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233 50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165 167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266 13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923 168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586 13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488 29.348-9.723 48.443-25.443 48.443-41.52 0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345-3.24-10.257-7.612-21.163-12.963-32.432 5.106-11 9.31-21.767 12.459-31.957 2.619.758 5.16 1.557 7.61 2.4 23.69 8.156 38.14 20.213 38.14 29.504 0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787-1.524 8.219-4.59 13.698-8.382 15.893-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246 12.376-1.098 24.068-2.894 34.671-5.345.522 2.107.986 4.173 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994 7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863-6.35-5.437-9.555-10.836-9.555-15.216 0-9.322 13.897-21.212 37.076-29.293 2.813-.98 5.757-1.905 8.812-2.773 3.204 10.42 7.406 21.315 12.477 32.332-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789 8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152 7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793 2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433 4.902.192 9.899.29 14.978.29 5.218 0 10.376-.117 15.453-.343-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026 347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815 329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627 310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695 358.489 358.489 0 0 1 11.036 20.54 329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026-.344 1.668-.73 3.367-1.15 5.09-10.622-2.452-22.155-4.275-34.23-5.408-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86-22.86-10.235-22.86-22.86 10.235-22.86 22.86-22.86Z"
-    fill={iconProps.color || 'currentColor'}
-  />
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <g fill="none" fill-rule="evenodd">
+    <g fill="#087EA4" fill-rule="nonzero">
+      <path
+        d="M285.5,201 C255.400481,201 231,225.400481 231,255.5 C231,285.599519 255.400481,310 285.5,310 C315.599519,310 340,285.599519 340,255.5 C340,225.400481 315.599519,201 285.5,201"
+        id="Path"
+      ></path>
+      <path
+        d="M568.959856,255.99437 C568.959856,213.207656 529.337802,175.68144 466.251623,150.985214 C467.094645,145.423543 467.85738,139.922107 468.399323,134.521063 C474.621631,73.0415145 459.808523,28.6686204 426.709856,9.5541429 C389.677085,-11.8291748 337.36955,3.69129898 284.479928,46.0162134 C231.590306,3.69129898 179.282771,-11.8291748 142.25,9.5541429 C109.151333,28.6686204 94.3382249,73.0415145 100.560533,134.521063 C101.102476,139.922107 101.845139,145.443621 102.708233,151.02537 C97.4493791,153.033193 92.2908847,155.161486 87.3331099,157.39017 C31.0111824,182.708821 0,217.765415 0,255.99437 C0,298.781084 39.6220545,336.307301 102.708233,361.003527 C101.845139,366.565197 101.102476,372.066633 100.560533,377.467678 C94.3382249,438.947226 109.151333,483.32012 142.25,502.434597 C153.629683,508.887578 166.52439,512.186771 179.603923,511.991836 C210.956328,511.991836 247.567589,495.487529 284.479928,465.972527 C321.372196,495.487529 358.003528,511.991836 389.396077,511.991836 C402.475265,512.183856 415.36922,508.884856 426.75,502.434597 C459.848667,483.32012 474.661775,438.947226 468.439467,377.467678 C467.897524,372.066633 467.134789,366.565197 466.291767,361.003527 C529.377946,336.347457 569,298.761006 569,255.99437 M389.155214,27.1025182 C397.565154,26.899606 405.877839,28.9368502 413.241569,33.0055186 C436.223966,46.2772304 446.540955,82.2775015 441.522965,131.770345 C441.181741,135.143488 440.780302,138.556788 440.298575,141.990165 C414.066922,134.08804 387.205771,128.452154 360.010724,125.144528 C343.525021,103.224055 325.192524,82.7564475 305.214266,63.9661533 C336.586743,39.7116483 366.032313,27.1025182 389.135142,27.1025182 M378.356498,310.205598 C368.204912,327.830733 357.150626,344.919965 345.237759,361.405091 C325.045049,363.479997 304.758818,364.51205 284.459856,364.497299 C264.167589,364.51136 243.888075,363.479308 223.702025,361.405091 C211.820914,344.919381 200.80007,327.83006 190.683646,310.205598 C180.532593,292.629285 171.306974,274.534187 163.044553,255.99437 C171.306974,237.454554 180.532593,219.359455 190.683646,201.783142 C200.784121,184.229367 211.770999,167.201087 223.601665,150.764353 C243.824636,148.63809 264.145559,147.579168 284.479928,147.591877 C304.772146,147.579725 325.051559,148.611772 345.237759,150.68404 C357.109048,167.14607 368.136094,184.201112 378.27621,201.783142 C388.419418,219.363718 397.644825,237.458403 405.915303,255.99437 C397.644825,274.530337 388.419418,292.625022 378.27621,310.205598 M419.724813,290.127366 C426.09516,307.503536 431.324985,325.277083 435.380944,343.334682 C417.779633,348.823635 399.836793,353.149774 381.668372,356.285142 C388.573127,345.871232 395.263781,335.035679 401.740334,323.778483 C408.143291,312.655143 414.144807,301.431411 419.805101,290.207679 M246.363271,390.377981 C258.848032,391.140954 271.593728,391.582675 284.5,391.582675 C297.406272,391.582675 310.232256,391.140954 322.737089,390.377981 C310.880643,404.583418 298.10766,417.997563 284.5,430.534446 C270.921643,417.999548 258.18192,404.585125 246.363271,390.377981 Z M187.311556,356.244986 C169.137286,353.123646 151.187726,348.810918 133.578912,343.334682 C137.618549,325.305649 142.828222,307.559058 149.174827,290.207679 C154.754833,301.431411 160.736278,312.655143 167.239594,323.778483 C173.74291,334.901824 180.467017,345.864539 187.311556,356.285142 M149.174827,221.760984 C142.850954,204.473938 137.654787,186.794745 133.619056,168.834762 C151.18418,163.352378 169.085653,159.013101 187.211197,155.844146 C180.346585,166.224592 173.622478,176.986525 167.139234,188.210257 C160.65599,199.433989 154.734761,210.517173 149.074467,221.760984 M322.616657,121.590681 C310.131896,120.827708 297.3862,120.385987 284.379568,120.385987 C271.479987,120.385987 258.767744,120.787552 246.242839,121.590681 C258.061488,107.383537 270.801211,93.9691137 284.379568,81.4342157 C297.99241,93.9658277 310.765727,107.380324 322.616657,121.590681 Z M401.70019,188.210257 C395.196875,176.939676 388.472767,166.09743 381.527868,155.68352 C399.744224,158.819049 417.734224,163.151949 435.380944,168.654058 C431.331963,186.680673 426.122466,204.426664 419.785029,221.781062 C414.205023,210.55733 408.203506,199.333598 401.720262,188.230335 M127.517179,131.790423 C122.438973,82.3176579 132.816178,46.2973086 155.778503,33.0255968 C163.144699,28.9632474 171.455651,26.9264282 179.864858,27.1225964 C202.967687,27.1225964 232.413257,39.7317265 263.785734,63.9862316 C243.794133,82.7898734 225.448298,103.270812 208.949132,125.204763 C181.761691,128.528025 154.90355,134.14313 128.661281,141.990165 C128.199626,138.556788 127.778115,135.163566 127.456963,131.790423 M98.4529773,182.106474 C101.54406,180.767925 104.695358,179.429376 107.906872,178.090828 C114.220532,204.735668 122.781793,230.7969 133.498624,255.99437 C122.761529,281.241316 114.193296,307.357063 107.8868,334.058539 C56.7434387,313.076786 27.0971497,284.003505 27.0971497,255.99437 C27.0971497,229.450947 53.1907013,202.526037 98.4529773,182.106474 Z M155.778503,478.963143 C132.816178,465.691432 122.438973,429.671082 127.517179,380.198317 C127.838331,376.825174 128.259842,373.431953 128.721497,369.978497 C154.953686,377.878517 181.814655,383.514365 209.009348,386.824134 C225.500295,408.752719 243.832321,429.233234 263.805806,448.042665 C220.069,481.834331 180.105722,492.97775 155.838719,478.963143 M441.502893,380.198317 C446.520883,429.691161 436.203894,465.691432 413.221497,478.963143 C388.974566,493.017906 348.991216,481.834331 305.274481,448.042665 C325.241364,429.232737 343.566681,408.752215 360.050868,386.824134 C387.245915,383.516508 414.107066,377.880622 440.338719,369.978497 C440.820446,373.431953 441.221885,376.825174 441.563109,380.198317 M461.193488,334.018382 C454.869166,307.332523 446.294494,281.231049 435.561592,255.99437 C446.289797,230.744081 454.857778,204.629101 461.173416,177.930202 C512.216417,198.911955 541.942994,227.985236 541.942994,255.99437 C541.942994,284.003505 512.296705,313.076786 461.153344,334.058539"
+        id="Shape"
+      ></path>
+    </g>
+  </g>
 </svg>
diff --git a/src/components/icons/svelteIcon.svelte b/src/components/icons/svelteIcon.svelte
index 3bd7601..f6d97d5 100644
--- a/src/components/icons/svelteIcon.svelte
+++ b/src/components/icons/svelteIcon.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  width={iconSize || 16}
+  height={iconSize || 16}
   viewBox="0 0 256 308"
   ><path
-    fill={iconProps.color || '#FF3E00'}
+    fill="#FF3E00"
     d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.2 82.2 0 0 0-37.135 55.056a86.57 86.57 0 0 0 8.536 55.576a82.4 82.4 0 0 0-12.296 30.719a87.6 87.6 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.18 82.18 0 0 0 37.135-55.057a86.6 86.6 0 0 0-8.53-55.577a82.4 82.4 0 0 0 12.29-30.718a87.57 87.57 0 0 0-14.963-66.244"
   /><path
-    fill={iconProps.color || '#FFF'}
+    fill="#FFF"
     d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.7 52.7 0 0 1-9.003-39.85a50 50 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.5 92.5 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.07 16.07 0 0 0 2.89 10.656a17.14 17.14 0 0 0 18.397 6.828a15.8 15.8 0 0 0 4.403-1.935l71.67-45.672a14.92 14.92 0 0 0 6.734-9.977a15.92 15.92 0 0 0-2.713-12.011a17.16 17.16 0 0 0-18.404-6.832a15.8 15.8 0 0 0-4.396 1.933l-27.35 17.434a52.3 52.3 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.68 52.68 0 0 1-9.004-39.849a49.43 49.43 0 0 1 22.34-33.114l71.664-45.677a52.2 52.2 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.7 52.7 0 0 1 9.004 39.85a51 51 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.4 92.4 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.1 16.1 0 0 0-2.89-10.656a17.14 17.14 0 0 0-18.398-6.828a15.8 15.8 0 0 0-4.402 1.935l-71.67 45.674a14.9 14.9 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.16 17.16 0 0 0 18.404 6.832a15.8 15.8 0 0 0 4.402-1.935l27.345-17.427a52.2 52.2 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.68 52.68 0 0 1 9.003 39.848a49.45 49.45 0 0 1-22.34 33.12l-71.664 45.673a52.2 52.2 0 0 1-14.563 6.398"
   /></svg
 >
diff --git a/src/components/icons/vueIcon.svelte b/src/components/icons/vueIcon.svelte
index 6be7230..8748349 100644
--- a/src/components/icons/vueIcon.svelte
+++ b/src/components/icons/vueIcon.svelte
@@ -1,22 +1,16 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  width={iconSize || 16}
+  height={iconSize || 16}
   viewBox="0 0 256 221"
-  ><path
-    fill={iconProps.color || '#41B883'}
-    d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z"
-  /><path
-    fill={iconProps.color || '#41B883'}
+  ><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z" /><path
+    fill="#41B883"
     d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z"
-  /><path
-    fill={iconProps.color || '#35495E'}
-    d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z"
-  />
-</svg>
+  /><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z" /></svg
+>
diff --git a/src/components/icons/webComponentIcon.svelte b/src/components/icons/webComponentIcon.svelte
index c05ddb7..5f2e920 100644
--- a/src/components/icons/webComponentIcon.svelte
+++ b/src/components/icons/webComponentIcon.svelte
@@ -1,58 +1,18 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let iconSize: IconProps['size'];
 </script>
 
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={iconProps.size}
-  height={iconProps.size}
-  viewBox="0 0 200 161"
->
-  <defs
-    ><linearGradient
-      id="a"
-      x1="48.9"
-      x2="127.1"
-      y1="40"
-      y2="40"
-      gradientTransform="scale(1.25056 .79964)"
-      gradientUnits="userSpaceOnUse"
-      ><stop offset="0" stop-color={iconProps.color || '#2a3b8f'} /><stop
-        offset="1"
-        stop-color={iconProps.color || '#29abe2'}
-      /></linearGradient
-    ><linearGradient
-      id="b"
-      x1="126.9"
-      x2="48.7"
-      y1="124.8"
-      y2="124.8"
-      gradientTransform="scale(1.2532 .79796)"
-      gradientUnits="userSpaceOnUse"
-      ><stop offset="0" stop-color={iconProps.color || '#b4d44e'} /><stop
-        offset="1"
-        stop-color={iconProps.color || '#e7f716'}
-      /></linearGradient
-    ></defs
-  ><g fill="none" fill-rule="evenodd" stroke-width=".3"
-    ><path fill={iconProps.color || '#166da5'} d="m197 80.2-21.4 36-30-36.5 30-35.6z" /><path
-      fill={iconProps.color || '#8fdb69'}
-      d="m173.3 122.4-32.6-39L121 116l30.4 44.4z"
-    /><path fill={iconProps.color || '#166da5'} d="m172.9 37.8-32.2 39L121 44.2l30.5-44z" /><path
-      fill="url(#a)"
-      d="M61.1 31.4H141L123.4.7H78.7zm53.7 31.9H159l-15.9-26.8H98.8"
-      opacity=".9"
-      transform="translate(-.5 -.9) scale(1.22972)"
-    /><path
-      fill="url(#b)"
-      d="M141.3 100.3H61l17.6 30.5h45zm-26.5-31.9H159l-15.9 26.8H98.8"
-      opacity=".9"
-      transform="translate(-.5 -.9) scale(1.22972)"
-    /><path
-      fill={iconProps.color || '#010101'}
-      d="M96.2 160 49.9 80 96.8.2H46L0 80.1 46.1 160z"
-    /></g
-  >
+<svg viewBox="0 0 128 128" width={iconSize || 16} height={iconSize || 16}>
+  <path
+    fill="var(--bgcolor, #fff)"
+    d="m31 12-1 1L2 63l29 51h67l15-26v-2l14-23-15-24v-2L98 12H31zm21 30h21l13 21-13 21H52L40 63z"
+  />
+  <path fill="#166da5" d="m122 63-12 21-18-21 18-21z" />
+  <path fill="#8fdb69" d="M108 88 89 65 78 84l17 26z" />
+  <path fill="#166da5" d="M108 38 89 61 78 42l17-26z" />
+  <path d="M63 110 35 63l28-47H33L6 63l27 47z" />
+  <path fill="#287bbe" d="m50 38 13-22h32l13 22zm28 4h32l11 19H89z" />
+  <path fill="#ddf021" d="m50 88 13 22h32l13-22zm28-4h32l11-19H89z" />
 </svg>
diff --git a/src/components/icons/xIcon.svelte b/src/components/icons/xIcon.svelte
index cc302f4..d588180 100644
--- a/src/components/icons/xIcon.svelte
+++ b/src/components/icons/xIcon.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import type { IconProps } from '@/types/icon';
 
-  export let iconProps: IconProps;
+  export let size: IconProps['size'];
+  export let color: IconProps['color'];
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconProps.size || 16}
-  height={iconProps.size || 16}
+  width={size || 16}
+  height={size || 16}
   name="Twitter"
   fill="none"
   viewBox="0 0 1200 1227"
   ><path
-    fill={iconProps.color || 'currentColor'}
+    fill={color || 'currentColor'}
     d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
   />
 </svg>
diff --git a/src/types/icon.ts b/src/types/icon.ts
index 204bcb7..403b87c 100644
--- a/src/types/icon.ts
+++ b/src/types/icon.ts
@@ -1,5 +1,5 @@
 export interface IconProps {
-  size?: string;
+  size?: number;
   color?: string;
   className?: string;
 }