chromia 0.1.12 → 0.1.13

package/dist/icons/Plus02Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Plus02Icon">
       <path d="M12 6L12 18M18 12L6 12" stroke="url(#grad-Plus02Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Plus02Icon">
-      <path d="M12 6L12 18M18 12L6 12" stroke="currentColor"/>
+      <path d="M12 6L12 18M18 12L6 12" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/Plus03Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Plus03Icon">
       <path d="M12 7.19995L12 16.8M16.8 12L7.19995 12" stroke="url(#grad-Plus03Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Plus03Icon">
-      <path d="M12 7.19995L12 16.8M16.8 12L7.19995 12" stroke="currentColor"/>
+      <path d="M12 7.19995L12 16.8M16.8 12L7.19995 12" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/ProgressIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ProgressIcon">
       <g opacity="0.9">
@@ -64,12 +65,12 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ProgressIcon">
       <g opacity="0.9">
-      <path d="M18 12C18 14.9745 15.8356 17.4434 12.9958 17.9178C12.4511 18.0088 12 17.5523 12 17V7.00002C12 6.44774 12.4511 5.99129 12.9958 6.08228C15.8356 6.55663 18 9.02557 18 12Z" stroke="currentColor"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6 12C21.6 17.302 17.302 21.6 12 21.6C6.69809 21.6 2.40002 17.302 2.40002 12C2.40002 6.69809 6.69809 2.40002 12 2.40002C17.302 2.40002 21.6 6.69809 21.6 12Z" stroke="currentColor"/>
+      <path d="M18 12C18 14.9745 15.8356 17.4434 12.9958 17.9178C12.4511 18.0088 12 17.5523 12 17V7.00002C12 6.44774 12.4511 5.99129 12.9958 6.08228C15.8356 6.55663 18 9.02557 18 12Z" stroke={color}/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6 12C21.6 17.302 17.302 21.6 12 21.6C6.69809 21.6 2.40002 17.302 2.40002 12C2.40002 6.69809 6.69809 2.40002 12 2.40002C17.302 2.40002 21.6 6.69809 21.6 12Z" stroke={color}/>
       </g>
     </g>
   </svg>

package/dist/icons/QuoteIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_QuoteIcon">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.75C2 6.33579 2.3198 6 2.71429 6H3.93548C7.85492 6 11.0323 8.95492 11.0323 12.6V17.25C11.0323 17.6642 10.7125 18 10.318 18H7.87558C7.48109 18 7.16129 17.6642 7.16129 17.25V12.6C7.16129 10.9431 5.71705 9.6 3.93548 9.6H2.71429C2.3198 9.6 2 9.26421 2 8.85V6.75ZM12.9677 6.75C12.9677 6.33579 13.2875 6 13.682 6H14.9032C18.8227 6 22 8.95492 22 12.6V17.25C22 17.6642 21.6802 18 21.2857 18H18.8433C18.4488 18 18.129 17.6642 18.129 17.25V12.6C18.129 10.9431 16.6848 9.6 14.9032 9.6H13.682C13.2875 9.6 12.9677 9.26421 12.9677 8.85V6.75Z" stroke="url(#grad-QuoteIcon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_QuoteIcon">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.75C2 6.33579 2.3198 6 2.71429 6H3.93548C7.85492 6 11.0323 8.95492 11.0323 12.6V17.25C11.0323 17.6642 10.7125 18 10.318 18H7.87558C7.48109 18 7.16129 17.6642 7.16129 17.25V12.6C7.16129 10.9431 5.71705 9.6 3.93548 9.6H2.71429C2.3198 9.6 2 9.26421 2 8.85V6.75ZM12.9677 6.75C12.9677 6.33579 13.2875 6 13.682 6H14.9032C18.8227 6 22 8.95492 22 12.6V17.25C22 17.6642 21.6802 18 21.2857 18H18.8433C18.4488 18 18.129 17.6642 18.129 17.25V12.6C18.129 10.9431 16.6848 9.6 14.9032 9.6H13.682C13.2875 9.6 12.9677 9.26421 12.9677 8.85V6.75Z" stroke="currentColor"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6.75C2 6.33579 2.3198 6 2.71429 6H3.93548C7.85492 6 11.0323 8.95492 11.0323 12.6V17.25C11.0323 17.6642 10.7125 18 10.318 18H7.87558C7.48109 18 7.16129 17.6642 7.16129 17.25V12.6C7.16129 10.9431 5.71705 9.6 3.93548 9.6H2.71429C2.3198 9.6 2 9.26421 2 8.85V6.75ZM12.9677 6.75C12.9677 6.33579 13.2875 6 13.682 6H14.9032C18.8227 6 22 8.95492 22 12.6V17.25C22 17.6642 21.6802 18 21.2857 18H18.8433C18.4488 18 18.129 17.6642 18.129 17.25V12.6C18.129 10.9431 16.6848 9.6 14.9032 9.6H13.682C13.2875 9.6 12.9677 9.26421 12.9677 8.85V6.75Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/ReceiptIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ReceiptIcon">
       <path d="M18.24 3H5.75995C4.89839 3 4.19995 3.80589 4.19995 4.8V21L6.79995 19.2L9.39995 21L12 19.2L14.6 21L17.2 19.2L19.8 21V4.8C19.8 3.80589 19.1015 3 18.24 3Z" stroke="url(#grad-ReceiptIcon)" stroke-linejoin="round"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ReceiptIcon">
-      <path d="M18.24 3H5.75995C4.89839 3 4.19995 3.80589 4.19995 4.8V21L6.79995 19.2L9.39995 21L12 19.2L14.6 21L17.2 19.2L19.8 21V4.8C19.8 3.80589 19.1015 3 18.24 3Z" stroke="currentColor" stroke-linejoin="round"/>
+      <path d="M18.24 3H5.75995C4.89839 3 4.19995 3.80589 4.19995 4.8V21L6.79995 19.2L9.39995 21L12 19.2L14.6 21L17.2 19.2L19.8 21V4.8C19.8 3.80589 19.1015 3 18.24 3Z" stroke={color} stroke-linejoin="round"/>
     </g>
   </svg>
 {/if}

package/dist/icons/ReceiptLinesIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ReceiptLinesIcon">
       <path d="M7.79995 7.8H16.2M7.79995 12.6H16.2M5.75995 3H18.24C19.1015 3 19.8 3.80589 19.8 4.8V21L17.2 19.2L14.6 21L12 19.2L9.39995 21L6.79995 19.2L4.19995 21V4.8C4.19995 3.80589 4.89839 3 5.75995 3Z" stroke="url(#grad-ReceiptLinesIcon)" stroke-linejoin="round"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ReceiptLinesIcon">
-      <path d="M7.79995 7.8H16.2M7.79995 12.6H16.2M5.75995 3H18.24C19.1015 3 19.8 3.80589 19.8 4.8V21L17.2 19.2L14.6 21L12 19.2L9.39995 21L6.79995 19.2L4.19995 21V4.8C4.19995 3.80589 4.89839 3 5.75995 3Z" stroke="currentColor" stroke-linejoin="round"/>
+      <path d="M7.79995 7.8H16.2M7.79995 12.6H16.2M5.75995 3H18.24C19.1015 3 19.8 3.80589 19.8 4.8V21L17.2 19.2L14.6 21L12 19.2L9.39995 21L6.79995 19.2L4.19995 21V4.8C4.19995 3.80589 4.89839 3 5.75995 3Z" stroke={color} stroke-linejoin="round"/>
     </g>
   </svg>
 {/if}

package/dist/icons/ReloadIcon.svelte

@@ -4,6 +4,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -29,7 +30,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 17"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Reload">
       <path
@@ -67,13 +68,13 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 17"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Reload">
       <path
         id="icon_Reload"
         d="M13.5377 5.0182C12.4257 3.10523 10.3474 1.8182 7.96702 1.8182C5.26809 1.8182 2.95748 3.47273 2.00345 5.8182M11.5845 5.8182H14.8V2.6182M2.46228 11.4182C3.57424 13.3312 5.65257 14.6182 8.03296 14.6182C10.7319 14.6182 13.0425 12.9637 13.9965 10.6182M4.4155 10.6182H1.19999V13.8182"
-        stroke="currentColor"
+        stroke={color}
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/ReportIcon.svelte

@@ -4,6 +4,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {

package/dist/icons/Save01Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Save01Icon">
       <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M15 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke="url(#grad-Save01Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Save01Icon">
-      <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M15 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke="currentColor"/>
+      <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M15 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/Save02Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Save02Icon">
       <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M17.4 3.60002V6.00002C17.4 6.66277 16.8628 7.20002 16.2 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke="url(#grad-Save02Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Save02Icon">
-      <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M17.4 3.60002V6.00002C17.4 6.66277 16.8628 7.20002 16.2 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke="currentColor"/>
+      <path d="M6.60002 20.4V15C6.60002 14.3373 7.13728 13.8 7.80002 13.8H16.2C16.8628 13.8 17.4 14.3373 17.4 15V21M17.4 3.60002V6.00002C17.4 6.66277 16.8628 7.20002 16.2 7.20002L7.80002 7.20002C7.13728 7.20002 6.60002 6.66276 6.60002 6.00002L6.60002 2.40002M20.9975 6.5975L17.4026 3.00255C17.0168 2.61676 16.4935 2.40003 15.9479 2.40002H4.45717C3.32102 2.40002 2.40002 3.32102 2.40002 4.45717V19.5429C2.40002 20.679 3.32102 21.6 4.45717 21.6H19.5429C20.679 21.6 21.6 20.679 21.6 19.5429V8.05211C21.6 7.50652 21.3833 6.98328 20.9975 6.5975Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/Search01Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search01Icon">
       <path d="M16.9268 17.04L20.4 20.4M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke="url(#grad-Search01Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search01Icon">
-      <path d="M16.9268 17.04L20.4 20.4M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke="currentColor"/>
+      <path d="M16.9268 17.04L20.4 20.4M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/Search02Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search02Icon">
       <path d="M16.9268 17.04L20.4 20.4M11.4 7.19998C13.3882 7.19998 15 8.81175 15 10.8M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke="url(#grad-Search02Icon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search02Icon">
-      <path d="M16.9268 17.04L20.4 20.4M11.4 7.19998C13.3882 7.19998 15 8.81175 15 10.8M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke="currentColor"/>
+      <path d="M16.9268 17.04L20.4 20.4M11.4 7.19998C13.3882 7.19998 15 8.81175 15 10.8M19.28 11.44C19.28 15.7699 15.7699 19.28 11.44 19.28C7.11006 19.28 3.59998 15.7699 3.59998 11.44C3.59998 7.11006 7.11006 3.59998 11.44 3.59998C15.7699 3.59998 19.28 7.11006 19.28 11.44Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/SearchIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search">
       <path
@@ -68,13 +69,13 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 14 14"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Search">
       <path
         id="icon_Search"
         d="M9.8741 9.9401L11.9001 11.9001M6.6501 4.2001C7.8099 4.2001 8.7501 5.1403 8.7501 6.3001M11.2468 6.67343C11.2468 9.19921 9.19921 11.2468 6.67343 11.2468C4.14765 11.2468 2.1001 9.19921 2.1001 6.67343C2.1001 4.14765 4.14765 2.1001 6.67343 2.1001C9.19921 2.1001 11.2468 4.14765 11.2468 6.67343Z"
-        stroke="currentColor"
+        stroke={color}
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/SendIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Send">
       <path
@@ -68,13 +69,13 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 16 16"
-    fill="none"
+    fill={fill}
   >
     <g id="id_Send">
       <path
         id="icon_Send"
         d="M14.0469 1.95306L6.9376 9.06238M2.18071 5.49018L13.2513 1.64936C13.9331 1.41284 14.5871 2.06692 14.3506 2.74868L10.5098 13.8193C10.2467 14.5777 9.18168 14.5985 8.88916 13.8509L7.13123 9.35843C7.04343 9.13406 6.86592 8.95655 6.64155 8.86875L2.14906 7.11082C1.4015 6.8183 1.4223 5.7533 2.18071 5.49018Z"
-        stroke="currentColor"
+        stroke={color}
         stroke-width={weight}
         stroke-linecap="round"
         stroke-linejoin="round"

package/dist/icons/SettingsIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SettingsIcon">
       <path d="M8.75602 4.25546L10.0271 2.42882C10.214 2.16017 10.5206 2 10.8479 2H12.653C12.9791 2 13.2847 2.15898 13.4719 2.426L14.7297 4.22032M8.75602 4.25546C8.40917 4.75031 7.83262 4.99279 7.22068 4.94956M8.75602 4.25546C8.40748 4.74912 7.83262 4.9948 7.22068 4.94956M7.22068 4.94956L4.97158 4.80836C4.65073 4.78821 4.33977 4.92355 4.13585 5.17208L2.99534 6.56208C2.77914 6.82557 2.71204 7.18104 2.8173 7.50522L3.47315 9.52504M3.47315 9.52504C3.56207 9.81338 3.57345 10.1223 3.50981 10.414M3.47315 9.52504C3.56334 9.81286 3.5743 10.1211 3.50939 10.417M3.50981 10.414C3.44533 10.7023 3.3071 10.9745 3.10185 11.1949M3.50981 10.414L3.50939 10.417M3.10185 11.1949L1.61575 12.7933C1.38735 13.0389 1.29732 13.3827 1.376 13.7088L1.77856 15.377C1.85699 15.702 2.09263 15.9663 2.40653 16.0813L4.44838 16.8297C4.73328 16.9399 4.97941 17.1191 5.16569 17.3449M3.10185 11.1949C3.30836 10.9763 3.44533 10.705 3.50939 10.417M5.16569 17.3449C5.35071 17.5713 5.47672 17.8445 5.52561 18.1404M5.16569 17.3449C5.35239 17.5713 5.47883 17.8438 5.52561 18.1404M5.16569 17.3449L5.16274 17.3416C5.15052 17.3268 5.13745 17.3114 5.12481 17.297M5.52561 18.1404L5.87327 20.2759C5.92654 20.6031 6.13849 20.8827 6.43917 21.0223L8.0671 21.7781C8.35817 21.9132 8.6964 21.9005 8.97646 21.7438L10.8902 20.6731M10.8902 20.6731C11.1553 20.5242 11.4512 20.4495 11.747 20.4491M10.8902 20.6731C10.9952 20.6134 11.1052 20.5657 11.2181 20.5299C11.3897 20.4756 11.5684 20.4488 11.747 20.4491M11.747 20.4491C11.9009 20.4495 12.0547 20.4698 12.2047 20.51C12.3442 20.5474 12.48 20.6018 12.6085 20.6731M11.747 20.4491C12.0442 20.4487 12.3417 20.5234 12.6085 20.6731M12.6085 20.6731L14.612 21.7576C14.8932 21.9099 15.2304 21.9185 15.519 21.7806L17.1391 21.0068C17.4387 20.8637 17.6478 20.5812 17.6971 20.2529L18.0085 18.178M18.0085 18.178C18.0553 17.8805 18.1796 17.6052 18.3642 17.3768M18.0085 18.178C18.0536 17.8798 18.1788 17.6049 18.3642 17.3768M18.3642 17.3768C18.5476 17.1508 18.7907 16.9707 19.074 16.8593M18.3642 17.3768C18.5471 17.1499 18.7895 16.9693 19.074 16.8593M19.074 16.8593L21.1369 16.0508C21.4449 15.9301 21.6733 15.6649 21.7469 15.3425L22.1326 13.6539C22.2061 13.3323 22.1162 12.9952 21.8924 12.7528L20.3973 11.134M20.3973 11.134C20.1883 10.9128 20.0424 10.6485 19.9716 10.3677M20.3973 11.134C20.2991 11.0307 20.2148 10.9177 20.1461 10.798C20.0677 10.662 20.0092 10.5173 19.9716 10.3677M19.9716 10.3677C19.9021 10.0889 19.9063 9.79349 19.9944 9.50752L20.641 7.43487C20.7414 7.11307 20.6729 6.76235 20.4588 6.50196L19.3464 5.14894C19.1401 4.89805 18.8249 4.76298 18.5009 4.7867L16.2776 4.94956M16.2776 4.94956C15.9733 4.97104 15.6741 4.91308 15.4078 4.78839M16.2776 4.94956C15.9729 4.97228 15.6741 4.91385 15.4078 4.78839M15.4078 4.78839C15.1397 4.6621 14.9046 4.4679 14.7297 4.22032M15.4078 4.78839C15.1393 4.66256 14.9037 4.46888 14.7297 4.22032M3.50939 10.417L3.51024 10.4126M15.1359 12.0106C15.1359 13.8756 13.59 15.3874 11.6834 15.3874C9.77677 15.3874 8.23089 13.8756 8.23089 12.0106C8.23089 10.1457 9.77677 8.63386 11.6834 8.63386C13.59 8.63386 15.1359 10.1457 15.1359 12.0106Z" stroke="url(#grad-SettingsIcon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SettingsIcon">
-      <path d="M8.75602 4.25546L10.0271 2.42882C10.214 2.16017 10.5206 2 10.8479 2H12.653C12.9791 2 13.2847 2.15898 13.4719 2.426L14.7297 4.22032M8.75602 4.25546C8.40917 4.75031 7.83262 4.99279 7.22068 4.94956M8.75602 4.25546C8.40748 4.74912 7.83262 4.9948 7.22068 4.94956M7.22068 4.94956L4.97158 4.80836C4.65073 4.78821 4.33977 4.92355 4.13585 5.17208L2.99534 6.56208C2.77914 6.82557 2.71204 7.18104 2.8173 7.50522L3.47315 9.52504M3.47315 9.52504C3.56207 9.81338 3.57345 10.1223 3.50981 10.414M3.47315 9.52504C3.56334 9.81286 3.5743 10.1211 3.50939 10.417M3.50981 10.414C3.44533 10.7023 3.3071 10.9745 3.10185 11.1949M3.50981 10.414L3.50939 10.417M3.10185 11.1949L1.61575 12.7933C1.38735 13.0389 1.29732 13.3827 1.376 13.7088L1.77856 15.377C1.85699 15.702 2.09263 15.9663 2.40653 16.0813L4.44838 16.8297C4.73328 16.9399 4.97941 17.1191 5.16569 17.3449M3.10185 11.1949C3.30836 10.9763 3.44533 10.705 3.50939 10.417M5.16569 17.3449C5.35071 17.5713 5.47672 17.8445 5.52561 18.1404M5.16569 17.3449C5.35239 17.5713 5.47883 17.8438 5.52561 18.1404M5.16569 17.3449L5.16274 17.3416C5.15052 17.3268 5.13745 17.3114 5.12481 17.297M5.52561 18.1404L5.87327 20.2759C5.92654 20.6031 6.13849 20.8827 6.43917 21.0223L8.0671 21.7781C8.35817 21.9132 8.6964 21.9005 8.97646 21.7438L10.8902 20.6731M10.8902 20.6731C11.1553 20.5242 11.4512 20.4495 11.747 20.4491M10.8902 20.6731C10.9952 20.6134 11.1052 20.5657 11.2181 20.5299C11.3897 20.4756 11.5684 20.4488 11.747 20.4491M11.747 20.4491C11.9009 20.4495 12.0547 20.4698 12.2047 20.51C12.3442 20.5474 12.48 20.6018 12.6085 20.6731M11.747 20.4491C12.0442 20.4487 12.3417 20.5234 12.6085 20.6731M12.6085 20.6731L14.612 21.7576C14.8932 21.9099 15.2304 21.9185 15.519 21.7806L17.1391 21.0068C17.4387 20.8637 17.6478 20.5812 17.6971 20.2529L18.0085 18.178M18.0085 18.178C18.0553 17.8805 18.1796 17.6052 18.3642 17.3768M18.0085 18.178C18.0536 17.8798 18.1788 17.6049 18.3642 17.3768M18.3642 17.3768C18.5476 17.1508 18.7907 16.9707 19.074 16.8593M18.3642 17.3768C18.5471 17.1499 18.7895 16.9693 19.074 16.8593M19.074 16.8593L21.1369 16.0508C21.4449 15.9301 21.6733 15.6649 21.7469 15.3425L22.1326 13.6539C22.2061 13.3323 22.1162 12.9952 21.8924 12.7528L20.3973 11.134M20.3973 11.134C20.1883 10.9128 20.0424 10.6485 19.9716 10.3677M20.3973 11.134C20.2991 11.0307 20.2148 10.9177 20.1461 10.798C20.0677 10.662 20.0092 10.5173 19.9716 10.3677M19.9716 10.3677C19.9021 10.0889 19.9063 9.79349 19.9944 9.50752L20.641 7.43487C20.7414 7.11307 20.6729 6.76235 20.4588 6.50196L19.3464 5.14894C19.1401 4.89805 18.8249 4.76298 18.5009 4.7867L16.2776 4.94956M16.2776 4.94956C15.9733 4.97104 15.6741 4.91308 15.4078 4.78839M16.2776 4.94956C15.9729 4.97228 15.6741 4.91385 15.4078 4.78839M15.4078 4.78839C15.1397 4.6621 14.9046 4.4679 14.7297 4.22032M15.4078 4.78839C15.1393 4.66256 14.9037 4.46888 14.7297 4.22032M3.50939 10.417L3.51024 10.4126M15.1359 12.0106C15.1359 13.8756 13.59 15.3874 11.6834 15.3874C9.77677 15.3874 8.23089 13.8756 8.23089 12.0106C8.23089 10.1457 9.77677 8.63386 11.6834 8.63386C13.59 8.63386 15.1359 10.1457 15.1359 12.0106Z" stroke="currentColor"/>
+      <path d="M8.75602 4.25546L10.0271 2.42882C10.214 2.16017 10.5206 2 10.8479 2H12.653C12.9791 2 13.2847 2.15898 13.4719 2.426L14.7297 4.22032M8.75602 4.25546C8.40917 4.75031 7.83262 4.99279 7.22068 4.94956M8.75602 4.25546C8.40748 4.74912 7.83262 4.9948 7.22068 4.94956M7.22068 4.94956L4.97158 4.80836C4.65073 4.78821 4.33977 4.92355 4.13585 5.17208L2.99534 6.56208C2.77914 6.82557 2.71204 7.18104 2.8173 7.50522L3.47315 9.52504M3.47315 9.52504C3.56207 9.81338 3.57345 10.1223 3.50981 10.414M3.47315 9.52504C3.56334 9.81286 3.5743 10.1211 3.50939 10.417M3.50981 10.414C3.44533 10.7023 3.3071 10.9745 3.10185 11.1949M3.50981 10.414L3.50939 10.417M3.10185 11.1949L1.61575 12.7933C1.38735 13.0389 1.29732 13.3827 1.376 13.7088L1.77856 15.377C1.85699 15.702 2.09263 15.9663 2.40653 16.0813L4.44838 16.8297C4.73328 16.9399 4.97941 17.1191 5.16569 17.3449M3.10185 11.1949C3.30836 10.9763 3.44533 10.705 3.50939 10.417M5.16569 17.3449C5.35071 17.5713 5.47672 17.8445 5.52561 18.1404M5.16569 17.3449C5.35239 17.5713 5.47883 17.8438 5.52561 18.1404M5.16569 17.3449L5.16274 17.3416C5.15052 17.3268 5.13745 17.3114 5.12481 17.297M5.52561 18.1404L5.87327 20.2759C5.92654 20.6031 6.13849 20.8827 6.43917 21.0223L8.0671 21.7781C8.35817 21.9132 8.6964 21.9005 8.97646 21.7438L10.8902 20.6731M10.8902 20.6731C11.1553 20.5242 11.4512 20.4495 11.747 20.4491M10.8902 20.6731C10.9952 20.6134 11.1052 20.5657 11.2181 20.5299C11.3897 20.4756 11.5684 20.4488 11.747 20.4491M11.747 20.4491C11.9009 20.4495 12.0547 20.4698 12.2047 20.51C12.3442 20.5474 12.48 20.6018 12.6085 20.6731M11.747 20.4491C12.0442 20.4487 12.3417 20.5234 12.6085 20.6731M12.6085 20.6731L14.612 21.7576C14.8932 21.9099 15.2304 21.9185 15.519 21.7806L17.1391 21.0068C17.4387 20.8637 17.6478 20.5812 17.6971 20.2529L18.0085 18.178M18.0085 18.178C18.0553 17.8805 18.1796 17.6052 18.3642 17.3768M18.0085 18.178C18.0536 17.8798 18.1788 17.6049 18.3642 17.3768M18.3642 17.3768C18.5476 17.1508 18.7907 16.9707 19.074 16.8593M18.3642 17.3768C18.5471 17.1499 18.7895 16.9693 19.074 16.8593M19.074 16.8593L21.1369 16.0508C21.4449 15.9301 21.6733 15.6649 21.7469 15.3425L22.1326 13.6539C22.2061 13.3323 22.1162 12.9952 21.8924 12.7528L20.3973 11.134M20.3973 11.134C20.1883 10.9128 20.0424 10.6485 19.9716 10.3677M20.3973 11.134C20.2991 11.0307 20.2148 10.9177 20.1461 10.798C20.0677 10.662 20.0092 10.5173 19.9716 10.3677M19.9716 10.3677C19.9021 10.0889 19.9063 9.79349 19.9944 9.50752L20.641 7.43487C20.7414 7.11307 20.6729 6.76235 20.4588 6.50196L19.3464 5.14894C19.1401 4.89805 18.8249 4.76298 18.5009 4.7867L16.2776 4.94956M16.2776 4.94956C15.9733 4.97104 15.6741 4.91308 15.4078 4.78839M16.2776 4.94956C15.9729 4.97228 15.6741 4.91385 15.4078 4.78839M15.4078 4.78839C15.1397 4.6621 14.9046 4.4679 14.7297 4.22032M15.4078 4.78839C15.1393 4.66256 14.9037 4.46888 14.7297 4.22032M3.50939 10.417L3.51024 10.4126M15.1359 12.0106C15.1359 13.8756 13.59 15.3874 11.6834 15.3874C9.77677 15.3874 8.23089 13.8756 8.23089 12.0106C8.23089 10.1457 9.77677 8.63386 11.6834 8.63386C13.59 8.63386 15.1359 10.1457 15.1359 12.0106Z" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/ShareIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ShareIcon">
       <path d="M21.0001 11.459L11.4001 5.09998L11.4001 8.69998C2.99988 10.5 2.99988 18.9 2.99988 18.9C2.99988 18.9 6.59988 14.1 11.4001 14.7L11.4001 18.42L21.0001 11.459Z" stroke="url(#grad-ShareIcon)" stroke-linejoin="round"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_ShareIcon">
-      <path d="M21.0001 11.459L11.4001 5.09998L11.4001 8.69998C2.99988 10.5 2.99988 18.9 2.99988 18.9C2.99988 18.9 6.59988 14.1 11.4001 14.7L11.4001 18.42L21.0001 11.459Z" stroke="currentColor" stroke-linejoin="round"/>
+      <path d="M21.0001 11.459L11.4001 5.09998L11.4001 8.69998C2.99988 10.5 2.99988 18.9 2.99988 18.9C2.99988 18.9 6.59988 14.1 11.4001 14.7L11.4001 18.42L21.0001 11.459Z" stroke={color} stroke-linejoin="round"/>
     </g>
   </svg>
 {/if}

package/dist/icons/SlashBackwardIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SlashBackwardIcon">
       <path d="M6.90878 3.18182L17.0911 20.8181" stroke="url(#grad-SlashBackwardIcon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SlashBackwardIcon">
-      <path d="M6.90878 3.18182L17.0911 20.8181" stroke="currentColor"/>
+      <path d="M6.90878 3.18182L17.0911 20.8181" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/SlashForwardIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SlashForwardIcon">
       <path d="M6.90888 20.8181L17.0912 3.18182" stroke="url(#grad-SlashForwardIcon)"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SlashForwardIcon">
-      <path d="M6.90888 20.8181L17.0912 3.18182" stroke="currentColor"/>
+      <path d="M6.90888 20.8181L17.0912 3.18182" stroke={color}/>
     </g>
   </svg>
 {/if}

package/dist/icons/SortHorizontalIcon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SortHorizontalIcon">
       <path d="M8.40005 15.6L4.80005 12L8.40005 8.40002M15.6 8.40002L19.2 12L15.6 15.6" stroke="url(#grad-SortHorizontalIcon)" stroke-linejoin="round"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SortHorizontalIcon">
-      <path d="M8.40005 15.6L4.80005 12L8.40005 8.40002M15.6 8.40002L19.2 12L15.6 15.6" stroke="currentColor" stroke-linejoin="round"/>
+      <path d="M8.40005 15.6L4.80005 12L8.40005 8.40002M15.6 8.40002L19.2 12L15.6 15.6" stroke={color} stroke-linejoin="round"/>
     </g>
   </svg>
 {/if}

package/dist/icons/SortVertical01Icon.svelte

@@ -5,6 +5,7 @@ export let gradient = {
   direction: "bottom"
 };
 export let size = "1rem";
+export let fill = "none";
 export let weight = 1;
 const getGradientDirection = (direction) => {
   switch (direction) {
@@ -30,7 +31,7 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SortVertical01Icon">
       <path d="M15.6 15.6L12 19.2L8.40002 15.6M8.40002 8.39999L12 4.79999L15.6 8.39999" stroke="url(#grad-SortVertical01Icon)" stroke-linejoin="round"/>
@@ -61,10 +62,10 @@ export { className as class };
     class={className}
     style="width: {size}; height: {size}; {!className ? `color: ${color};` : ''}"
     viewBox="0 0 24 24"
-    fill="none"
+    fill={fill}
   >
     <g id="id_SortVertical01Icon">
-      <path d="M15.6 15.6L12 19.2L8.40002 15.6M8.40002 8.39999L12 4.79999L15.6 8.39999" stroke="currentColor" stroke-linejoin="round"/>
+      <path d="M15.6 15.6L12 19.2L8.40002 15.6M8.40002 8.39999L12 4.79999L15.6 8.39999" stroke={color} stroke-linejoin="round"/>
     </g>
   </svg>
 {/if}