@jis3r/icons 2.5.0 → 2.6.0

package/dist/icons/map-pin-x-inside.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="map-pin-x-inside" 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="map-pin-x-inside-icon"
+		class:animate
+	>
+		<path
+			d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
+		/>
+		<path d="m14.5 7.5-5 5" class="diagonal-1" />
+		<path d="m9.5 7.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.map-pin-x-inside-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.map-pin-x-inside-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.map-pin-x-inside-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/map-pin-x-inside.svelte.d.ts

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

package/dist/icons/map-pin-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="map-pin-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="map-pin-x-icon"
+		class:animate
+	>
+		<path
+			d="M19.752 11.901A7.78 7.78 0 0 0 20 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 1.202 0 19 19 0 0 0 .09-.077"
+		/>
+		<circle cx="12" cy="10" r="3" />
+		<path d="m21.5 15.5-5 5" class="diagonal-1" />
+		<path d="m16.5 15.5 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.map-pin-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.map-pin-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.map-pin-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/map-pin-x.svelte.d.ts

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

package/dist/icons/monitor-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="monitor-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="monitor-x-icon"
+		class:animate
+	>
+		<path d="M14.5 7.5l-5 5" class="diagonal-1" />
+		<path d="M9.5 7.5l5 5" class="diagonal-2" />
+		<rect width="20" height="14" x="2" y="3" rx="2" />
+		<path d="M12 17v4" />
+		<path d="M8 21h8" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.monitor-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.monitor-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.monitor-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/monitor-x.svelte.d.ts

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

package/dist/icons/octagon-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="octagon-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="octagon-x-icon"
+		class:animate
+	>
+		<path
+			d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"
+		/>
+		<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;
+	}
+	.octagon-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 8.5;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.octagon-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.octagon-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/octagon-x.svelte.d.ts

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

package/dist/icons/package-x.svelte

@@ -0,0 +1,85 @@
+<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="package-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="package-x-icon"
+		class:animate
+	>
+		<path
+			d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"
+		/>
+		<path d="m7.5 4.27 9 5.15" />
+		<polyline points="3.29 7 12 12 20.71 7" />
+		<line x1="12" x2="12" y1="22" y2="12" />
+		<path d="m22 13-5 5" class="diagonal-1" />
+		<path d="m17 13 5 5" class="diagonal-2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.package-x-icon {
+		overflow: visible;
+	}
+
+	.diagonal-1,
+	.diagonal-2 {
+		stroke-dasharray: 7.1;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.package-x-icon.animate .diagonal-1 {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.package-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/package-x.svelte.d.ts

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

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;