@jis3r/icons 2.5.0 → 2.7.0

package/dist/icons/search-x.svelte

@@ -0,0 +1,101 @@
+<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;
+		}, 1000);
+	}
+</script>
+
+<div class={className} aria-label="search-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="search-x-icon"
+		class:animate
+	>
+		<path d="m13.5 8.5-5 5" class="diagonal-1" />
+		<path d="m8.5 8.5 5 5" class="diagonal-2" />
+		<circle cx="11" cy="11" r="8" />
+		<path d="m21 21-4.3-4.3" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.search-x-icon {
+		overflow: visible;
+		transition:
+			transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+			transform 1s ease-in-out;
+	}
+
+	.search-x-icon.animate {
+		animation: search-bounce 1s ease-in-out;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.search-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.search-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes search-bounce {
+		0%,
+		100% {
+			transform: translateX(0) translateY(0);
+		}
+		25% {
+			transform: translateX(0) translateY(-4px);
+		}
+		50% {
+			transform: translateX(-3px) 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/search-x.svelte.d.ts

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

package/dist/icons/shield-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="shield-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="shield-x-icon"
+		class:animate
+	>
+		<path
+			d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+		/>
+		<path d="m14.5 9.5-5 5" class="diagonal-1" />
+		<path d="m9.5 9.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.shield-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.shield-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.shield-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@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/shield-x.svelte.d.ts

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

package/dist/icons/square-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="square-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="square-x-icon"
+		class:animate
+	>
+		<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+		<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;
+	}
+	.square-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.square-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.square-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/square-x.svelte.d.ts

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

package/dist/icons/ticket-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="ticket-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="ticket-x-icon"
+		class:animate
+	>
+		<path
+			d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
+		/>
+		<path d="m14.5 9.5-5 5" class="diagonal-1" />
+		<path d="m9.5 9.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.ticket-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.ticket-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.ticket-x-icon.animate .diagonal-2 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@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/ticket-x.svelte.d.ts

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

package/dist/icons/user-round-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-round-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-round-x-icon"
+		class:animate
+	>
+		<path d="M2 21a8 8 0 0 1 11.873-7" class="user-round-path" />
+		<circle cx="10" cy="8" r="5" class="user-round-circle" />
+		<path d="m22 17-5 5" class="diagonal-1" />
+		<path d="m17 17 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.user-round-x-icon {
+		overflow: visible;
+	}
+
+	.user-round-path,
+	.user-round-circle {
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.user-round-x-icon.animate .user-round-path {
+		animation: pathBounce 0.6s ease-in-out;
+	}
+
+	.user-round-x-icon.animate .user-round-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-round-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.user-round-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(4px);
+		}
+		66% {
+			transform: translateY(-2px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes circleBounce {
+		0% {
+			transform: translateY(0);
+		}
+		33% {
+			transform: translateY(1px);
+		}
+		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-round-x.svelte.d.ts

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

package/dist/icons/volume-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="volume-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="volume-x-icon"
+		class:animate
+	>
+		<path
+			d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+		/>
+		<line x1="22" x2="16" y1="9" y2="15" class="diagonal-1" />
+		<line x1="16" x2="22" y1="9" y2="15" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.volume-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.volume-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.volume-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/volume-x.svelte.d.ts

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