From 7ca846aade5bd0d78ab0072e809872a7687e81af Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 26 Feb 2025 17:29:28 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20Update=20all=20svgs=20icon?=
 =?UTF-8?q?s=20with=20new=20typescript=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icons/angularIcon.svelte      | 31 ++++++++++++--------
 src/components/icons/githubIcon.svelte       | 10 ++++---
 src/components/icons/logo.svelte             |  8 ++++-
 src/components/icons/raycastIcon.svelte      | 13 ++++----
 src/components/icons/reactIcon.svelte        | 11 +++----
 src/components/icons/svelteIcon.svelte       | 12 ++++----
 src/components/icons/vueIcon.svelte          | 22 +++++++++-----
 src/components/icons/webComponentIcon.svelte | 30 ++++++++++++-------
 src/components/icons/xIcon.svelte            | 10 ++++---
 src/types/icon.ts                            |  5 ++++
 10 files changed, 97 insertions(+), 55 deletions(-)
 create mode 100644 src/types/icon.ts

diff --git a/src/components/icons/angularIcon.svelte b/src/components/icons/angularIcon.svelte
index 361850a..1af071e 100644
--- a/src/components/icons/angularIcon.svelte
+++ b/src/components/icons/angularIcon.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 16}
   viewBox="0 0 242 256"
   ><g clip-path="url(#a)"
     ><mask
@@ -25,22 +27,25 @@
         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="#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
+  ><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
         offset="1"
-        stop-color="#6C00F5"
+        stop-color={iconProps.color || '#6C00F5'}
       /></linearGradient
     >
     <linearGradient id="d" x1="44.5" x2="170" y1="30.7" y2="174" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FF31D9" /><stop
+      <stop stop-color={iconProps.color || '#FF31D9'} /><stop
         offset="1"
-        stop-color="#FF5BE1"
+        stop-color={iconProps.color || '#FF5BE1'}
         stop-opacity="0"
       /></linearGradient
-    ><clipPath id="a"><path fill="#fff" d="M0 0h242v256H0z" /></clipPath></defs
+    ><clipPath id="a"><path fill={iconProps.color || '#fff'} d="M0 0h242v256H0z" /></clipPath></defs
   ></svg
 >
diff --git a/src/components/icons/githubIcon.svelte b/src/components/icons/githubIcon.svelte
index e6b08e2..8a7a881 100644
--- a/src/components/icons/githubIcon.svelte
+++ b/src/components/icons/githubIcon.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 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="currentColor"
+    fill={iconProps.color || 'currentColor'}
   />
 </svg>
diff --git a/src/components/icons/logo.svelte b/src/components/icons/logo.svelte
index 01fe489..a9e2ced 100644
--- a/src/components/icons/logo.svelte
+++ b/src/components/icons/logo.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
+</script>
+
 <svg
-  width="30"
+  width={iconProps.size}
   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 199b01a..6c7ad1c 100644
--- a/src/components/icons/raycastIcon.svelte
+++ b/src/components/icons/raycastIcon.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  export let iconSize: number;
-  export let className: string;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
-  width={iconSize || 28}
-  height={iconSize || 28}
-  class={className}
+  width={iconProps.size || 28}
+  height={iconProps.size || 28}
+  class={iconProps.className}
   viewBox="0 0 28 28"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
@@ -15,6 +16,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="#FF6363"
+    fill={iconProps.color || '#FF6363'}
   />
 </svg>
diff --git a/src/components/icons/reactIcon.svelte b/src/components/icons/reactIcon.svelte
index 4cf812a..d638238 100644
--- a/src/components/icons/reactIcon.svelte
+++ b/src/components/icons/reactIcon.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-  export let iconSize: number;
-  export let color: string;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
   viewBox="0 0 256 228"
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 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={color || 'currentColor'}
+    fill={iconProps.color || 'currentColor'}
   />
 </svg>
diff --git a/src/components/icons/svelteIcon.svelte b/src/components/icons/svelteIcon.svelte
index 35ed793..3bd7601 100644
--- a/src/components/icons/svelteIcon.svelte
+++ b/src/components/icons/svelteIcon.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 16}
   viewBox="0 0 256 308"
   ><path
-    fill="#FF3E00"
+    fill={iconProps.color || '#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="#FFF"
+    fill={iconProps.color || '#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 8a0ce10..6be7230 100644
--- a/src/components/icons/vueIcon.svelte
+++ b/src/components/icons/vueIcon.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 16}
   viewBox="0 0 256 221"
-  ><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z" /><path
-    fill="#41B883"
+  ><path
+    fill={iconProps.color || '#41B883'}
+    d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z"
+  /><path
+    fill={iconProps.color || '#41B883'}
     d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z"
-  /><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z" /></svg
->
+  /><path
+    fill={iconProps.color || '#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 2dfe008..c05ddb7 100644
--- a/src/components/icons/webComponentIcon.svelte
+++ b/src/components/icons/webComponentIcon.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" width={iconSize} height={iconSize} viewBox="0 0 200 161">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={iconProps.size}
+  height={iconProps.size}
+  viewBox="0 0 200 161"
+>
   <defs
     ><linearGradient
       id="a"
@@ -12,9 +19,9 @@
       y2="40"
       gradientTransform="scale(1.25056 .79964)"
       gradientUnits="userSpaceOnUse"
-      ><stop offset="0" stop-color="#2a3b8f" /><stop
+      ><stop offset="0" stop-color={iconProps.color || '#2a3b8f'} /><stop
         offset="1"
-        stop-color="#29abe2"
+        stop-color={iconProps.color || '#29abe2'}
       /></linearGradient
     ><linearGradient
       id="b"
@@ -24,16 +31,16 @@
       y2="124.8"
       gradientTransform="scale(1.2532 .79796)"
       gradientUnits="userSpaceOnUse"
-      ><stop offset="0" stop-color="#b4d44e" /><stop
+      ><stop offset="0" stop-color={iconProps.color || '#b4d44e'} /><stop
         offset="1"
-        stop-color="#e7f716"
+        stop-color={iconProps.color || '#e7f716'}
       /></linearGradient
     ></defs
   ><g fill="none" fill-rule="evenodd" stroke-width=".3"
-    ><path fill="#166da5" d="m197 80.2-21.4 36-30-36.5 30-35.6z" /><path
-      fill="#8fdb69"
+    ><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="#166da5" d="m172.9 37.8-32.2 39L121 44.2l30.5-44z" /><path
+    /><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"
@@ -43,6 +50,9 @@
       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="#010101" d="M96.2 160 49.9 80 96.8.2H46L0 80.1 46.1 160z" /></g
+    /><path
+      fill={iconProps.color || '#010101'}
+      d="M96.2 160 49.9 80 96.8.2H46L0 80.1 46.1 160z"
+    /></g
   >
 </svg>
diff --git a/src/components/icons/xIcon.svelte b/src/components/icons/xIcon.svelte
index a9ae23b..cc302f4 100644
--- a/src/components/icons/xIcon.svelte
+++ b/src/components/icons/xIcon.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-  export let iconSize: number;
+  import type { IconProps } from '@/types/icon';
+
+  export let iconProps: IconProps;
 </script>
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={iconSize || 16}
-  height={iconSize || 16}
+  width={iconProps.size || 16}
+  height={iconProps.size || 16}
   name="Twitter"
   fill="none"
   viewBox="0 0 1200 1227"
   ><path
-    fill="currentColor"
+    fill={iconProps.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
new file mode 100644
index 0000000..204bcb7
--- /dev/null
+++ b/src/types/icon.ts
@@ -0,0 +1,5 @@
+export interface IconProps {
+  size?: string;
+  color?: string;
+  className?: string;
+}