@jis3r/icons 1.13.0 → 1.14.0

package/dist/icons/audio-lines.svelte

@@ -17,12 +17,220 @@
 		class: className = ''
 	} = $props();
 
+	let line1Y1 = $state(10);
+	let line1Y2 = $state(13);
+	let line2Y1 = $state(6);
+	let line2Y2 = $state(17);
+	let line3Y1 = $state(3);
+	let line3Y2 = $state(21);
+	let line4Y1 = $state(8);
+	let line4Y2 = $state(15);
+	let line5Y1 = $state(5);
+	let line5Y2 = $state(18);
+	let line6Y1 = $state(10);
+	let line6Y2 = $state(13);
+
+	let animationFrameId = $state(null);
+	let startTime = $state(null);
+	let isAnimatingBack = $state(false);
+	let startPositions = $state(null);
+
+	const originalPositions = {
+		line1: { y1: 10, y2: 13 },
+		line2: { y1: 6, y2: 17 },
+		line3: { y1: 3, y2: 21 },
+		line4: { y1: 8, y2: 15 },
+		line5: { y1: 5, y2: 18 },
+		line6: { y1: 10, y2: 13 }
+	};
+
+	const line1Keyframes = [
+		{ y1: 10, y2: 13 },
+		{ y1: 5, y2: 18 },
+		{ y1: 8, y2: 15 },
+		{ y1: 6, y2: 17 },
+		{ y1: 10, y2: 13 }
+	];
+
+	const line2Keyframes = [
+		{ y1: 6, y2: 17 },
+		{ y1: 2, y2: 22 },
+		{ y1: 10, y2: 13 },
+		{ y1: 6, y2: 17 }
+	];
+
+	const line3Keyframes = [
+		{ y1: 3, y2: 21 },
+		{ y1: 6, y2: 17 },
+		{ y1: 3, y2: 21 },
+		{ y1: 8, y2: 15 },
+		{ y1: 3, y2: 21 }
+	];
+
+	const line4Keyframes = [
+		{ y1: 8, y2: 15 },
+		{ y1: 4, y2: 19 },
+		{ y1: 7, y2: 16 },
+		{ y1: 2, y2: 22 },
+		{ y1: 8, y2: 15 }
+	];
+
+	const line5Keyframes = [
+		{ y1: 5, y2: 18 },
+		{ y1: 10, y2: 13 },
+		{ y1: 4, y2: 19 },
+		{ y1: 8, y2: 15 },
+		{ y1: 5, y2: 18 }
+	];
+
+	const line6Keyframes = [
+		{ y1: 10, y2: 13 },
+		{ y1: 8, y2: 15 },
+		{ y1: 5, y2: 18 },
+		{ y1: 10, y2: 13 }
+	];
+
+	function easeOutCubic(t) {
+		return 1 - Math.pow(1 - t, 3);
+	}
+
+	function interpolateKeyframes(keyframes, progress) {
+		const totalFrames = keyframes.length - 1;
+		const frameIndex = progress * totalFrames;
+		const frame = Math.floor(frameIndex);
+		const nextFrame = Math.min(frame + 1, totalFrames);
+		const t = frameIndex - frame;
+
+		const current = keyframes[frame];
+		const next = keyframes[nextFrame];
+
+		return {
+			y1: current.y1 + (next.y1 - current.y1) * t,
+			y2: current.y2 + (next.y2 - current.y2) * t
+		};
+	}
+
+	function animate(timestamp) {
+		if (!startTime) startTime = timestamp;
+		const elapsed = (timestamp - startTime) / 1000;
+
+		if (isAnimatingBack && startPositions) {
+			const duration = 0.4;
+			const progress = Math.min(elapsed / duration, 1);
+			const easedProgress = easeOutCubic(progress);
+
+			line1Y1 =
+				startPositions.line1.y1 +
+				(originalPositions.line1.y1 - startPositions.line1.y1) * easedProgress;
+			line1Y2 =
+				startPositions.line1.y2 +
+				(originalPositions.line1.y2 - startPositions.line1.y2) * easedProgress;
+			line2Y1 =
+				startPositions.line2.y1 +
+				(originalPositions.line2.y1 - startPositions.line2.y1) * easedProgress;
+			line2Y2 =
+				startPositions.line2.y2 +
+				(originalPositions.line2.y2 - startPositions.line2.y2) * easedProgress;
+			line3Y1 =
+				startPositions.line3.y1 +
+				(originalPositions.line3.y1 - startPositions.line3.y1) * easedProgress;
+			line3Y2 =
+				startPositions.line3.y2 +
+				(originalPositions.line3.y2 - startPositions.line3.y2) * easedProgress;
+			line4Y1 =
+				startPositions.line4.y1 +
+				(originalPositions.line4.y1 - startPositions.line4.y1) * easedProgress;
+			line4Y2 =
+				startPositions.line4.y2 +
+				(originalPositions.line4.y2 - startPositions.line4.y2) * easedProgress;
+			line5Y1 =
+				startPositions.line5.y1 +
+				(originalPositions.line5.y1 - startPositions.line5.y1) * easedProgress;
+			line5Y2 =
+				startPositions.line5.y2 +
+				(originalPositions.line5.y2 - startPositions.line5.y2) * easedProgress;
+			line6Y1 =
+				startPositions.line6.y1 +
+				(originalPositions.line6.y1 - startPositions.line6.y1) * easedProgress;
+			line6Y2 =
+				startPositions.line6.y2 +
+				(originalPositions.line6.y2 - startPositions.line6.y2) * easedProgress;
+
+			if (progress < 1) {
+				animationFrameId = requestAnimationFrame(animate);
+			} else {
+				line1Y1 = originalPositions.line1.y1;
+				line1Y2 = originalPositions.line1.y2;
+				line2Y1 = originalPositions.line2.y1;
+				line2Y2 = originalPositions.line2.y2;
+				line3Y1 = originalPositions.line3.y1;
+				line3Y2 = originalPositions.line3.y2;
+				line4Y1 = originalPositions.line4.y1;
+				line4Y2 = originalPositions.line4.y2;
+				line5Y1 = originalPositions.line5.y1;
+				line5Y2 = originalPositions.line5.y2;
+				line6Y1 = originalPositions.line6.y1;
+				line6Y2 = originalPositions.line6.y2;
+				isAnimatingBack = false;
+				startPositions = null;
+				animationFrameId = null;
+			}
+		} else {
+			const duration = 1.5;
+			const progress = (elapsed % duration) / duration;
+
+			const line1 = interpolateKeyframes(line1Keyframes, progress);
+			line1Y1 = line1.y1;
+			line1Y2 = line1.y2;
+
+			const line2 = interpolateKeyframes(line2Keyframes, progress);
+			line2Y1 = line2.y1;
+			line2Y2 = line2.y2;
+
+			const line3 = interpolateKeyframes(line3Keyframes, progress);
+			line3Y1 = line3.y1;
+			line3Y2 = line3.y2;
+
+			const line4 = interpolateKeyframes(line4Keyframes, progress);
+			line4Y1 = line4.y1;
+			line4Y2 = line4.y2;
+
+			const line5 = interpolateKeyframes(line5Keyframes, progress);
+			line5Y1 = line5.y1;
+			line5Y2 = line5.y2;
+
+			const line6 = interpolateKeyframes(line6Keyframes, progress);
+			line6Y1 = line6.y1;
+			line6Y2 = line6.y2;
+
+			if (isHovered) {
+				animationFrameId = requestAnimationFrame(animate);
+			}
+		}
+	}
+
 	function handleMouseEnter() {
 		isHovered = true;
+		isAnimatingBack = false;
+		startTime = null;
+		animationFrameId = requestAnimationFrame(animate);
 	}
 
 	function handleMouseLeave() {
 		isHovered = false;
+		startPositions = {
+			line1: { y1: line1Y1, y2: line1Y2 },
+			line2: { y1: line2Y1, y2: line2Y2 },
+			line3: { y1: line3Y1, y2: line3Y2 },
+			line4: { y1: line4Y1, y2: line4Y2 },
+			line5: { y1: line5Y1, y2: line5Y2 },
+			line6: { y1: line6Y1, y2: line6Y2 }
+		};
+		isAnimatingBack = true;
+		startTime = null;
+		if (!animationFrameId) {
+			animationFrameId = requestAnimationFrame(animate);
+		}
 	}
 </script>
 
@@ -46,12 +254,12 @@
 		class="audio-lines-icon"
 		class:animate={isHovered}
 	>
-		<path d="M2 10v3" />
-		<path d="M6 6v11" class="line line1" />
-		<path d="M10 3v18" class="line line2" />
-		<path d="M14 8v7" class="line line3" />
-		<path d="M18 5v13" class="line line4" />
-		<path d="M22 10v3" />
+		<line x1="2" y1={line1Y1} x2="2" y2={line1Y2} />
+		<line x1="6" y1={line2Y1} x2="6" y2={line2Y2} />
+		<line x1="10" y1={line3Y1} x2="10" y2={line3Y2} />
+		<line x1="14" y1={line4Y1} x2="14" y2={line4Y2} />
+		<line x1="18" y1={line5Y1} x2="18" y2={line5Y2} />
+		<line x1="22" y1={line6Y1} x2="22" y2={line6Y2} />
 	</svg>
 </div>
 
@@ -59,71 +267,8 @@
 	div {
 		display: inline-block;
 	}
+
 	.audio-lines-icon {
 		overflow: visible;
 	}
-
-	.line {
-		transition: d 0.3s ease;
-	}
-
-	.audio-lines-icon.animate .line {
-		animation-play-state: running;
-	}
-
-	.line1 {
-		animation: line1Animation 1.5s infinite ease-in-out paused;
-	}
-
-	.line2 {
-		animation: line2Animation 1s infinite ease-in-out paused;
-	}
-
-	.line3 {
-		animation: line3Animation 0.8s infinite ease-in-out paused;
-	}
-
-	.line4 {
-		animation: line4Animation 1.5s infinite ease-in-out paused;
-	}
-
-	@keyframes line1Animation {
-		0%,
-		100% {
-			d: path('M6 6v11');
-		}
-		50% {
-			d: path('M6 10v3');
-		}
-	}
-
-	@keyframes line2Animation {
-		0%,
-		100% {
-			d: path('M10 3v18');
-		}
-		50% {
-			d: path('M10 9v5');
-		}
-	}
-
-	@keyframes line3Animation {
-		0%,
-		100% {
-			d: path('M14 8v7');
-		}
-		50% {
-			d: path('M14 6v11');
-		}
-	}
-
-	@keyframes line4Animation {
-		0%,
-		100% {
-			d: path('M18 5v13');
-		}
-		50% {
-			d: path('M18 7v9');
-		}
-	}
 </style>

package/dist/icons/cloud-moon.svelte

@@ -0,0 +1,108 @@
+<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() {
+		if (isHovered) return;
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 1400);
+	}
+</script>
+
+<div class={className} aria-label="cloud-moon" 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="cloud-moon-icon"
+		class:animate={isHovered}
+	>
+		<path d="M13 16a3 3 0 0 1 0 6H7a5 5 0 1 1 4.9-6z" class="cloud-moon-path1" />
+		<path
+			d="M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"
+			class="cloud-moon-path2"
+		/>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.cloud-moon-icon {
+		overflow: visible;
+	}
+
+	.cloud-moon-path1 {
+		transform: translate(0, 0);
+		transition: transform 0.1s ease-in-out;
+	}
+
+	.cloud-moon-path2 {
+		transform: rotate(0deg);
+		transform-origin: center;
+		transition: transform 0.1s ease-in-out;
+	}
+
+	.cloud-moon-icon.animate .cloud-moon-path1 {
+		animation: cloudMoonPath1 1.4s ease-in-out forwards;
+	}
+
+	.cloud-moon-icon.animate .cloud-moon-path2 {
+		animation: cloudMoonPath2 1.4s ease-in-out forwards;
+	}
+
+	@keyframes cloudMoonPath1 {
+		0% {
+			transform: translate(0, 0);
+		}
+		33.33% {
+			transform: translate(-1px, -1px);
+		}
+		66.66% {
+			transform: translate(1px, 1px);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
+
+	@keyframes cloudMoonPath2 {
+		0% {
+			transform: rotate(0deg);
+		}
+		33.33% {
+			transform: rotate(6deg);
+		}
+		66.66% {
+			transform: rotate(-8deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+</style>

package/dist/icons/cloud-moon.svelte.d.ts

@@ -0,0 +1,19 @@
+export default CloudMoon;
+type CloudMoon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const CloudMoon: 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;
+};

package/dist/icons/index.js

@@ -180,6 +180,7 @@ import clock8 from './clock-8.svelte';
 import clock9 from './clock-9.svelte';
 import cloudCog from './cloud-cog.svelte';
 import cloudDownload from './cloud-download.svelte';
+import cloudMoon from './cloud-moon.svelte';
 import cloudOff from './cloud-off.svelte';
 import cloudUpload from './cloud-upload.svelte';
 import cog from './cog.svelte';
@@ -2555,6 +2556,12 @@ let ICONS_LIST = [
 		tags: ['import'],
 		categories: ['arrows', 'files']
 	},
+	{
+		name: 'cloud-moon',
+		icon: cloudMoon,
+		tags: ['weather', 'night'],
+		categories: ['weather']
+	},
 	{
 		name: 'cloud-off',
 		icon: cloudOff,

package/dist/index.d.ts

@@ -180,6 +180,7 @@ export { default as Clock9 } from "./icons/clock-9.svelte";
 export { default as Clock } from "./icons/clock.svelte";
 export { default as CloudCog } from "./icons/cloud-cog.svelte";
 export { default as CloudDownload } from "./icons/cloud-download.svelte";
+export { default as CloudMoon } from "./icons/cloud-moon.svelte";
 export { default as CloudOff } from "./icons/cloud-off.svelte";
 export { default as CloudUpload } from "./icons/cloud-upload.svelte";
 export { default as Cog } from "./icons/cog.svelte";

package/dist/index.js

@@ -180,6 +180,7 @@ export { default as Clock9 } from './icons/clock-9.svelte';
 export { default as Clock } from './icons/clock.svelte';
 export { default as CloudCog } from './icons/cloud-cog.svelte';
 export { default as CloudDownload } from './icons/cloud-download.svelte';
+export { default as CloudMoon } from './icons/cloud-moon.svelte';
 export { default as CloudOff } from './icons/cloud-off.svelte';
 export { default as CloudUpload } from './icons/cloud-upload.svelte';
 export { default as Cog } from './icons/cog.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.13.0",
+	"version": "1.14.0",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"keywords": [
 		"svelte",
@@ -86,4 +86,4 @@
 	"overrides": {
 		"cookie": "0.7.0"
 	}
-}
+}