chromia 0.0.1 → 0.0.2

package/src/icons/FolderIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FolderIconProps = typeof __propDef.props;
+export type FolderIconEvents = typeof __propDef.events;
+export type FolderIconSlots = typeof __propDef.slots;
+export default class FolderIcon extends SvelteComponent<FolderIconProps, FolderIconEvents, FolderIconSlots> {
+}
+export {};

package/src/icons/FolderPlusIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_FolderPlus">
+      <path
+        id="icon_FolderPlus"
+        d="M7.05993 11.3836H2.51048C1.73728 11.3836 1.11047 10.7568 1.11048 9.98357L1.11053 4.66106C1.11054 4.12794 1.11034 3.3686 1.11017 2.81878C1.11005 2.43208 1.42349 2.11896 1.8102 2.11896H5.14582L6.75875 3.84191H11.6099C11.9965 3.84191 12.3099 4.15531 12.3099 4.54191V6.40133M10.9099 11.8811L10.9099 9.90117M10.9099 9.90117L10.9099 7.92127M10.9099 9.90117L8.93003 9.90117M10.9099 9.90117L12.8898 9.90117"
+        stroke="url(#grad-FolderPlus)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-FolderPlus"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_FolderPlus">
+      <path
+        id="icon_FolderPlus"
+        d="M7.05993 11.3836H2.51048C1.73728 11.3836 1.11047 10.7568 1.11048 9.98357L1.11053 4.66106C1.11054 4.12794 1.11034 3.3686 1.11017 2.81878C1.11005 2.43208 1.42349 2.11896 1.8102 2.11896H5.14582L6.75875 3.84191H11.6099C11.9965 3.84191 12.3099 4.15531 12.3099 4.54191V6.40133M10.9099 11.8811L10.9099 9.90117M10.9099 9.90117L10.9099 7.92127M10.9099 9.90117L8.93003 9.90117M10.9099 9.90117L12.8898 9.90117"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/FolderPlusIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FolderPlusIconProps = typeof __propDef.props;
+export type FolderPlusIconEvents = typeof __propDef.events;
+export type FolderPlusIconSlots = typeof __propDef.slots;
+export default class FolderPlusIcon extends SvelteComponent<FolderPlusIconProps, FolderPlusIconEvents, FolderPlusIconSlots> {
+}
+export {};

package/src/icons/GridIcon.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Grid">
+      <path
+        d="M11.3556 1.3999C12.0429 1.3999 12.6 1.94943 12.6 2.6273L12.6 4.72253C12.6 5.4004 12.0429 5.94993 11.3556 5.94993H9.48892C8.80163 5.94993 8.24447 5.4004 8.24447 4.72253L8.24447 2.6273C8.24447 1.94943 8.80162 1.3999 9.48891 1.3999L11.3556 1.3999Z"
+        id="icon_Grid"
+        stroke="url(#grad-Grid)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.64447 1.3999C1.95718 1.3999 1.40002 1.94943 1.40002 2.6273L1.40003 4.72253C1.40003 5.4004 1.95719 5.94993 2.64447 5.94993H4.51114C5.19843 5.94993 5.75558 5.4004 5.75558 4.72253L5.75558 2.6273C5.75558 1.94943 5.19842 1.3999 4.51113 1.3999L2.64447 1.3999Z"
+        id="icon_Grid"
+        stroke="url(#grad-Grid)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.3556 8.04993C12.0429 8.04993 12.6 8.59945 12.6 9.27732V11.3725C12.6 12.0504 12.0429 12.5999 11.3556 12.5999H9.48892C8.80163 12.5999 8.24447 12.0504 8.24447 11.3725L8.24447 9.27732C8.24447 8.59945 8.80163 8.04993 9.48892 8.04993H11.3556Z"
+        id="icon_Grid"
+        stroke="url(#grad-Grid)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.64447 8.04993C1.95719 8.04993 1.40003 8.59945 1.40003 9.27732L1.40003 11.3725C1.40003 12.0504 1.95719 12.5999 2.64448 12.5999H4.51114C5.19843 12.5999 5.75559 12.0504 5.75559 11.3725L5.75558 9.27732C5.75558 8.59945 5.19843 8.04993 4.51114 8.04993H2.64447Z"
+        id="icon_Grid"
+        stroke="url(#grad-Grid)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Grid"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Grid">
+      <path
+        d="M11.3556 1.3999C12.0429 1.3999 12.6 1.94943 12.6 2.6273L12.6 4.72253C12.6 5.4004 12.0429 5.94993 11.3556 5.94993H9.48892C8.80163 5.94993 8.24447 5.4004 8.24447 4.72253L8.24447 2.6273C8.24447 1.94943 8.80162 1.3999 9.48891 1.3999L11.3556 1.3999Z"
+        id="icon_Grid"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.64447 1.3999C1.95718 1.3999 1.40002 1.94943 1.40002 2.6273L1.40003 4.72253C1.40003 5.4004 1.95719 5.94993 2.64447 5.94993H4.51114C5.19843 5.94993 5.75558 5.4004 5.75558 4.72253L5.75558 2.6273C5.75558 1.94943 5.19842 1.3999 4.51113 1.3999L2.64447 1.3999Z"
+        id="icon_Grid"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M11.3556 8.04993C12.0429 8.04993 12.6 8.59945 12.6 9.27732V11.3725C12.6 12.0504 12.0429 12.5999 11.3556 12.5999H9.48892C8.80163 12.5999 8.24447 12.0504 8.24447 11.3725L8.24447 9.27732C8.24447 8.59945 8.80163 8.04993 9.48892 8.04993H11.3556Z"
+        id="icon_Grid"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.64447 8.04993C1.95719 8.04993 1.40003 8.59945 1.40003 9.27732L1.40003 11.3725C1.40003 12.0504 1.95719 12.5999 2.64448 12.5999H4.51114C5.19843 12.5999 5.75559 12.0504 5.75559 11.3725L5.75558 9.27732C5.75558 8.59945 5.19843 8.04993 4.51114 8.04993H2.64447Z"
+        id="icon_Grid"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}

package/src/icons/GridIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridIconProps = typeof __propDef.props;
+export type GridIconEvents = typeof __propDef.events;
+export type GridIconSlots = typeof __propDef.slots;
+export default class GridIcon extends SvelteComponent<GridIconProps, GridIconEvents, GridIconSlots> {
+}
+export {};

package/src/icons/HourglassIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Hourglass">
+      <path
+        id="icon_Hourglass"
+        d="M4.43431 14.4H11.5657C11.9697 14.4 12.2972 14.0725 12.2972 13.6686V11.7147C12.2972 11.5585 12.2472 11.4065 12.1546 11.2808L10.0453 8.41819C9.86078 8.16776 9.85484 7.82801 10.0305 7.57128L11.9865 4.71246C12.0698 4.59081 12.1143 4.44684 12.1143 4.29943V2.33143C12.1143 1.92747 11.7868 1.6 11.3829 1.6H4.43431C4.03035 1.6 3.70288 1.92747 3.70288 2.33143V4.28534C3.70288 4.44148 3.75285 4.59352 3.84547 4.71922L5.94318 7.56611C6.13329 7.82413 6.13329 8.17586 5.94318 8.43388L3.84547 11.2808C3.75285 11.4065 3.70288 11.5585 3.70288 11.7147V13.6686C3.70288 14.0725 4.03035 14.4 4.43431 14.4Z"
+        stroke="url(#grad-Hourglass)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Hourglass"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Hourglass">
+      <path
+        id="icon_Hourglass"
+        d="M4.43431 14.4H11.5657C11.9697 14.4 12.2972 14.0725 12.2972 13.6686V11.7147C12.2972 11.5585 12.2472 11.4065 12.1546 11.2808L10.0453 8.41819C9.86078 8.16776 9.85484 7.82801 10.0305 7.57128L11.9865 4.71246C12.0698 4.59081 12.1143 4.44684 12.1143 4.29943V2.33143C12.1143 1.92747 11.7868 1.6 11.3829 1.6H4.43431C4.03035 1.6 3.70288 1.92747 3.70288 2.33143V4.28534C3.70288 4.44148 3.75285 4.59352 3.84547 4.71922L5.94318 7.56611C6.13329 7.82413 6.13329 8.17586 5.94318 8.43388L3.84547 11.2808C3.75285 11.4065 3.70288 11.5585 3.70288 11.7147V13.6686C3.70288 14.0725 4.03035 14.4 4.43431 14.4Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/HourglassIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HourglassIconProps = typeof __propDef.props;
+export type HourglassIconEvents = typeof __propDef.events;
+export type HourglassIconSlots = typeof __propDef.slots;
+export default class HourglassIcon extends SvelteComponent<HourglassIconProps, HourglassIconEvents, HourglassIconSlots> {
+}
+export {};

package/src/icons/LockIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Lock">
+      <path
+        id="icon_Lock"
+        d="M3.85005 5.13324V4.5999C3.85005 2.8272 5.25505 1.3999 7.00005 1.3999C8.74505 1.3999 10.15 2.8272 10.15 4.5999V5.13324M3.85005 5.13324C3.27255 5.13324 2.80005 5.61324 2.80005 6.1999V11.5332C2.80005 12.1199 3.27255 12.5999 3.85005 12.5999H10.15C10.7276 12.5999 11.2001 12.1199 11.2001 11.5332V6.1999C11.2001 5.61324 10.7276 5.13324 10.15 5.13324M3.85005 5.13324H10.15M7.00005 7.7999C7.57755 7.7999 8.05005 8.2799 8.05005 8.86657C8.05005 9.45324 7.57755 9.93323 7.00005 9.93323C6.42255 9.93323 5.95005 9.45324 5.95005 8.86657C5.95005 8.2799 6.42255 7.7999 7.00005 7.7999Z"
+        stroke="url(#grad-Lock)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Lock"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Lock">
+      <path
+        id="icon_Lock"
+        d="M3.85005 5.13324V4.5999C3.85005 2.8272 5.25505 1.3999 7.00005 1.3999C8.74505 1.3999 10.15 2.8272 10.15 4.5999V5.13324M3.85005 5.13324C3.27255 5.13324 2.80005 5.61324 2.80005 6.1999V11.5332C2.80005 12.1199 3.27255 12.5999 3.85005 12.5999H10.15C10.7276 12.5999 11.2001 12.1199 11.2001 11.5332V6.1999C11.2001 5.61324 10.7276 5.13324 10.15 5.13324M3.85005 5.13324H10.15M7.00005 7.7999C7.57755 7.7999 8.05005 8.2799 8.05005 8.86657C8.05005 9.45324 7.57755 9.93323 7.00005 9.93323C6.42255 9.93323 5.95005 9.45324 5.95005 8.86657C5.95005 8.2799 6.42255 7.7999 7.00005 7.7999Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/LockIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LockIconProps = typeof __propDef.props;
+export type LockIconEvents = typeof __propDef.events;
+export type LockIconSlots = typeof __propDef.slots;
+export default class LockIcon extends SvelteComponent<LockIconProps, LockIconEvents, LockIconSlots> {
+}
+export {};

package/src/icons/LogoutIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Logout">
+      <path
+        id="icon_Logout"
+        d="M9.76471 10.8V12.2C9.76471 12.5713 9.61597 12.9274 9.35121 13.19C9.08645 13.4525 8.72736 13.6 8.35294 13.6L3.41177 13.6C3.03734 13.6 2.67825 13.4525 2.4135 13.19C2.14874 12.9274 2 12.5713 2 12.2L2 3.80003C2 3.42872 2.14874 3.07263 2.4135 2.81008C2.67825 2.54752 3.03734 2.40002 3.41176 2.40002L8.35294 2.40002C8.72736 2.40002 9.08645 2.54752 9.35121 2.81008C9.61597 3.07263 9.76471 3.42872 9.76471 3.80002V5.20002M5.52941 8.00002L14 8.00002M14 8.00002L11.8824 10.1M14 8.00002L11.8824 5.90002"
+        stroke="url(#grad-Logout)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Logout"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Logout">
+      <path
+        id="icon_Logout"
+        d="M9.76471 10.8V12.2C9.76471 12.5713 9.61597 12.9274 9.35121 13.19C9.08645 13.4525 8.72736 13.6 8.35294 13.6L3.41177 13.6C3.03734 13.6 2.67825 13.4525 2.4135 13.19C2.14874 12.9274 2 12.5713 2 12.2L2 3.80003C2 3.42872 2.14874 3.07263 2.4135 2.81008C2.67825 2.54752 3.03734 2.40002 3.41176 2.40002L8.35294 2.40002C8.72736 2.40002 9.08645 2.54752 9.35121 2.81008C9.61597 3.07263 9.76471 3.42872 9.76471 3.80002V5.20002M5.52941 8.00002L14 8.00002M14 8.00002L11.8824 10.1M14 8.00002L11.8824 5.90002"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/LogoutIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoutIconProps = typeof __propDef.props;
+export type LogoutIconEvents = typeof __propDef.events;
+export type LogoutIconSlots = typeof __propDef.slots;
+export default class LogoutIcon extends SvelteComponent<LogoutIconProps, LogoutIconEvents, LogoutIconSlots> {
+}
+export {};