@jis3r/icons 2.1.0 → 2.3.0

package/dist/icons/message-circle.svelte

@@ -1,28 +1,20 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;
-		}, 500);
+		}, 800);
 	}
 </script>
 
@@ -37,9 +29,8 @@
 		stroke-width={strokeWidth}
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		class:animate-icon={animate}
 	>
-		<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+		<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class="message-circle-path" class:animate />
 	</svg>
 </div>
 
@@ -47,22 +38,29 @@
 	div {
 		display: inline-block;
 	}
-	.animate-icon {
-		animation: primaryAnimation 0.5s ease-in-out;
+	.message-circle-path {
+		transform-origin: bottom left;
 	}
 
-	@keyframes primaryAnimation {
+	.message-circle-path.animate {
+		animation: messageCircleAnimation 0.8s ease-in-out;
+	}
+
+	@keyframes messageCircleAnimation {
 		0% {
-			transform: scale(1) rotate(0deg);
-		}
-		20% {
-			transform: scale(1.05) rotate(-7deg);
+			transform: rotate(0deg);
 		}
 		40% {
-			transform: scale(1.05) rotate(7deg);
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
 		}
 		100% {
-			transform: scale(1) rotate(0deg);
+			transform: rotate(0deg);
 		}
 	}
 </style>

package/dist/icons/message-circle.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const MessageCircle: import("svelte").Component<IconProps, {}, "">;
+type MessageCircle = ReturnType<typeof MessageCircle>;
 export default MessageCircle;
-type MessageCircle = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const MessageCircle: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/message-square-code.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate = false,
+		class: className = ''
+	}: IconProps = $props();
+
+	function handleMouseEnter() {
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 800);
+	}
+</script>
+
+<div class={className} aria-label="message-square-code" 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:animate
+	>
+		<g class="message-square-code-group">
+			<path
+				d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+				class="message-square-code-path1"
+			/>
+			<path d="M10 7.5 8 10l2 2.5" class="message-square-code-path2" />
+			<path d="m14 7.5 2 2.5-2 2.5" class="message-square-code-path3" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-code-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-square-code-group {
+		animation: messageSquareCodeGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-square-code-path2 {
+		animation: messageSquareCodePath2Animation 0.6s ease-in-out;
+	}
+
+	.animate .message-square-code-path3 {
+		animation: messageSquareCodePath3Animation 0.6s ease-in-out;
+	}
+
+	@keyframes messageSquareCodeGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageSquareCodePath2Animation {
+		0% {
+			transform: translateX(0);
+		}
+		33.33% {
+			transform: translateX(-1.5px);
+		}
+		66.67% {
+			transform: translateX(0.75px);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes messageSquareCodePath3Animation {
+		0% {
+			transform: translateX(0);
+		}
+		33.33% {
+			transform: translateX(1.5px);
+		}
+		66.67% {
+			transform: translateX(-0.75px);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

package/dist/icons/message-square-code.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './types.js';
+declare const MessageSquareCode: import("svelte").Component<IconProps, {}, "">;
+type MessageSquareCode = ReturnType<typeof MessageSquareCode>;
+export default MessageSquareCode;

package/dist/icons/message-square-dashed.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate = false,
+		class: className = ''
+	}: IconProps = $props();
+
+	function handleMouseEnter() {
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 800);
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="message-square-dashed"
+	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:animate
+	>
+		<g class="message-square-dashed-group">
+			<path d="M5 3a2 2 0 0 0-2 2" class="message-square-dashed-path1" />
+			<path d="M9 3h1" class="message-square-dashed-path2" />
+			<path d="M14 3h1" class="message-square-dashed-path3" />
+			<path d="M19 3a2 2 0 0 1 2 2" class="message-square-dashed-path4" />
+			<path d="M21 9v1" class="message-square-dashed-path5" />
+			<path d="M21 14v1a2 2 0 0 1-2 2" class="message-square-dashed-path6" />
+			<path d="M14 17h1" class="message-square-dashed-path7" />
+			<path d="M10 17H7l-4 4v-7" class="message-square-dashed-path8" />
+			<path d="M3 9v1" class="message-square-dashed-path9" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-dashed-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-square-dashed-group {
+		animation: messageSquareDashedGroupAnimation 0.8s ease-in-out;
+	}
+
+	@keyframes messageSquareDashedGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+</style>

package/dist/icons/message-square-dashed.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './types.js';
+declare const MessageSquareDashed: import("svelte").Component<IconProps, {}, "">;
+type MessageSquareDashed = ReturnType<typeof MessageSquareDashed>;
+export default MessageSquareDashed;

package/dist/icons/message-square-dot.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate = false,
+		class: className = ''
+	}: IconProps = $props();
+
+	function handleMouseEnter() {
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 800);
+	}
+</script>
+
+<div class={className} aria-label="message-square-dot" 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:animate
+	>
+		<g class="message-square-dot-group">
+			<path
+				d="M11.7 3H5a2 2 0 0 0-2 2v16l4-4h12a2 2 0 0 0 2-2v-2.7"
+				class="message-square-dot-path"
+			/>
+			<circle cx="18" cy="6" r="3" class="message-square-dot-circle" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-dot-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-square-dot-group {
+		animation: messageSquareDotGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-square-dot-circle {
+		animation: messageSquareDotCircleAnimation 0.6s ease-in-out;
+	}
+
+	@keyframes messageSquareDotGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageSquareDotCircleAnimation {
+		0% {
+			transform: translate(0, 0);
+		}
+		50% {
+			transform: translate(-2px, 2px);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
+</style>

package/dist/icons/message-square-dot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './types.js';
+declare const MessageSquareDot: import("svelte").Component<IconProps, {}, "">;
+type MessageSquareDot = ReturnType<typeof MessageSquareDot>;
+export default MessageSquareDot;

package/dist/icons/message-square-heart.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate = false,
+		class: className = ''
+	}: IconProps = $props();
+
+	function handleMouseEnter() {
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 800);
+	}
+</script>
+
+<div class={className} aria-label="message-square-heart" 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:animate
+	>
+		<g class="message-square-heart-group">
+			<path
+				d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+				class="message-square-heart-path1"
+			/>
+			<path
+				d="M14.8 7.5a1.84 1.84 0 0 0-2.6 0l-.2.3-.3-.3a1.84 1.84 0 1 0-2.4 2.8L12 13l2.7-2.7c.9-.9.8-2.1.1-2.8"
+				class="message-square-heart-path2"
+			/>
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-heart-group {
+		transform-origin: bottom left;
+	}
+
+	.message-square-heart-path2 {
+		transform-origin: center;
+	}
+
+	.animate .message-square-heart-group {
+		animation: messageSquareHeartGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-square-heart-path2 {
+		animation: messageSquareHeartPath2Animation 0.8s ease-in-out;
+	}
+
+	@keyframes messageSquareHeartGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageSquareHeartPath2Animation {
+		0% {
+			transform: scale(1);
+		}
+		25% {
+			transform: scale(0.7);
+		}
+		50% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

package/dist/icons/message-square-heart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from './types.js';
+declare const MessageSquareHeart: import("svelte").Component<IconProps, {}, "">;
+type MessageSquareHeart = ReturnType<typeof MessageSquareHeart>;
+export default MessageSquareHeart;

package/dist/icons/message-square-more.svelte

@@ -1,38 +1,94 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
-
-	/** @type {Props} */
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
+
+	let line1Y1 = $state(10);
+	let line1Y2 = $state(10);
+	let line2Y1 = $state(10);
+	let line2Y2 = $state(10);
+	let line3Y1 = $state(10);
+	let line3Y2 = $state(10);
+
+	function easeInOut(t: number): number {
+		return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+	}
+
+	function animateLine(
+		startY1: number,
+		startY2: number,
+		midY1: number,
+		midY2: number,
+		endY1: number,
+		endY2: number,
+		duration: number,
+		delay: number,
+		callback: (y1: number, y2: number) => void
+	): void {
+		setTimeout(() => {
+			const startTime = performance.now();
+			function frame(currentTime: number): void {
+				const elapsed = (currentTime - startTime) / 1000;
+				const progress = Math.min(elapsed / duration, 1);
+				const eased = easeInOut(progress);
+
+				let y1, y2;
+				if (progress < 0.5) {
+					const t = progress * 2;
+					const localEased = easeInOut(t);
+					y1 = startY1 + (midY1 - startY1) * localEased;
+					y2 = startY2 + (midY2 - startY2) * localEased;
+				} else {
+					const t = (progress - 0.5) * 2;
+					const localEased = easeInOut(t);
+					y1 = midY1 + (endY1 - midY1) * localEased;
+					y2 = midY2 + (endY2 - midY2) * localEased;
+				}
+
+				callback(y1, y2);
+
+				if (progress < 1) {
+					requestAnimationFrame(frame);
+				} else {
+					callback(endY1, endY2);
+				}
+			}
+			requestAnimationFrame(frame);
+		}, delay * 1000);
+	}
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-	}
 
-	function handleMouseLeave() {
-		animate = false;
+		animateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.2, (y1, y2) => {
+			line1Y1 = y1;
+			line1Y2 = y2;
+		});
+
+		animateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.1, (y1, y2) => {
+			line2Y1 = y1;
+			line2Y2 = y2;
+		});
+
+		animateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0, (y1, y2) => {
+			line3Y1 = y1;
+			line3Y2 = y2;
+		});
+
+		setTimeout(() => {
+			animate = false;
+		}, 800);
 	}
 </script>
 
-<div
-	class={className}
-	aria-label="message-square-more"
-	role="img"
-	onmouseenter={handleMouseEnter}
-	onmouseleave={handleMouseLeave}
->
+<div class={className} aria-label="message-square-more" role="img" onmouseenter={handleMouseEnter}>
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width={size}
@@ -44,12 +100,13 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="message-square-more-icon"
-		class:animate
 	>
-		<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-		<path class="dot dot1" d="M8 10h.01" />
-		<path class="dot dot2" d="M12 10h.01" />
-		<path class="dot dot3" d="M16 10h.01" />
+		<g class="message-square-more-group" class:animate>
+			<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+			<line x1="16" y1={line1Y1} x2="16" y2={line1Y2} />
+			<line x1="12" y1={line2Y1} x2="12" y2={line2Y2} />
+			<line x1="8" y1={line3Y1} x2="8" y2={line3Y2} />
+		</g>
 	</svg>
 </div>
 
@@ -61,47 +118,29 @@
 		overflow: visible;
 	}
 
-	.dot {
-		opacity: 1;
-		transition: opacity 0.1s ease;
-	}
-
-	.message-square-more-icon.animate .dot {
-		animation: dotAnimation 1.5s infinite;
-	}
-
-	.message-square-more-icon.animate .dot1 {
-		animation-delay: 0s;
-	}
-
-	.message-square-more-icon.animate .dot2 {
-		animation-delay: 0.1s;
+	.message-square-more-group {
+		transform-origin: bottom left;
 	}
 
-	.message-square-more-icon.animate .dot3 {
-		animation-delay: 0.2s;
+	.message-square-more-group.animate {
+		animation: groupRotation 0.8s ease-in-out;
 	}
 
-	@keyframes dotAnimation {
-		0%,
-		100% {
-			opacity: 1;
+	@keyframes groupRotation {
+		0% {
+			transform: rotate(0deg);
 		}
-		10%,
-		20% {
-			opacity: 0;
+		40% {
+			transform: rotate(8deg);
 		}
-		30%,
-		50% {
-			opacity: 1;
+		60% {
+			transform: rotate(-8deg);
 		}
-		60%,
-		70% {
-			opacity: 0;
+		80% {
+			transform: rotate(2deg);
 		}
-		80%,
-		90% {
-			opacity: 1;
+		100% {
+			transform: rotate(0deg);
 		}
 	}
 </style>