@jis3r/icons 2.4.0 → 2.6.0

package/dist/icons/badge-x.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;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="badge-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="badge-x-icon"
+		class:animate
+	>
+		<path
+			d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+		/>
+		<line x1="15" x2="9" y1="9" y2="15" class="diagonal-1" />
+		<line x1="9" x2="15" y1="9" y2="15" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.badge-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 10;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.badge-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.badge-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 10;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 10;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

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

package/dist/icons/calendar-x-2.svelte

@@ -0,0 +1,83 @@
+<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="calendar-x-2" 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="calendar-x-2-icon"
+		class:animate
+	>
+		<path d="M8 2v4" />
+		<path d="M16 2v4" />
+		<path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
+		<path d="M3 10h18" />
+		<path d="M22 17l-5 5" class="diagonal-1" />
+		<path d="m17 17 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.calendar-x-2-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.calendar-x-2-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.calendar-x-2-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/calendar-x-2.svelte.d.ts

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

package/dist/icons/calendar-x.svelte

@@ -0,0 +1,83 @@
+<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="calendar-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="calendar-x-icon"
+		class:animate
+	>
+		<path d="M8 2v4" />
+		<path d="M16 2v4" />
+		<rect width="18" height="18" x="3" y="4" rx="2" />
+		<path d="M3 10h18" />
+		<path d="m14 14-4 4" class="diagonal-1" />
+		<path d="m10 14 4 4" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.calendar-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.calendar-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.calendar-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

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

package/dist/icons/circle-x.svelte

@@ -0,0 +1,80 @@
+<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="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="circle-x-icon"
+		class:animate
+	>
+		<circle cx="12" cy="12" r="10" />
+		<path d="m15 9-6 6" class="diagonal-1" />
+		<path d="m9 9 6 6" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.circle-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.circle-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.circle-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;
+		}
+	}
+</style>

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

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

package/dist/icons/eye.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		animate: animateProp = false,
+		class: className = ''
+	}: IconProps = $props();
+
+	let animating = $state(false);
+	let morphProgress = $state(0);
+	let frameId = -1;
+	let runId = 0;
+
+	const closeDurationMs = 120;
+	const openDurationMs = 160;
+	const lineY = 12;
+	const leftX = 2.062;
+	const rightX = 21.938;
+	const upperEndY = 11.652;
+	const lowerEndY = 12.348;
+	const archRadiusX = 10.75;
+	const archRadiusY = 10.75;
+
+	const easeIn = (t) => t * t * t;
+	const easeOut = (t) => 1 - Math.pow(1 - t, 3);
+
+	const topArchPath = (t) => {
+		const y = upperEndY + (lineY - upperEndY) * t;
+		const ry = Math.max(0.001, archRadiusY * (1 - t));
+		return 'M ' + leftX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + rightX + ' ' + y;
+	};
+
+	const bottomArchPath = (t) => {
+		const y = lowerEndY - (lowerEndY - lineY) * t;
+		const ry = Math.max(0.001, archRadiusY * (1 - t));
+		return 'M ' + rightX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + leftX + ' ' + y;
+	};
+
+	function animateMorph(from, to, durationMs, ease, currentRunId, onDone) {
+		const start = performance.now();
+
+		const tick = (now) => {
+			if (currentRunId !== runId) return;
+			const elapsed = now - start;
+			const t = Math.min(elapsed / durationMs, 1);
+			const eased = ease(t);
+			morphProgress = from + (to - from) * eased;
+
+			if (t < 1) {
+				frameId = requestAnimationFrame(tick);
+				return;
+			}
+
+			onDone();
+		};
+
+		frameId = requestAnimationFrame(tick);
+	}
+
+	function handleMouseEnter() {
+		if (animating) return;
+		if (frameId !== -1) cancelAnimationFrame(frameId);
+		runId += 1;
+		const currentRunId = runId;
+		animating = true;
+
+		animateMorph(0, 1, closeDurationMs, easeIn, currentRunId, () => {
+			animateMorph(1, 0, openDurationMs, easeOut, currentRunId, () => {
+				if (currentRunId !== runId) return;
+				animating = false;
+				morphProgress = 0;
+				frameId = -1;
+			});
+		});
+	}
+
+	const topOutlineD = $derived(topArchPath(morphProgress));
+	const bottomOutlineD = $derived(bottomArchPath(morphProgress));
+</script>
+
+<div class={className} aria-label="eye" 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="eye-icon"
+		class:animate={animateProp || animating}
+	>
+		<path d={topOutlineD} class="eye-outline" />
+		<path d={bottomOutlineD} class="eye-outline" />
+
+		<circle cx="12" cy="12" r="3" class="eye-pupil" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.eye-icon {
+		overflow: visible;
+	}
+	.eye-pupil {
+		transform-origin: 12px 12px;
+	}
+	.eye-icon.animate .eye-pupil {
+		animation: blinkPupil 0.28s forwards;
+	}
+	@keyframes blinkPupil {
+		0% {
+			transform: scaleY(1);
+			animation-timing-function: ease-in;
+		}
+		50% {
+			transform: scaleY(0.042);
+			animation-timing-function: ease-out;
+		}
+		100% {
+			transform: scaleY(1);
+		}
+	}
+</style>

package/dist/icons/eye.svelte.d.ts

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

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

@@ -0,0 +1,83 @@
+<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="file-x-corner" 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="file-x-corner-icon"
+		class:animate
+	>
+		<path
+			d="M11 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v5"
+		/>
+		<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+		<path d="m20 17-5 5" class="diagonal-1" />
+		<path d="m15 17 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.file-x-corner-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.file-x-corner-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.file-x-corner-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/file-x-corner.svelte.d.ts

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

package/dist/icons/file-x.svelte

@@ -0,0 +1,83 @@
+<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="file-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="file-x-icon"
+		class:animate
+	>
+		<path
+			d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+		/>
+		<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+		<path d="m14.5 12.5-5 5" class="diagonal-1" />
+		<path d="m9.5 12.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.file-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.file-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.file-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 7.5;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 7.5;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

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

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