@jis3r/icons 2.2.0 → 2.4.0

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-quote.svelte

@@ -0,0 +1,106 @@
+<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-quote" 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-quote-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-quote-path1"
+			/>
+			<path d="M8 12a2 2 0 0 0 2-2V8H8" class="message-square-quote-path2" />
+			<path d="M14 12a2 2 0 0 0 2-2V8h-2" class="message-square-quote-path3" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-quote-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-square-quote-group {
+		animation: messageSquareQuoteGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-square-quote-path2 {
+		animation: messageSquareQuotePath2Animation 0.6s ease-in-out;
+	}
+
+	.animate .message-square-quote-path3 {
+		animation: messageSquareQuotePath3Animation 0.6s ease-in-out;
+	}
+
+	@keyframes messageSquareQuoteGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageSquareQuotePath2Animation {
+		0% {
+			transform: translate(0, 0);
+		}
+		50% {
+			transform: translate(1.5px, -0.5px);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
+
+	@keyframes messageSquareQuotePath3Animation {
+		0% {
+			transform: translate(0, 0);
+		}
+		50% {
+			transform: translate(1px, -0.5px);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,109 @@
+<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-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="message-square-x-icon"
+	>
+		<g class="message-square-x-group" class:animate>
+			<path
+				d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+			/>
+			<path d="m14.5 8.5-5 5" class="diagonal-1" />
+			<path d="m9.5 8.5 5 5" class="diagonal-2" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-square-x-icon {
+		overflow: visible;
+	}
+
+	.message-square-x-group {
+		transform-origin: bottom left;
+	}
+
+	.message-square-x-group.animate {
+		animation: messageSquareAnimation 0.8s ease-in-out;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.message-square-x-group.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.message-square-x-group.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes messageSquareAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 7.1;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 7.1;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

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

package/dist/icons/redo-dot.svelte

@@ -49,7 +49,7 @@
 		display: inline-block;
 	}
 	.redo-dot-icon {
-		transform-origin: 14px 20px;
+		transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */
 		transition: transform 0.3s ease;
 	}
 

package/dist/icons/redo.svelte

@@ -48,7 +48,7 @@
 		display: inline-block;
 	}
 	.redo-icon {
-		transform-origin: 14px 20px;
+		transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */
 		transition: transform 0.3s ease;
 	}
 

package/dist/icons/standalone-props.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared replacement for icon source when inlining IconProps (e.g. standalone snippets, registry).
+ * Keep in sync with src/lib/icons/types.ts when IconProps changes.
+ */
+export const ICON_PROPS_IMPORT: RegExp;
+export const INLINED_ICON_PROPS: "interface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n";

package/dist/icons/standalone-props.js

@@ -0,0 +1,14 @@
+/**
+ * Shared replacement for icon source when inlining IconProps (e.g. standalone snippets, registry).
+ * Keep in sync with src/lib/icons/types.ts when IconProps changes.
+ */
+export const ICON_PROPS_IMPORT = /import type \{ IconProps \} from '\.\/types\.js';\n\n?/;
+export const INLINED_ICON_PROPS = `interface IconProps {
+		color?: string;
+		size?: number;
+		strokeWidth?: number;
+		animate?: boolean;
+		class?: string;
+	}
+
+`;

package/dist/icons/undo-dot.svelte

@@ -49,7 +49,7 @@
 		display: inline-block;
 	}
 	.undo-dot-icon {
-		transform-origin: 14px 20px;
+		transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */
 		transition: transform 0.3s ease;
 	}
 

package/dist/icons/undo.svelte

@@ -48,7 +48,7 @@
 		display: inline-block;
 	}
 	.undo-icon {
-		transform-origin: 14px 20px;
+		transform-origin: center 71.42857%; /* calc(20 / 28 * 100%) */
 		transition: transform 0.3s ease;
 	}
 

package/dist/icons/user-check.svelte

@@ -14,7 +14,7 @@
 		animate = true;
 		setTimeout(() => {
 			animate = false;
-		}, 500);
+		}, 600);
 	}
 </script>
 
@@ -32,8 +32,8 @@
 		class="user-check-icon"
 		class:animate
 	>
-		<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-		<circle cx="9" cy="7" r="4" />
+		<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class="user-path" />
+		<circle cx="9" cy="7" r="4" class="user-circle" />
 		<polyline points="16 11 18 13 22 9" class="check-path" />
 	</svg>
 </div>
@@ -55,6 +55,49 @@
 	.user-check-icon.animate .check-path {
 		animation: checkAnimation 0.5s ease-out backwards;
 	}
+	.user-path,
+	.user-circle {
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.user-check-icon.animate .user-path {
+		animation: pathBounce 0.6s ease-in-out;
+	}
+
+	.user-check-icon.animate .user-circle {
+		animation: circleBounce 0.6s ease-in-out;
+	}
+
+	@keyframes pathBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(2px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes circleBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(4px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
 	@keyframes checkAnimation {
 		0% {
 			stroke-dashoffset: 9;

package/dist/icons/user-pen.svelte

@@ -30,14 +30,15 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="user-pen-icon"
+		class:animate
 	>
-		<path d="M11.5 15H7a4 4 0 0 0-4 4v2" />
+		<path d="M11.5 15H7a4 4 0 0 0-4 4v2" class="user-path" />
 		<path
 			d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.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
 		/>
-		<circle cx="10" cy="7" r="4" />
+		<circle cx="10" cy="7" r="4" class="user-circle" />
 	</svg>
 </div>
 
@@ -58,6 +59,49 @@
 		animation: penWiggle 0.5s ease-in-out 2;
 	}
 
+	.user-path,
+	.user-circle {
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.user-pen-icon.animate .user-path {
+		animation: pathBounce 0.6s ease-in-out;
+	}
+
+	.user-pen-icon.animate .user-circle {
+		animation: circleBounce 0.6s ease-in-out;
+	}
+
+	@keyframes pathBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(2px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes circleBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(4px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
 	@keyframes penWiggle {
 		0%,
 		100% {

package/dist/icons/user-x.svelte

@@ -0,0 +1,124 @@
+<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;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="user-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="user-x-icon"
+		class:animate
+	>
+		<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class="user-path" />
+		<circle cx="9" cy="7" r="4" class="user-circle" />
+		<line x1="22" x2="17" y1="8" y2="13" class="diagonal-1" />
+		<line x1="17" x2="22" y1="8" y2="13" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.user-x-icon {
+		overflow: visible;
+	}
+
+	.user-path,
+	.user-circle {
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.user-x-icon.animate .user-path {
+		animation: pathBounce 0.6s ease-in-out;
+	}
+
+	.user-x-icon.animate .user-circle {
+		animation: circleBounce 0.6s ease-in-out;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.user-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.user-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes pathBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(2px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes circleBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(4px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 7.1;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 7.1;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/user-x.svelte.d.ts

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