@jis3r/icons 1.1.5 → 1.2.0

package/dist/icons/text-search.svelte

@@ -0,0 +1,124 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		if (!isHovered) {
+			isHovered = true;
+			setTimeout(() => {
+				isHovered = false;
+			}, 1000);
+		}
+	}
+</script>
+
+<div class={className} aria-label="text-search" 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="text-search-icon"
+		class:animate={isHovered}
+	>
+		<path d="M21 5H3" class="line top" />
+		<g class="text-group">
+			<path d="M10 12H3" class="line middle" />
+			<path d="M10 19H3" class="line bottom" />
+		</g>
+
+		<g class="magnifier">
+			<circle cx="17" cy="15" r="3" />
+			<path d="m21 19-1.9-1.9" />
+		</g>
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.text-search-icon {
+		overflow: visible;
+	}
+
+	.line {
+		transition: opacity 0.1s ease-out;
+	}
+	.top,
+	.middle,
+	.bottom {
+		transform-origin: left center;
+	}
+
+	.magnifier {
+		transform-origin: 17px 15px;
+	}
+	.text-search-icon.animate .magnifier {
+		animation: search-bounce 1s ease-in-out;
+	}
+
+	.text-search-icon.animate .top {
+		animation: line-shrink-top 1s ease-in-out;
+	}
+	.text-search-icon.animate .middle {
+		animation: line-shrink-mid 1s ease-in-out;
+	}
+	.text-search-icon.animate .bottom {
+		animation: line-shrink-bot 1s ease-in-out 0.05s;
+	}
+
+	@keyframes search-bounce {
+		0%,
+		100% {
+			transform: translateX(0) translateY(0);
+		}
+		25% {
+			transform: translateX(0) translateY(-4px);
+		}
+		50% {
+			transform: translateX(-3px) translateY(0);
+		}
+	}
+
+	@keyframes line-shrink-mid {
+		0%,
+		25%,
+		100% {
+			transform: scaleX(1);
+		}
+		50% {
+			transform: scaleX(0.7);
+		}
+	}
+	@keyframes line-shrink-bot {
+		0%,
+		30%,
+		100% {
+			transform: scaleX(1);
+		}
+		50% {
+			transform: scaleX(0.8);
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+export default TextSearch;
+type TextSearch = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const TextSearch: import("svelte").Component<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+}, {}, "">;
+type Props = {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+};

package/dist/index.d.ts

@@ -434,6 +434,7 @@ export { default as Telescope } from "./icons/telescope.svelte";
 export { default as Terminal } from "./icons/terminal.svelte";
 export { default as TextCursorInput } from "./icons/text-cursor-input.svelte";
 export { default as TextCursor } from "./icons/text-cursor.svelte";
+export { default as TextSearch } from "./icons/text-search.svelte";
 export { default as Thermometer } from "./icons/thermometer.svelte";
 export { default as ThumbsDown } from "./icons/thumbs-down.svelte";
 export { default as ThumbsUp } from "./icons/thumbs-up.svelte";

package/dist/index.js

@@ -434,6 +434,7 @@ export { default as Telescope } from './icons/telescope.svelte';
 export { default as Terminal } from './icons/terminal.svelte';
 export { default as TextCursorInput } from './icons/text-cursor-input.svelte';
 export { default as TextCursor } from './icons/text-cursor.svelte';
+export { default as TextSearch } from './icons/text-search.svelte';
 export { default as Thermometer } from './icons/thermometer.svelte';
 export { default as ThumbsDown } from './icons/thumbs-down.svelte';
 export { default as ThumbsUp } from './icons/thumbs-up.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.1.5",
+	"version": "1.2.0",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"author": "jis3r",
 	"license": "MIT",
@@ -75,4 +75,4 @@
 	"overrides": {
 		"cookie": "0.7.0"
 	}
-}
+}