@jis3r/icons 2.2.0 → 2.4.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-circle-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-circle-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-circle-x-icon"
+	>
+		<g class="message-circle-x-group" class:animate>
+			<path
+				d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+			/>
+			<path d="m15 9-6 6" class="diagonal-1" />
+			<path d="m9 9 6 6" class="diagonal-2" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.message-circle-x-icon {
+		overflow: visible;
+	}
+
+	.message-circle-x-group {
+		transform-origin: bottom left;
+	}
+
+	.message-circle-x-group.animate {
+		animation: messageCircleAnimation 0.8s ease-in-out;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.message-circle-x-group.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.message-circle-x-group.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes messageCircleAnimation {
+		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: 8.5;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8.5;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

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

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>