@jis3r/icons 1.16.0 → 1.18.0

package/dist/icons/binary.svelte

@@ -0,0 +1,98 @@
+<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();
+
+	let hovered = $state(false);
+
+	function handleMouseEnter() {
+		hovered = true;
+	}
+
+	function handleMouseLeave() {
+		hovered = false;
+	}
+</script>
+
+<div
+	class={className}
+	aria-label="binary"
+	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="binary-icon"
+		class:animate={hovered}
+	>
+		<rect x={14} y={14} width={4} height={6} rx={2} class="binary-rect1" />
+		<rect x={6} y={4} width={4} height={6} rx={2} class="binary-rect2" />
+		<path d="M6 20h4 M6 14h2v6" class="binary-path1" />
+		<path d="M14 4h2v6 M14 10h4" class="binary-path2" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.binary-icon {
+		overflow: visible;
+	}
+
+	.binary-rect1,
+	.binary-rect2,
+	.binary-path1,
+	.binary-path2 {
+		--duration: 0.25s;
+		--timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+		transition: transform var(--duration) var(--timing);
+	}
+
+	.binary-icon.animate .binary-rect1,
+	.binary-icon.animate .binary-rect2,
+	.binary-icon.animate .binary-path1,
+	.binary-icon.animate .binary-path2 {
+		--duration: 0.4s;
+		--timing: ease-in-out;
+	}
+
+	.binary-icon.animate .binary-rect1 {
+		transform: translateX(-8px);
+	}
+
+	.binary-icon.animate .binary-rect2 {
+		transform: translateX(8px);
+	}
+
+	.binary-icon.animate .binary-path1 {
+		transform: translateY(-10px);
+	}
+
+	.binary-icon.animate .binary-path2 {
+		transform: translateY(10px);
+	}
+</style>

package/dist/icons/binary.svelte.d.ts

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

@@ -55,6 +55,7 @@ import betweenHorizontalEnd from './between-horizontal-end.svelte';
 import betweenHorizontalStart from './between-horizontal-start.svelte';
 import betweenVerticalEnd from './between-vertical-end.svelte';
 import betweenVerticalStart from './between-vertical-start.svelte';
+import binary from './binary.svelte';
 import blend from './blend.svelte';
 import blocks from './blocks.svelte';
 import bluetoothOff from './bluetooth-off.svelte';
@@ -413,6 +414,7 @@ import slidersHorizontal from './sliders-horizontal.svelte';
 import slidersVertical from './sliders-vertical.svelte';
 import smartphoneNfc from './smartphone-nfc.svelte';
 import snowflake from './snowflake.svelte';
+import sparkles from './sparkles.svelte';
 import speech from './speech.svelte';
 import spellCheck from './spell-check.svelte';
 import squareArrowDown from './square-arrow-down.svelte';
@@ -1117,6 +1119,12 @@ let ICONS_LIST = [
 		],
 		categories: ['layout', 'design', 'tools']
 	},
+	{
+		name: 'binary',
+		icon: binary,
+		tags: ['code', 'digits', 'computer', 'zero', 'one', 'boolean'],
+		categories: ['text', 'development']
+	},
 	{
 		name: 'blend',
 		icon: blend,
@@ -5007,6 +5015,12 @@ let ICONS_LIST = [
 		tags: ['cold', 'weather', 'freeze', 'snow', 'winter'],
 		categories: ['weather', 'seasons']
 	},
+	{
+		name: 'sparkles',
+		icon: sparkles,
+		tags: ['stars', 'effect', 'filter', 'night', 'magic'],
+		categories: ['cursors', 'multimedia', 'gaming', 'weather']
+	},
 	{
 		name: 'speech',
 		icon: speech,

package/dist/icons/sparkles.svelte

@@ -0,0 +1,153 @@
+<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() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 750);
+	}
+</script>
+
+<div class={className} aria-label="sparkles" 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="sparkles-icon"
+		class:animate={isHovered}
+	>
+		<g class="sparkles-group">
+			<path
+				d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
+				class="sparkles-path"
+			/>
+		</g>
+		<path d="M20 2v4 M22 4h-4" class="sparkles-plus" />
+		<circle cx="4" cy="20" r="2" class="sparkles-circle" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+
+	.sparkles-icon {
+		overflow: visible;
+	}
+
+	.sparkles-group {
+		transform-origin: center;
+		transition: transform 0.6s ease-in-out;
+	}
+
+	.sparkles-icon.animate .sparkles-group {
+		animation: scaleGroup 0.6s ease-in-out;
+	}
+
+	.sparkles-plus {
+		opacity: 1;
+		transform: scale(1);
+		transform-origin: center;
+		transform-box: fill-box;
+		transition:
+			opacity 0.2s ease-in-out,
+			transform 0.2s ease-in-out;
+	}
+
+	.sparkles-icon.animate .sparkles-plus {
+		animation: pulsePlus 0.75s ease-in-out;
+	}
+
+	.sparkles-circle {
+		opacity: 1;
+		transform: scale(1);
+		transform-origin: center;
+		transform-box: fill-box;
+		transition:
+			opacity 0.2s ease-in-out,
+			transform 0.2s ease-in-out;
+	}
+
+	.sparkles-icon.animate .sparkles-circle {
+		animation: pulseCircle 0.6s ease-in-out;
+	}
+
+	@keyframes scaleGroup {
+		0% {
+			transform: scale(1);
+		}
+		33.33% {
+			transform: scale(0.9);
+		}
+		66.67% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	@keyframes pulsePlus {
+		0%,
+		20% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		46.67% {
+			opacity: 0;
+			transform: scale(0);
+		}
+		73.33% {
+			opacity: 0;
+			transform: scale(0);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes pulseCircle {
+		0% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		33.33% {
+			opacity: 0;
+			transform: scale(0);
+		}
+		66.67% {
+			opacity: 0;
+			transform: scale(0);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+</style>

package/dist/icons/sparkles.svelte.d.ts

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

@@ -55,6 +55,7 @@ export { default as BetweenHorizontalEnd } from "./icons/between-horizontal-end.
 export { default as BetweenHorizontalStart } from "./icons/between-horizontal-start.svelte";
 export { default as BetweenVerticalEnd } from "./icons/between-vertical-end.svelte";
 export { default as BetweenVerticalStart } from "./icons/between-vertical-start.svelte";
+export { default as Binary } from "./icons/binary.svelte";
 export { default as Blend } from "./icons/blend.svelte";
 export { default as Blocks } from "./icons/blocks.svelte";
 export { default as BluetoothOff } from "./icons/bluetooth-off.svelte";
@@ -413,6 +414,7 @@ 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 Sparkles } from "./icons/sparkles.svelte";
 export { default as Speech } from "./icons/speech.svelte";
 export { default as SpellCheck } from "./icons/spell-check.svelte";
 export { default as SquareArrowDownLeft } from "./icons/square-arrow-down-left.svelte";

package/dist/index.js

@@ -55,6 +55,7 @@ export { default as BetweenHorizontalEnd } from './icons/between-horizontal-end.
 export { default as BetweenHorizontalStart } from './icons/between-horizontal-start.svelte';
 export { default as BetweenVerticalEnd } from './icons/between-vertical-end.svelte';
 export { default as BetweenVerticalStart } from './icons/between-vertical-start.svelte';
+export { default as Binary } from './icons/binary.svelte';
 export { default as Blend } from './icons/blend.svelte';
 export { default as Blocks } from './icons/blocks.svelte';
 export { default as BluetoothOff } from './icons/bluetooth-off.svelte';
@@ -413,6 +414,7 @@ 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 Sparkles } from './icons/sparkles.svelte';
 export { default as Speech } from './icons/speech.svelte';
 export { default as SpellCheck } from './icons/spell-check.svelte';
 export { default as SquareArrowDownLeft } from './icons/square-arrow-down-left.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@jis3r/icons",
-	"version": "1.16.0",
+	"version": "1.18.0",
 	"description": "beautifully crafted, moving icons. for svelte.",
 	"keywords": [
 		"svelte",