chromia 0.0.1 → 0.0.2

package/src/icons/CollectionIcon.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 CollectionIconProps = typeof __propDef.props;
+export type CollectionIconEvents = typeof __propDef.events;
+export type CollectionIconSlots = typeof __propDef.slots;
+export default class CollectionIcon extends SvelteComponent<CollectionIconProps, CollectionIconEvents, CollectionIconSlots> {
+}
+export {};

package/src/icons/CopyIcon.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 18 18"
+    fill="none"
+  >
+    <g id="id_Copy">
+      <path
+        id="icon_Copy"
+        d="M5.53388 7.64294L3.85879 9.31803C3.23319 9.94363 2.87343 10.7949 2.88 11.6895C2.88658 12.5841 3.23847 13.4405 3.89375 14.0755C4.52877 14.7308 5.38536 15.0827 6.27983 15.0893C7.1947 15.096 8.02577 14.7565 8.65141 14.1309L10.3265 12.4558M12.4661 10.3571L14.1412 8.68204C14.7668 8.05644 15.1266 7.20521 15.12 6.3106C15.1134 5.41599 14.7615 4.55958 14.1062 3.92453C13.4714 3.28966 12.6149 2.93776 11.7203 2.93118C10.8257 2.92461 9.97437 3.26395 9.34874 3.88957L7.67364 5.56466M6.45983 11.4954L11.4851 6.47013"
+        stroke="url(#grad-Copy)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Copy"
+        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 18 18"
+    fill="none"
+  >
+    <g id="id_Copy">
+      <path
+        id="icon_Copy"
+        d="M5.53388 7.64294L3.85879 9.31803C3.23319 9.94363 2.87343 10.7949 2.88 11.6895C2.88658 12.5841 3.23847 13.4405 3.89375 14.0755C4.52877 14.7308 5.38536 15.0827 6.27983 15.0893C7.1947 15.096 8.02577 14.7565 8.65141 14.1309L10.3265 12.4558M12.4661 10.3571L14.1412 8.68204C14.7668 8.05644 15.1266 7.20521 15.12 6.3106C15.1134 5.41599 14.7615 4.55958 14.1062 3.92453C13.4714 3.28966 12.6149 2.93776 11.7203 2.93118C10.8257 2.92461 9.97437 3.26395 9.34874 3.88957L7.67364 5.56466M6.45983 11.4954L11.4851 6.47013"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CopyIcon.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 CopyIconProps = typeof __propDef.props;
+export type CopyIconEvents = typeof __propDef.events;
+export type CopyIconSlots = typeof __propDef.slots;
+export default class CopyIcon extends SvelteComponent<CopyIconProps, CopyIconEvents, CopyIconSlots> {
+}
+export {};

package/src/icons/EditIcon.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 17 17"
+    fill="none"
+  >
+    <g id="id_Edit">
+      <path
+        id="icon_Edit"
+        d="M7.86579 2.48449H3.86579C2.54031 2.48449 1.46579 3.55901 1.46579 4.88449V12.8846C1.46579 14.21 2.54031 15.2846 3.86579 15.2846H11.8658C13.1913 15.2846 14.2658 14.21 14.2658 12.8846L14.2658 8.88453M5.46579 11.2845L8.37645 10.698C8.53096 10.6669 8.67284 10.5908 8.78427 10.4793L15.3001 3.95995C15.6125 3.64738 15.6122 3.14072 15.2996 2.82841L13.9193 1.44969C13.6068 1.13751 13.1004 1.13773 12.7881 1.45017L6.27163 7.9702C6.16042 8.08147 6.08449 8.22306 6.05332 8.37726L5.46579 11.2845Z"
+        stroke="url(#grad-Edit)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Edit"
+        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 17 17"
+    fill="none"
+  >
+    <g id="id_Edit">
+      <path
+        id="icon_Edit"
+        d="M7.86579 2.48449H3.86579C2.54031 2.48449 1.46579 3.55901 1.46579 4.88449V12.8846C1.46579 14.21 2.54031 15.2846 3.86579 15.2846H11.8658C13.1913 15.2846 14.2658 14.21 14.2658 12.8846L14.2658 8.88453M5.46579 11.2845L8.37645 10.698C8.53096 10.6669 8.67284 10.5908 8.78427 10.4793L15.3001 3.95995C15.6125 3.64738 15.6122 3.14072 15.2996 2.82841L13.9193 1.44969C13.6068 1.13751 13.1004 1.13773 12.7881 1.45017L6.27163 7.9702C6.16042 8.08147 6.08449 8.22306 6.05332 8.37726L5.46579 11.2845Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/EditIcon.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 EditIconProps = typeof __propDef.props;
+export type EditIconEvents = typeof __propDef.events;
+export type EditIconSlots = typeof __propDef.slots;
+export default class EditIcon extends SvelteComponent<EditIconProps, EditIconEvents, EditIconSlots> {
+}
+export {};

package/src/icons/FavoriteIcon.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_Favorite">
+      <path
+        id="icon_Favorite"
+        d="M2.80005 2.3999C2.80005 1.84762 3.24776 1.3999 3.80005 1.3999H10.2C10.7523 1.3999 11.2 1.84762 11.2 2.3999V11.5324C11.2 11.9563 10.7056 12.1879 10.38 11.9165L7.00005 9.0999L3.62014 11.9165C3.29448 12.1879 2.80005 11.9563 2.80005 11.5324V2.3999Z"
+        stroke="url(#grad-Favorite)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Favorite"
+        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_Favorite">
+      <path
+        id="icon_Favorite"
+        d="M2.80005 2.3999C2.80005 1.84762 3.24776 1.3999 3.80005 1.3999H10.2C10.7523 1.3999 11.2 1.84762 11.2 2.3999V11.5324C11.2 11.9563 10.7056 12.1879 10.38 11.9165L7.00005 9.0999L3.62014 11.9165C3.29448 12.1879 2.80005 11.9563 2.80005 11.5324V2.3999Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/FavoriteIcon.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 FavoriteIconProps = typeof __propDef.props;
+export type FavoriteIconEvents = typeof __propDef.events;
+export type FavoriteIconSlots = typeof __propDef.slots;
+export default class FavoriteIcon extends SvelteComponent<FavoriteIconProps, FavoriteIconEvents, FavoriteIconSlots> {
+}
+export {};

package/src/icons/FilterIcon.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_Filter">
+      <path
+        id="icon_Filter"
+        d="M3.84995 6.99995H10.15M2.44995 4.19995H11.55M5.94995 9.79995H8.04995"
+        stroke="url(#grad-Filter)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Filter"
+        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_Filter">
+      <path
+        id="icon_Filter"
+        d="M3.84995 6.99995H10.15M2.44995 4.19995H11.55M5.94995 9.79995H8.04995"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/FilterIcon.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 FilterIconProps = typeof __propDef.props;
+export type FilterIconEvents = typeof __propDef.events;
+export type FilterIconSlots = typeof __propDef.slots;
+export default class FilterIcon extends SvelteComponent<FilterIconProps, FilterIconEvents, FilterIconSlots> {
+}
+export {};

package/src/icons/FlameIcon.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 10 14"
+    fill="none"
+  >
+    <g id="id_Flame">
+      <path
+        id="icon_Flame"
+        d="M5.00002 12.5999C2.68416 12.5999 0.799988 10.8254 0.799988 8.64415C0.799988 5.5999 5.00005 1.3999 5.00005 1.3999C5.00005 1.3999 9.19999 5.5999 9.19999 8.64415C9.19999 10.8254 7.31588 12.5999 5.00002 12.5999ZM5.00002 12.5999C3.84209 12.5999 2.89999 11.7126 2.89999 10.622C2.89999 9.0999 5.00002 6.9999 5.00002 6.9999C5.00002 6.9999 7.09999 9.0999 7.09999 10.622C7.09999 11.7126 6.15795 12.5999 5.00002 12.5999Z"
+        stroke="url(#grad-Flame)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Flame"
+        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 10 14"
+    fill="none"
+  >
+    <g id="id_Flame">
+      <path
+        id="icon_Flame"
+        d="M5.00002 12.5999C2.68416 12.5999 0.799988 10.8254 0.799988 8.64415C0.799988 5.5999 5.00005 1.3999 5.00005 1.3999C5.00005 1.3999 9.19999 5.5999 9.19999 8.64415C9.19999 10.8254 7.31588 12.5999 5.00002 12.5999ZM5.00002 12.5999C3.84209 12.5999 2.89999 11.7126 2.89999 10.622C2.89999 9.0999 5.00002 6.9999 5.00002 6.9999C5.00002 6.9999 7.09999 9.0999 7.09999 10.622C7.09999 11.7126 6.15795 12.5999 5.00002 12.5999Z"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/FlameIcon.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 FlameIconProps = typeof __propDef.props;
+export type FlameIconEvents = typeof __propDef.events;
+export type FlameIconSlots = typeof __propDef.slots;
+export default class FlameIcon extends SvelteComponent<FlameIconProps, FlameIconEvents, FlameIconSlots> {
+}
+export {};

package/src/icons/FolderIcon.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_Folder">
+      <path
+        id="icon_Folder"
+        d="M11.421 6.11594V4.75805C11.421 4.20576 10.9732 3.75805 10.421 3.75805H7.11938C6.85416 3.75805 6.59981 3.65269 6.41227 3.46516L5.81911 2.87199C5.63157 2.68446 5.37722 2.5791 5.112 2.5791H2.3999C1.84762 2.5791 1.3999 3.02682 1.3999 3.5791V10.537C1.3999 11.0253 1.79578 11.4212 2.28411 11.4212H2.66933C2.94492 11.4212 3.16832 11.1978 3.16832 10.9222V10.9222C3.16832 10.8624 3.17908 10.803 3.20009 10.747L4.69342 6.76482C4.83978 6.37452 5.2129 6.11594 5.62974 6.11594H11.2125C11.895 6.11594 12.377 6.78464 12.1612 7.43217L11.0594 10.7374C10.9233 11.1458 10.5412 11.4212 10.1107 11.4212H2.57885"
+        stroke="url(#grad-Folder)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Folder"
+        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_Folder">
+      <path
+        id="icon_Folder"
+        d="M11.421 6.11594V4.75805C11.421 4.20576 10.9732 3.75805 10.421 3.75805H7.11938C6.85416 3.75805 6.59981 3.65269 6.41227 3.46516L5.81911 2.87199C5.63157 2.68446 5.37722 2.5791 5.112 2.5791H2.3999C1.84762 2.5791 1.3999 3.02682 1.3999 3.5791V10.537C1.3999 11.0253 1.79578 11.4212 2.28411 11.4212H2.66933C2.94492 11.4212 3.16832 11.1978 3.16832 10.9222V10.9222C3.16832 10.8624 3.17908 10.803 3.20009 10.747L4.69342 6.76482C4.83978 6.37452 5.2129 6.11594 5.62974 6.11594H11.2125C11.895 6.11594 12.377 6.78464 12.1612 7.43217L11.0594 10.7374C10.9233 11.1458 10.5412 11.4212 10.1107 11.4212H2.57885"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+