@jis3r/icons 2.0.0 → 2.1.0

package/dist/icons/circle-question-mark.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 500);

package/dist/icons/clapperboard.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 800);

package/dist/icons/clipboard-check.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;
@@ -39,8 +40,11 @@
 		class="clipboard-check-icon"
 		class:animate
 	>
-		<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
-		<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+		<rect width="8" height="4" x="8" y="2" rx="1" ry="1" class="clip" />
+		<path
+			d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+			class="board"
+		/>
 		<path d="m9 14 2 2 4-4" class="check-path" />
 	</svg>
 </div>
@@ -52,6 +56,20 @@
 	.clipboard-check-icon {
 		overflow: visible;
 	}
+
+	.clip,
+	.board {
+		transition: transform 0.3s ease;
+	}
+
+	.clipboard-check-icon.animate .clip {
+		animation: clipBounce 0.5s ease-in-out;
+	}
+
+	.clipboard-check-icon.animate .board {
+		animation: boardShake 0.5s ease-in-out;
+	}
+
 	.check-path {
 		stroke-dasharray: 9;
 		stroke-dashoffset: 0;
@@ -76,4 +94,34 @@
 			opacity: 1;
 		}
 	}
+
+	@keyframes clipBounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-2px);
+		}
+		50% {
+			transform: translateY(1px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes boardShake {
+		0% {
+			transform: rotate(0deg);
+		}
+		25% {
+			transform: rotate(-1deg);
+		}
+		75% {
+			transform: rotate(1deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
 </style>

package/dist/icons/clipboard-list.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 700);

package/dist/icons/clipboard-pen-line.svelte

@@ -46,8 +46,8 @@
 		class="clipboard-pen-line-icon"
 		class:animate
 	>
-		<rect width="8" height="4" x="8" y="2" rx="1" />
-		<path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5" />
+		<rect width="8" height="4" x="8" y="2" rx="1" class="clip" />
+		<path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5" class="board" />
 		<path d="M16 4h2a2 2 0 0 1 1.73 1" />
 		<path d="M8 18h1" class="line" />
 		<path
@@ -65,6 +65,19 @@
 		overflow: visible;
 	}
 
+	.clip,
+	.board {
+		transition: transform 0.3s ease;
+	}
+
+	.clipboard-pen-line-icon.animate .clip {
+		animation: clipBounce 0.5s ease-in-out;
+	}
+
+	.clipboard-pen-line-icon.animate .board {
+		animation: boardShake 0.5s ease-in-out;
+	}
+
 	.pen {
 		transform-origin: 19.876px 11.124px;
 		transition: transform 0.25s ease-in-out;
@@ -97,4 +110,34 @@
 	.clipboard-pen-line-icon.animate .line {
 		d: path('M8 18h5');
 	}
+
+	@keyframes clipBounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-2px);
+		}
+		50% {
+			transform: translateY(1px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes boardShake {
+		0% {
+			transform: rotate(0deg);
+		}
+		25% {
+			transform: rotate(-1deg);
+		}
+		75% {
+			transform: rotate(1deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
 </style>

package/dist/icons/clipboard-pen.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 1000);
@@ -38,9 +38,10 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="clipboard-pen-icon"
+		class:animate
 	>
-		<rect width="8" height="4" x="8" y="2" rx="1" />
-		<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5" />
+		<rect width="8" height="4" x="8" y="2" rx="1" class="clip" />
+		<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5" class="board" />
 		<path d="M4 13.5V6a2 2 0 0 1 2-2h2" />
 		<path
 			d="M13.378 15.626a1 1 0 1 0-3.004-3.004l-5.01 5.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"
@@ -58,6 +59,19 @@
 		overflow: visible;
 	}
 
+	.clip,
+	.board {
+		transition: transform 0.3s ease;
+	}
+
+	.clipboard-pen-icon.animate .clip {
+		animation: clipBounce 0.5s ease-in-out;
+	}
+
+	.clipboard-pen-icon.animate .board {
+		animation: boardShake 0.5s ease-in-out;
+	}
+
 	.pen {
 		transform-origin: 13.378px 15.626px;
 		transition: transform 0.25s ease-in-out;
@@ -79,4 +93,34 @@
 			transform: rotate(0.5deg) translate(1.5px, -1px);
 		}
 	}
+
+	@keyframes clipBounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-2px);
+		}
+		50% {
+			transform: translateY(1px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes boardShake {
+		0% {
+			transform: rotate(0deg);
+		}
+		25% {
+			transform: rotate(-1deg);
+		}
+		75% {
+			transform: rotate(1deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
 </style>

package/dist/icons/clipboard-x.svelte

@@ -0,0 +1,135 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [animate]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="clipboard-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="clipboard-x-icon"
+		class:animate
+	>
+		<rect width="8" height="4" x="8" y="2" rx="1" ry="1" class="clip" />
+		<path
+			d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+			class="board"
+		/>
+		<path d="m15 11-6 6" class="diagonal-1" />
+		<path d="m9 11 6 6" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.clipboard-x-icon {
+		overflow: visible;
+	}
+
+	.clip,
+	.board {
+		transition: transform 0.3s ease;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.clipboard-x-icon.animate .clip {
+		animation: clipBounce 0.5s ease-in-out;
+	}
+
+	.clipboard-x-icon.animate .board {
+		animation: boardShake 0.5s ease-in-out;
+	}
+
+	.clipboard-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.clipboard-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8.5;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8.5;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+
+	@keyframes clipBounce {
+		0% {
+			transform: translateY(0);
+		}
+		25% {
+			transform: translateY(-2px);
+		}
+		50% {
+			transform: translateY(1px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes boardShake {
+		0% {
+			transform: rotate(0deg);
+		}
+		25% {
+			transform: rotate(-1deg);
+		}
+		75% {
+			transform: rotate(1deg);
+		}
+		100% {
+			transform: rotate(0deg);
+		}
+	}
+</style>

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

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

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 700);

package/dist/icons/cloud-off.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/copy-check.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/cpu.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 1000);

package/dist/icons/diamond-plus.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-1.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-2.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-3.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-4.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-5.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/dice-6.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/diff.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/disc-3.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 3000);

package/dist/icons/dna-off.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/droplet-off.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/ear-off.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 600);

package/dist/icons/egg-off.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 600);

package/dist/icons/eye-off.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 600);

package/dist/icons/file-chart-column-increasing.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-chart-column.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-chart-line.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 700);

package/dist/icons/file-check-corner.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-check.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-exclamation-point.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 500);

package/dist/icons/file-minus.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-pen.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 1000);

package/dist/icons/file-plus.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/file-question-mark.svelte

@@ -18,8 +18,8 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 500);

package/dist/icons/fish-off.svelte

@@ -18,6 +18,7 @@
 	} = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;