@jis3r/icons 1.5.0 → 1.6.0

package/dist/icons/index.js

@@ -399,6 +399,8 @@ import signalLow from './signal-low.svelte';
 import signalMedium from './signal-medium.svelte';
 import signalZero from './signal-zero.svelte';
 import signature from './signature.svelte';
+import slidersHorizontal from './sliders-horizontal.svelte';
+import slidersVertical from './sliders-vertical.svelte';
 import smartphoneNfc from './smartphone-nfc.svelte';
 import snowflake from './snowflake.svelte';
 import speech from './speech.svelte';
@@ -4858,6 +4860,18 @@ let ICONS_LIST = [
 		],
 		categories: ['text']
 	},
+	{
+		name: 'sliders-horizontal',
+		icon: slidersHorizontal,
+		tags: ['settings', 'filters', 'controls'],
+		categories: ['account']
+	},
+	{
+		name: 'sliders-vertical',
+		icon: slidersVertical,
+		tags: ['settings', 'controls'],
+		categories: ['account']
+	},
 	{
 		name: 'smartphone-nfc',
 		icon: smartphoneNfc,

package/dist/icons/sliders-horizontal.svelte

@@ -0,0 +1,185 @@
+<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 = 28,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	// Group 1 coordinates
+	let line1a_x2 = $state(14);
+	let line1b_x1 = $state(10);
+	let line1c_x1 = $state(14);
+	let line1c_x2 = $state(14);
+
+	// Group 2 coordinates
+	let line2a_x2 = $state(12);
+	let line2b_x1 = $state(8);
+	let line2c_x1 = $state(8);
+	let line2c_x2 = $state(8);
+
+	// Group 3 coordinates
+	let line3a_x2 = $state(12);
+	let line3b_x1 = $state(16);
+	let line3c_x1 = $state(16);
+	let line3c_x2 = $state(16);
+
+	function animateValue(start, end, duration, callback) {
+		return new Promise((resolve) => {
+			const startTime = performance.now();
+			const animate = (currentTime) => {
+				const elapsed = currentTime - startTime;
+				const progress = Math.min(elapsed / duration, 1);
+
+				// Spring-like easing: cubic-bezier(0.34, 1.56, 0.64, 1)
+				const eased =
+					progress < 0.5
+						? 4 * progress * progress * progress
+						: 1 - Math.pow(-2 * progress + 2, 3) / 2;
+
+				const current = start + (end - start) * eased;
+				callback(current);
+
+				if (progress < 1) {
+					requestAnimationFrame(animate);
+				} else {
+					resolve();
+				}
+			};
+			requestAnimationFrame(animate);
+		});
+	}
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		// Animate all values simultaneously
+		Promise.all([
+			animateValue(14, 10, 400, (val) => {
+				line1a_x2 = val;
+			}),
+			animateValue(10, 5, 400, (val) => {
+				line1b_x1 = val;
+			}),
+			animateValue(14, 9, 400, (val) => {
+				line1c_x1 = val;
+				line1c_x2 = val;
+			}),
+			animateValue(12, 18, 400, (val) => {
+				line2a_x2 = val;
+			}),
+			animateValue(8, 13, 400, (val) => {
+				line2b_x1 = val;
+			}),
+			animateValue(8, 14, 400, (val) => {
+				line2c_x1 = val;
+				line2c_x2 = val;
+			}),
+			animateValue(12, 4, 400, (val) => {
+				line3a_x2 = val;
+			}),
+			animateValue(16, 8, 400, (val) => {
+				line3b_x1 = val;
+			}),
+			animateValue(16, 8, 400, (val) => {
+				line3c_x1 = val;
+				line3c_x2 = val;
+			})
+		]);
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+
+		// Reset all values to normal
+		Promise.all([
+			animateValue(line1a_x2, 14, 400, (val) => {
+				line1a_x2 = val;
+			}),
+			animateValue(line1b_x1, 10, 400, (val) => {
+				line1b_x1 = val;
+			}),
+			animateValue(line1c_x1, 14, 400, (val) => {
+				line1c_x1 = val;
+				line1c_x2 = val;
+			}),
+			animateValue(line2a_x2, 12, 400, (val) => {
+				line2a_x2 = val;
+			}),
+			animateValue(line2b_x1, 8, 400, (val) => {
+				line2b_x1 = val;
+			}),
+			animateValue(line2c_x1, 8, 400, (val) => {
+				line2c_x1 = val;
+				line2c_x2 = val;
+			}),
+			animateValue(line3a_x2, 12, 400, (val) => {
+				line3a_x2 = val;
+			}),
+			animateValue(line3b_x1, 16, 400, (val) => {
+				line3b_x1 = val;
+			}),
+			animateValue(line3c_x1, 16, 400, (val) => {
+				line3c_x1 = val;
+				line3c_x2 = val;
+			})
+		]);
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="sliders-horizontal"
+	role="img"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<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="sliders-icon"
+	>
+		<!-- Group 1 -->
+		<line x1="21" x2={line1a_x2} y1="4" y2="4" />
+		<line x1={line1b_x1} x2="3" y1="4" y2="4" />
+		<line x1={line1c_x1} x2={line1c_x2} y1="2" y2="6" />
+
+		<!-- Group 2 -->
+		<line x1="21" x2={line2a_x2} y1="12" y2="12" />
+		<line x1={line2b_x1} x2="3" y1="12" y2="12" />
+		<line x1={line2c_x1} x2={line2c_x2} y1="10" y2="14" />
+
+		<!-- Group 3 -->
+		<line x1="3" x2={line3a_x2} y1="20" y2="20" />
+		<line x1={line3b_x1} x2="21" y1="20" y2="20" />
+		<line x1={line3c_x1} x2={line3c_x2} y1="18" y2="22" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.sliders-icon {
+		overflow: visible;
+	}
+</style>

package/dist/icons/sliders-horizontal.svelte.d.ts

@@ -0,0 +1,19 @@
+export default SlidersHorizontal;
+type SlidersHorizontal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const SlidersHorizontal: 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/icons/sliders-vertical.svelte

@@ -0,0 +1,185 @@
+<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 = 28,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	// Group 1 coordinates
+	let line1a_y2 = $state(14);
+	let line1b_y1 = $state(10);
+	let line1c_y1 = $state(14);
+	let line1c_y2 = $state(14);
+
+	// Group 2 coordinates
+	let line2a_y2 = $state(12);
+	let line2b_y1 = $state(8);
+	let line2c_y1 = $state(8);
+	let line2c_y2 = $state(8);
+
+	// Group 3 coordinates
+	let line3a_y2 = $state(12);
+	let line3b_y1 = $state(16);
+	let line3c_y1 = $state(16);
+	let line3c_y2 = $state(16);
+
+	function animateValue(start, end, duration, callback) {
+		return new Promise((resolve) => {
+			const startTime = performance.now();
+			const animate = (currentTime) => {
+				const elapsed = currentTime - startTime;
+				const progress = Math.min(elapsed / duration, 1);
+
+				// Spring-like easing: cubic-bezier(0.34, 1.56, 0.64, 1)
+				const eased =
+					progress < 0.5
+						? 4 * progress * progress * progress
+						: 1 - Math.pow(-2 * progress + 2, 3) / 2;
+
+				const current = start + (end - start) * eased;
+				callback(current);
+
+				if (progress < 1) {
+					requestAnimationFrame(animate);
+				} else {
+					resolve();
+				}
+			};
+			requestAnimationFrame(animate);
+		});
+	}
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		// Animate all values simultaneously
+		Promise.all([
+			animateValue(14, 10, 400, (val) => {
+				line1a_y2 = val;
+			}),
+			animateValue(10, 5, 400, (val) => {
+				line1b_y1 = val;
+			}),
+			animateValue(14, 9, 400, (val) => {
+				line1c_y1 = val;
+				line1c_y2 = val;
+			}),
+			animateValue(12, 18, 400, (val) => {
+				line2a_y2 = val;
+			}),
+			animateValue(8, 13, 400, (val) => {
+				line2b_y1 = val;
+			}),
+			animateValue(8, 14, 400, (val) => {
+				line2c_y1 = val;
+				line2c_y2 = val;
+			}),
+			animateValue(12, 4, 400, (val) => {
+				line3a_y2 = val;
+			}),
+			animateValue(16, 8, 400, (val) => {
+				line3b_y1 = val;
+			}),
+			animateValue(16, 8, 400, (val) => {
+				line3c_y1 = val;
+				line3c_y2 = val;
+			})
+		]);
+	}
+
+	function handleMouseLeave() {
+		isHovered = false;
+
+		// Reset all values to normal
+		Promise.all([
+			animateValue(line1a_y2, 14, 400, (val) => {
+				line1a_y2 = val;
+			}),
+			animateValue(line1b_y1, 10, 400, (val) => {
+				line1b_y1 = val;
+			}),
+			animateValue(line1c_y1, 14, 400, (val) => {
+				line1c_y1 = val;
+				line1c_y2 = val;
+			}),
+			animateValue(line2a_y2, 12, 400, (val) => {
+				line2a_y2 = val;
+			}),
+			animateValue(line2b_y1, 8, 400, (val) => {
+				line2b_y1 = val;
+			}),
+			animateValue(line2c_y1, 8, 400, (val) => {
+				line2c_y1 = val;
+				line2c_y2 = val;
+			}),
+			animateValue(line3a_y2, 12, 400, (val) => {
+				line3a_y2 = val;
+			}),
+			animateValue(line3b_y1, 16, 400, (val) => {
+				line3b_y1 = val;
+			}),
+			animateValue(line3c_y1, 16, 400, (val) => {
+				line3c_y1 = val;
+				line3c_y2 = val;
+			})
+		]);
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="sliders-vertical"
+	role="img"
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+>
+	<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="sliders-icon"
+	>
+		<!-- Group 1 -->
+		<line x1="4" x2="4" y1="21" y2={line1a_y2} />
+		<line x1="4" x2="4" y1={line1b_y1} y2="3" />
+		<line x1="2" x2="6" y1={line1c_y1} y2={line1c_y2} />
+
+		<!-- Group 2 -->
+		<line x1="12" x2="12" y1="21" y2={line2a_y2} />
+		<line x1="12" x2="12" y1={line2b_y1} y2="3" />
+		<line x1="10" x2="14" y1={line2c_y1} y2={line2c_y2} />
+
+		<!-- Group 3 -->
+		<line x1="20" x2="20" y1="3" y2={line3a_y2} />
+		<line x1="20" x2="20" y1={line3b_y1} y2="21" />
+		<line x1="18" x2="22" y1={line3c_y1} y2={line3c_y2} />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.sliders-icon {
+		overflow: visible;
+	}
+</style>

package/dist/icons/sliders-vertical.svelte.d.ts

@@ -0,0 +1,19 @@
+export default SlidersVertical;
+type SlidersVertical = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const SlidersVertical: 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

@@ -399,6 +399,8 @@ export { default as SignalMedium } from "./icons/signal-medium.svelte";
 export { default as SignalZero } from "./icons/signal-zero.svelte";
 export { default as Signal } from "./icons/signal.svelte";
 export { default as Signature } from "./icons/signature.svelte";
+export { default as SlidersHorizontal } from "./icons/sliders-horizontal.svelte";
+export { default as SlidersVertical } from "./icons/sliders-vertical.svelte";
 export { default as SmartphoneNfc } from "./icons/smartphone-nfc.svelte";
 export { default as Snowflake } from "./icons/snowflake.svelte";
 export { default as Speech } from "./icons/speech.svelte";

package/dist/index.js

@@ -399,6 +399,8 @@ export { default as SignalMedium } from './icons/signal-medium.svelte';
 export { default as SignalZero } from './icons/signal-zero.svelte';
 export { default as Signal } from './icons/signal.svelte';
 export { default as Signature } from './icons/signature.svelte';
+export { default as SlidersHorizontal } from './icons/sliders-horizontal.svelte';
+export { default as SlidersVertical } from './icons/sliders-vertical.svelte';
 export { default as SmartphoneNfc } from './icons/smartphone-nfc.svelte';
 export { default as Snowflake } from './icons/snowflake.svelte';
 export { default as Speech } from './icons/speech.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"keywords": [
 		"svelte",
@@ -86,4 +86,4 @@
 	"overrides": {
 		"cookie": "0.7.0"
 	}
-}
+}