@jis3r/icons 2.5.0 → 2.7.0

package/README.md

@@ -1,3 +1,5 @@
+<a href="https://vercel.com/oss"><img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge-2026.svg" /></a>
+
 # `moving icons` - the standard for animated icons in Svelte. 🧡
 
 A collection of 500+ hand-crafted, interaction-ready [Lucide](https://lucide.dev) icons. Built natively for Svelte 5 with zero dependencies. Fully tree-shakeable, MIT licensed, and completely customizable.

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/file-text.svelte

@@ -0,0 +1,92 @@
+<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;
+		}, 700);
+	}
+</script>
+
+<div class={className} aria-label="file-text" 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-text-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="M8 9h2" class="text-line text-line-1" />
+		<path d="M8 13h8" class="text-line text-line-2" />
+		<path d="M8 17h8" class="text-line text-line-3" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.file-text-icon {
+		overflow: visible;
+	}
+
+	.text-line {
+		stroke-dasharray: 12;
+		stroke-dashoffset: 0;
+		transition:
+			stroke-dashoffset 0.3s ease,
+			opacity 0.3s ease;
+	}
+
+	.file-text-icon.animate .text-line {
+		animation: textLineAnimation 0.6s ease forwards;
+	}
+
+	.file-text-icon.animate .text-line-1 {
+		animation-delay: 0s;
+	}
+
+	.file-text-icon.animate .text-line-2 {
+		animation-delay: 0.1s;
+	}
+
+	.file-text-icon.animate .text-line-3 {
+		animation-delay: 0.2s;
+	}
+
+	@keyframes textLineAnimation {
+		0% {
+			stroke-dashoffset: 0;
+			opacity: 1;
+		}
+		50% {
+			stroke-dashoffset: 12;
+			opacity: 0;
+		}
+		100% {
+			stroke-dashoffset: 0;
+			opacity: 1;
+		}
+	}
+</style>

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

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

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;