@jis3r/icons 1.0.0

package/dist/icons/folder-pen.svelte

@@ -0,0 +1,82 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 1000);
+	}
+</script>
+
+<div class={className} aria-label="folder-pen" role="img" onmouseenter={handleMouseEnter}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="folder-pen-icon"
+	>
+		<path
+			d="M2 11.5V5a2 2 0 0 1 2-2h3.9c.7 0 1.3.3 1.7.9l.8 1.2c.4.6 1 .9 1.7.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9.5"
+		/>
+		<path
+			d="M11.378 13.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"
+			class="pen"
+			class:animate={isHovered}
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.folder-pen-icon {
+		overflow: visible;
+	}
+
+	.pen {
+		transform-origin: 11.378px 13.626px;
+		transition: transform 0.25s ease-in-out;
+	}
+
+	.pen.animate {
+		animation: penWiggle 0.5s ease-in-out 2;
+	}
+
+	@keyframes penWiggle {
+		0%,
+		100% {
+			transform: rotate(0deg) translate(0px, 0px);
+		}
+		25% {
+			transform: rotate(-0.5deg) translate(-1px, 1.5px);
+		}
+		75% {
+			transform: rotate(0.5deg) translate(1.5px, -1px);
+		}
+	}
+</style>

package/dist/icons/folder-pen.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FolderPenProps */
+/** @typedef {typeof __propDef.events}  FolderPenEvents */
+/** @typedef {typeof __propDef.slots}  FolderPenSlots */
+export default class FolderPen extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FolderPenProps = typeof __propDef.props;
+export type FolderPenEvents = typeof __propDef.events;
+export type FolderPenSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/folder-plus.svelte

@@ -0,0 +1,90 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+		setTimeout(() => {
+			isHovered = false;
+		}, 500);
+	}
+</script>
+
+<div class={className} aria-label="folder-plus" role="img" onmouseenter={handleMouseEnter}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="folder-plus"
+		class:animate={isHovered}
+	>
+		<path
+			d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+			class="folder"
+		/>
+		<path d="M12 10v6" class="vertical" />
+		<path d="M9 13h6" class="horizontal" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.folder-plus {
+		overflow: visible;
+	}
+
+	.horizontal,
+	.vertical {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.folder-plus.animate .horizontal {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.folder-plus.animate .vertical {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/folder-plus.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FolderPlusProps */
+/** @typedef {typeof __propDef.events}  FolderPlusEvents */
+/** @typedef {typeof __propDef.slots}  FolderPlusSlots */
+export default class FolderPlus extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FolderPlusProps = typeof __propDef.props;
+export type FolderPlusEvents = typeof __propDef.events;
+export type FolderPlusSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/folder-sync.svelte

@@ -0,0 +1,77 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="folder-sync"
+	role="img"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class:animate={isHovered}
+	>
+		<path
+			d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v.5"
+		/>
+		<g class="sync-arrows">
+			<path d="M12 10v4h4" />
+			<path d="m12 14 1.535-1.605a5 5 0 0 1 8 1.5" />
+			<path d="M22 22v-4h-4" />
+			<path d="m22 18-1.535 1.605a5 5 0 0 1-8-1.5" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.sync-arrows {
+		transform-origin: center;
+		transform-box: fill-box;
+		transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	}
+
+	.animate .sync-arrows {
+		transform: rotate(-50deg);
+	}
+
+	svg {
+		overflow: visible;
+	}
+</style>

package/dist/icons/folder-sync.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FolderSyncProps */
+/** @typedef {typeof __propDef.events}  FolderSyncEvents */
+/** @typedef {typeof __propDef.slots}  FolderSyncSlots */
+export default class FolderSync extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FolderSyncProps = typeof __propDef.props;
+export type FolderSyncEvents = typeof __propDef.events;
+export type FolderSyncSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/folder-up.svelte

@@ -0,0 +1,69 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	aria-label="folder-up"
+	role="img"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path
+			d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+		/>
+		<g class:animate={isHovered}>
+			<path d="M12 10v6" />
+			<path d="m9 13 3-3 3 3" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	g.animate path {
+		transform: translateY(-2px);
+		transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+	}
+	g path {
+		transform: translateY(0);
+		transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+	}
+</style>

package/dist/icons/folder-up.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FolderUpProps */
+/** @typedef {typeof __propDef.events}  FolderUpEvents */
+/** @typedef {typeof __propDef.slots}  FolderUpSlots */
+export default class FolderUp extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FolderUpProps = typeof __propDef.props;
+export type FolderUpEvents = typeof __propDef.events;
+export type FolderUpSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/frame.svelte

@@ -0,0 +1,84 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="frame"
+	role="img"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<line
+			class:animate-line={isHovered}
+			x1="22"
+			x2="2"
+			y1="6"
+			y2="6"
+			style:transform={isHovered ? 'translateY(-4px)' : 'translateY(0)'}
+			style:transition="transform 0.17s ease-in-out"
+		/>
+		<line
+			class:animate-line={isHovered}
+			x1="22"
+			x2="2"
+			y1="18"
+			y2="18"
+			style:transform={isHovered ? 'translateY(4px)' : 'translateY(0)'}
+			style:transition="transform 0.17s ease-in-out"
+		/>
+		<line
+			class:animate-line={isHovered}
+			x1="6"
+			x2="6"
+			y1="2"
+			y2="22"
+			style:transform={isHovered ? 'translateX(-4px)' : 'translateX(0)'}
+			style:transition="transform 0.17s ease-in-out"
+		/>
+		<line
+			class:animate-line={isHovered}
+			x1="18"
+			x2="18"
+			y1="2"
+			y2="22"
+			style:transform={isHovered ? 'translateX(4px)' : 'translateX(0)'}
+			style:transition="transform 0.17s ease-in-out"
+		/>
+	</svg>
+</div>

package/dist/icons/frame.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FrameProps */
+/** @typedef {typeof __propDef.events}  FrameEvents */
+/** @typedef {typeof __propDef.slots}  FrameSlots */
+export default class Frame extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FrameProps = typeof __propDef.props;
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/icons/gallery-horizontal-end.svelte

@@ -0,0 +1,110 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 600);
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="gallery-horizontal-end"
+	role="img"
+	onmouseenter={handleMouseEnter}
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M2 7v10" class:animate={isHovered} custom={1} />
+		<path d="M6 5v14" class:animate={isHovered} custom={2} />
+		<rect width="12" height="18" x="10" y="3" rx="2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	path {
+		transition:
+			transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+			opacity 0.3s ease;
+		transform-origin: center;
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	path[custom='1'].animate {
+		animation: disappearThenAppear1 0.6s forwards;
+	}
+
+	path[custom='2'].animate {
+		animation: disappearThenAppear2 0.6s forwards;
+	}
+
+	@keyframes disappearThenAppear1 {
+		0% {
+			opacity: 0;
+			transform: translateX(3px);
+		}
+		60% {
+			opacity: 0;
+			transform: translateX(3px);
+		}
+		80% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes disappearThenAppear2 {
+		0% {
+			opacity: 0;
+			transform: translateX(3px);
+		}
+		40% {
+			opacity: 0;
+			transform: translateX(3px);
+		}
+		60% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+</style>

package/dist/icons/gallery-horizontal-end.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  GalleryHorizontalEndProps */
+/** @typedef {typeof __propDef.events}  GalleryHorizontalEndEvents */
+/** @typedef {typeof __propDef.slots}  GalleryHorizontalEndSlots */
+export default class GalleryHorizontalEnd extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GalleryHorizontalEndProps = typeof __propDef.props;
+export type GalleryHorizontalEndEvents = typeof __propDef.events;
+export type GalleryHorizontalEndSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};