@jis3r/icons 1.2.0 → 1.6.0

package/dist/icons/bookmark-x.svelte

@@ -0,0 +1,114 @@
+<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="bookmark-x" 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="bookmark-x-icon"
+		class:animate={isHovered}
+	>
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class="bookmark-path" />
+		<path d="m14.5 7.5-5 5" class="diagonal-1" />
+		<path d="m9.5 7.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.bookmark-x-icon {
+		overflow: visible;
+	}
+
+	.bookmark-path {
+		transform-origin: center;
+		transition: transform 0.3s ease-out;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.bookmark-x-icon.animate .bookmark-path {
+		animation: bookmarkBounce 0.6s ease-out;
+	}
+
+	.bookmark-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.bookmark-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes bookmarkBounce {
+		0% {
+			transform: scale(1, 1);
+		}
+		25% {
+			transform: scale(0.9, 1.3);
+		}
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
+		}
+		100% {
+			transform: scale(1, 1);
+		}
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/{file-warning.svelte.d.ts → bookmark-x.svelte.d.ts}

@@ -1,9 +1,9 @@
-export default FileWarning;
-type FileWarning = {
+export default BookmarkX;
+type BookmarkX = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const FileWarning: import("svelte").Component<{
+declare const BookmarkX: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/bookmark.svelte

@@ -0,0 +1,81 @@
+<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 = 28,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="bookmark" 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="bookmark-icon"
+		class:animate={isHovered}
+	>
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class="bookmark-path" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.bookmark-icon {
+		overflow: visible;
+	}
+
+	.bookmark-path {
+		transform-origin: center;
+		transition: transform 0.3s ease-out;
+	}
+
+	.bookmark-icon.animate .bookmark-path {
+		animation: bookmarkBounce 0.6s ease-out;
+	}
+
+	@keyframes bookmarkBounce {
+		0% {
+			transform: scale(1, 1);
+		}
+		25% {
+			transform: scale(0.9, 1.3);
+		}
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
+		}
+		100% {
+			transform: scale(1, 1);
+		}
+	}
+</style>

package/dist/icons/{align-center.svelte.d.ts → bookmark.svelte.d.ts}

@@ -1,9 +1,9 @@
-export default AlignCenter;
-type AlignCenter = {
+export default Bookmark;
+type Bookmark = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const AlignCenter: import("svelte").Component<{
+declare const Bookmark: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/bot.svelte

@@ -0,0 +1,94 @@
+<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();
+
+	let eyeY1 = $state(13);
+	let eyeY2 = $state(15);
+
+	function animateEyes(startY1, startY2, endY1, endY2, duration, delay = 0) {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				const startTime = performance.now();
+				const animate = (currentTime) => {
+					const elapsed = currentTime - startTime;
+					const progress = Math.min(elapsed / duration, 1);
+
+					const eased =
+						progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+
+					eyeY1 = startY1 + (endY1 - startY1) * eased;
+					eyeY2 = startY2 + (endY2 - startY2) * eased;
+
+					if (progress < 1) {
+						requestAnimationFrame(animate);
+					} else {
+						resolve();
+					}
+				};
+				requestAnimationFrame(animate);
+			}, delay);
+		});
+	}
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		animateEyes(13, 15, 14, 14, 250, 200).then(() => {
+			animateEyes(14, 14, 13, 15, 250).then(() => {
+				isHovered = false;
+			});
+		});
+	}
+</script>
+
+<div class={className} aria-label="bot" 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="bot-icon"
+		class:animate={isHovered}
+	>
+		<path d="M12 8V4H8" />
+		<rect width="16" height="12" x="4" y="8" rx="2" />
+		<path d="M2 14h2" />
+		<path d="M20 14h2" />
+		<line x1="15" y1={eyeY1} x2="15" y2={eyeY2} class="eye-right" />
+		<line x1="9" y1={eyeY1} x2="9" y2={eyeY2} class="eye-left" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.bot-icon {
+		overflow: visible;
+	}
+
+	.eye-left,
+	.eye-right {
+		transition: none;
+	}
+</style>

package/dist/icons/{file-check-2.svelte.d.ts → bot.svelte.d.ts}

@@ -1,9 +1,9 @@
-export default FileCheck_2;
-type FileCheck_2 = {
+export default Bot;
+type Bot = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const FileCheck_2: import("svelte").Component<{
+declare const Bot: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/calendar-check-2.svelte.d.ts

@@ -1,9 +1,9 @@
-export default CalendarCheck_2;
-type CalendarCheck_2 = {
+export default CalendarCheck2;
+type CalendarCheck2 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const CalendarCheck_2: import("svelte").Component<{
+declare const CalendarCheck2: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-1.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_1;
-type Clock_1 = {
+export default Clock1;
+type Clock1 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_1: import("svelte").Component<{
+declare const Clock1: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-10.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_10;
-type Clock_10 = {
+export default Clock10;
+type Clock10 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_10: import("svelte").Component<{
+declare const Clock10: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-11.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_11;
-type Clock_11 = {
+export default Clock11;
+type Clock11 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_11: import("svelte").Component<{
+declare const Clock11: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-12.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_12;
-type Clock_12 = {
+export default Clock12;
+type Clock12 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_12: import("svelte").Component<{
+declare const Clock12: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-2.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_2;
-type Clock_2 = {
+export default Clock2;
+type Clock2 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_2: import("svelte").Component<{
+declare const Clock2: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-3.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_3;
-type Clock_3 = {
+export default Clock3;
+type Clock3 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_3: import("svelte").Component<{
+declare const Clock3: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-4.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_4;
-type Clock_4 = {
+export default Clock4;
+type Clock4 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_4: import("svelte").Component<{
+declare const Clock4: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-5.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_5;
-type Clock_5 = {
+export default Clock5;
+type Clock5 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_5: import("svelte").Component<{
+declare const Clock5: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-6.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_6;
-type Clock_6 = {
+export default Clock6;
+type Clock6 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_6: import("svelte").Component<{
+declare const Clock6: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-7.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_7;
-type Clock_7 = {
+export default Clock7;
+type Clock7 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_7: import("svelte").Component<{
+declare const Clock7: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-8.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_8;
-type Clock_8 = {
+export default Clock8;
+type Clock8 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_8: import("svelte").Component<{
+declare const Clock8: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/clock-9.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Clock_9;
-type Clock_9 = {
+export default Clock9;
+type Clock9 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Clock_9: import("svelte").Component<{
+declare const Clock9: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-1.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_1;
-type Dice_1 = {
+export default Dice1;
+type Dice1 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_1: import("svelte").Component<{
+declare const Dice1: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-2.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_2;
-type Dice_2 = {
+export default Dice2;
+type Dice2 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_2: import("svelte").Component<{
+declare const Dice2: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-3.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_3;
-type Dice_3 = {
+export default Dice3;
+type Dice3 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_3: import("svelte").Component<{
+declare const Dice3: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-4.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_4;
-type Dice_4 = {
+export default Dice4;
+type Dice4 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_4: import("svelte").Component<{
+declare const Dice4: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-5.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_5;
-type Dice_5 = {
+export default Dice5;
+type Dice5 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_5: import("svelte").Component<{
+declare const Dice5: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/dice-6.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Dice_6;
-type Dice_6 = {
+export default Dice6;
+type Dice6 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Dice_6: import("svelte").Component<{
+declare const Dice6: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/disc-3.svelte.d.ts

@@ -1,9 +1,9 @@
-export default Disc_3;
-type Disc_3 = {
+export default Disc3;
+type Disc3 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const Disc_3: import("svelte").Component<{
+declare const Disc3: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/{file-check-2.svelte → file-check-corner.svelte}

@@ -25,7 +25,7 @@
 	}
 </script>
 
-<div class={className} aria-label="file-check-2" role="img" onmouseenter={handleMouseEnter}>
+<div class={className} aria-label="file-check-corner" role="img" onmouseenter={handleMouseEnter}>
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width={size}
@@ -36,12 +36,14 @@
 		stroke-width={strokeWidth}
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class="file-check-2-icon"
+		class="file-check-corner-icon"
 		class:animate={isHovered}
 	>
-		<path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<path d="m3 15 2 2 4-4" class="check-path" />
+		<path
+			d="M10.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v6"
+		/>
+		<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+		<path d="m14 20 2 2 4-4" class="check-path" />
 	</svg>
 </div>
 
@@ -49,7 +51,7 @@
 	div {
 		display: inline-block;
 	}
-	.file-check-2-icon {
+	.file-check-corner-icon {
 		overflow: visible;
 	}
 	.check-path {
@@ -59,7 +61,7 @@
 			stroke-dashoffset 0.125s ease-out,
 			opacity 0.125s ease-out;
 	}
-	.file-check-2-icon.animate .check-path {
+	.file-check-corner-icon.animate .check-path {
 		animation: checkAnimation 0.5s ease-out backwards;
 	}
 	@keyframes checkAnimation {

package/dist/icons/file-check-corner.svelte.d.ts

@@ -0,0 +1,19 @@
+export default FileCheckCorner;
+type FileCheckCorner = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FileCheckCorner: import("svelte").Component<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+}, {}, "">;
+type Props = {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+};