@jis3r/icons 2.2.0 → 2.3.0

package/dist/icons/message-circle-code.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-circle-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-circle-code-group">
+			<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class="message-circle-code-path1" />
+			<path d="M10 9.5 8 12l2 2.5" class="message-circle-code-path2" />
+			<path d="m14 9.5 2 2.5-2 2.5" class="message-circle-code-path3" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-circle-code-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-circle-code-group {
+		animation: messageCircleCodeGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-circle-code-path2 {
+		animation: messageCircleCodePath2Animation 0.6s ease-in-out;
+	}
+
+	.animate .message-circle-code-path3 {
+		animation: messageCircleCodePath3Animation 0.6s ease-in-out;
+	}
+
+	@keyframes messageCircleCodeGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageCircleCodePath2Animation {
+		0% {
+			transform: translateX(0);
+		}
+		33.33% {
+			transform: translateX(-1.5px);
+		}
+		66.67% {
+			transform: translateX(0.75px);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes messageCircleCodePath3Animation {
+		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-circle-code.svelte.d.ts

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

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

@@ -0,0 +1,81 @@
+<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-circle-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-circle-dashed-group">
+			<path d="M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1" class="message-circle-dashed-path1" />
+			<path d="M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1" class="message-circle-dashed-path2" />
+			<path d="M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5" class="message-circle-dashed-path3" />
+			<path d="M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1" class="message-circle-dashed-path4" />
+			<path d="M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1" class="message-circle-dashed-path5" />
+			<path d="M3.5 17.5 2 22l4.5-1.5" class="message-circle-dashed-path6" />
+			<path d="M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5" class="message-circle-dashed-path7" />
+			<path d="M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1" class="message-circle-dashed-path8" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-circle-dashed-group {
+		transform-origin: bottom left;
+	}
+
+	.animate .message-circle-dashed-group {
+		animation: messageCircleDashedGroupAnimation 0.8s ease-in-out;
+	}
+
+	@keyframes messageCircleDashedGroupAnimation {
+		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-circle-dashed.svelte.d.ts

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

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

@@ -0,0 +1,96 @@
+<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-circle-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-circle-heart-group">
+			<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class="message-circle-heart-path1" />
+			<path
+				d="M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7"
+				class="message-circle-heart-path2"
+			/>
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-circle-heart-group {
+		transform-origin: bottom left;
+	}
+
+	.message-circle-heart-path2 {
+		transform-origin: center;
+	}
+
+	.animate .message-circle-heart-group {
+		animation: messageCircleHeartGroupAnimation 0.8s ease-in-out;
+	}
+
+	.animate .message-circle-heart-path2 {
+		animation: messageCircleHeartPath2Animation 0.8s ease-in-out;
+	}
+
+	@keyframes messageCircleHeartGroupAnimation {
+		0% {
+			transform: rotate(0deg);
+		}
+		40% {
+			transform: rotate(8deg);
+		}
+		60% {
+			transform: rotate(-8deg);
+		}
+		80% {
+			transform: rotate(2deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+
+	@keyframes messageCircleHeartPath2Animation {
+		0% {
+			transform: scale(1);
+		}
+		25% {
+			transform: scale(0.7);
+		}
+		50% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>

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

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

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-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/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/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-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;

package/dist/index.d.ts

@@ -303,13 +303,21 @@ export { default as MapPinOff } from './icons/map-pin-off.svelte';
 export { default as Maximize2 } from './icons/maximize-2.svelte';
 export { default as Maximize } from './icons/maximize.svelte';
 export { default as MegaphoneOff } from './icons/megaphone-off.svelte';
+export { default as MessageCircleCode } from './icons/message-circle-code.svelte';
+export { default as MessageCircleDashed } from './icons/message-circle-dashed.svelte';
+export { default as MessageCircleHeart } from './icons/message-circle-heart.svelte';
 export { default as MessageCircleMore } from './icons/message-circle-more.svelte';
 export { default as MessageCircleOff } from './icons/message-circle-off.svelte';
 export { default as MessageCircleQuestionMark } from './icons/message-circle-question-mark.svelte';
 export { default as MessageCircleWarning } from './icons/message-circle-warning.svelte';
 export { default as MessageCircle } from './icons/message-circle.svelte';
+export { default as MessageSquareCode } from './icons/message-square-code.svelte';
+export { default as MessageSquareDashed } from './icons/message-square-dashed.svelte';
+export { default as MessageSquareDot } from './icons/message-square-dot.svelte';
+export { default as MessageSquareHeart } from './icons/message-square-heart.svelte';
 export { default as MessageSquareMore } from './icons/message-square-more.svelte';
 export { default as MessageSquareOff } from './icons/message-square-off.svelte';
+export { default as MessageSquareQuote } from './icons/message-square-quote.svelte';
 export { default as MessageSquareWarning } from './icons/message-square-warning.svelte';
 export { default as MessageSquare } from './icons/message-square.svelte';
 export { default as MicOff } from './icons/mic-off.svelte';
@@ -494,6 +502,7 @@ export { default as UserRoundCheck } from './icons/user-round-check.svelte';
 export { default as UserRoundCog } from './icons/user-round-cog.svelte';
 export { default as UserRoundPen } from './icons/user-round-pen.svelte';
 export { default as UserRound } from './icons/user-round.svelte';
+export { default as UserX } from './icons/user-x.svelte';
 export { default as User } from './icons/user.svelte';
 export { default as UsersRound } from './icons/users-round.svelte';
 export { default as Users } from './icons/users.svelte';

package/dist/index.js

@@ -303,13 +303,21 @@ export { default as MapPinOff } from './icons/map-pin-off.svelte';
 export { default as Maximize2 } from './icons/maximize-2.svelte';
 export { default as Maximize } from './icons/maximize.svelte';
 export { default as MegaphoneOff } from './icons/megaphone-off.svelte';
+export { default as MessageCircleCode } from './icons/message-circle-code.svelte';
+export { default as MessageCircleDashed } from './icons/message-circle-dashed.svelte';
+export { default as MessageCircleHeart } from './icons/message-circle-heart.svelte';
 export { default as MessageCircleMore } from './icons/message-circle-more.svelte';
 export { default as MessageCircleOff } from './icons/message-circle-off.svelte';
 export { default as MessageCircleQuestionMark } from './icons/message-circle-question-mark.svelte';
 export { default as MessageCircleWarning } from './icons/message-circle-warning.svelte';
 export { default as MessageCircle } from './icons/message-circle.svelte';
+export { default as MessageSquareCode } from './icons/message-square-code.svelte';
+export { default as MessageSquareDashed } from './icons/message-square-dashed.svelte';
+export { default as MessageSquareDot } from './icons/message-square-dot.svelte';
+export { default as MessageSquareHeart } from './icons/message-square-heart.svelte';
 export { default as MessageSquareMore } from './icons/message-square-more.svelte';
 export { default as MessageSquareOff } from './icons/message-square-off.svelte';
+export { default as MessageSquareQuote } from './icons/message-square-quote.svelte';
 export { default as MessageSquareWarning } from './icons/message-square-warning.svelte';
 export { default as MessageSquare } from './icons/message-square.svelte';
 export { default as MicOff } from './icons/mic-off.svelte';
@@ -494,6 +502,7 @@ export { default as UserRoundCheck } from './icons/user-round-check.svelte';
 export { default as UserRoundCog } from './icons/user-round-cog.svelte';
 export { default as UserRoundPen } from './icons/user-round-pen.svelte';
 export { default as UserRound } from './icons/user-round.svelte';
+export { default as UserX } from './icons/user-x.svelte';
 export { default as User } from './icons/user.svelte';
 export { default as UsersRound } from './icons/users-round.svelte';
 export { default as Users } from './icons/users.svelte';

package/package.json

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