@jis3r/icons 2.0.0 → 2.2.0

package/README.md

@@ -1,4 +1,6 @@
-# `jis3r/icons` is beautifully crafted, moving icons. for svelte. 🧡
+# `moving icons` - the standard for animated icons in Svelte. 🧡
+
+A collection of 500+ hand-crafted, interaction-ready [Lucide](https://lucide.dev) icons. Built natively for Svelte 5 with zero dependencies. Fully tree-shakeable, MIT licensed, and completely customizable.
 
 **Demo** → [https://movingicons.dev](https://movingicons.dev)
 
@@ -47,13 +49,13 @@ Import icons as named Svelte components:
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | number | 24 | Icon size in pixels |
-| `color` | string | 'currentColor' | Stroke color (CSS color value) |
-| `strokeWidth` | number | 2 | SVG stroke width |
-| `class` | string | — | Optional additional CSS classes |
-| `animate` | boolean | false | Controls icon animation state |
+| Prop          | Type    | Default        | Description                     |
+| ------------- | ------- | -------------- | ------------------------------- |
+| `size`        | number  | 24             | Icon size in pixels             |
+| `color`       | string  | 'currentColor' | Stroke color (CSS color value)  |
+| `strokeWidth` | number  | 2              | SVG stroke width                |
+| `class`       | string  | —              | Optional additional CSS classes |
+| `animate`     | boolean | false          | Controls icon animation state   |
 
 ## Advanced Usage
 
@@ -67,11 +69,11 @@ Control icon animations from parent elements by binding the `animate` prop to yo
 </script>
 
 <button
-	onmouseenter={() => animate = true}
-	onmouseleave={() => animate = false}
+	onmouseenter={() => (animate = true)}
+	onmouseleave={() => (animate = false)}
 	class="flex items-center gap-2"
 >
-	<Bell size={16} animate={animate} />
+	<Bell size={16} {animate} />
 	<span>Notifications</span>
 </button>
 ```
@@ -103,13 +105,13 @@ Use the wrapper component in your navigation:
 </script>
 
 <nav class="flex flex-col gap-2">
-	<HoverableItem class="flex items-center gap-2 p-2 rounded">
+	<HoverableItem class="flex items-center gap-2 rounded p-2">
 		{#snippet children(isHovered)}
 			<Home size={16} animate={isHovered} />
 			<span>Home</span>
 		{/snippet}
 	</HoverableItem>
-	<HoverableItem class="flex items-center gap-2 p-2 rounded">
+	<HoverableItem class="flex items-center gap-2 rounded p-2">
 		{#snippet children(isHovered)}
 			<Settings size={16} animate={isHovered} />
 			<span>Settings</span>

package/dist/icons/accessibility.svelte

@@ -1,29 +1,20 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
-		if (!animate) {
-			animate = true;
-			setTimeout(() => {
-				animate = false;
-			}, 1400);
-		}
+		if (animate) return;
+		animate = true;
+		setTimeout(() => {
+			animate = false;
+		}, 1400);
 	}
 </script>
 

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

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Accessibility: import("svelte").Component<IconProps, {}, "">;
+type Accessibility = ReturnType<typeof Accessibility>;
 export default Accessibility;
-type Accessibility = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Accessibility: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/activity.svelte

@@ -1,25 +1,17 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 600);

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

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Activity: import("svelte").Component<IconProps, {}, "">;
+type Activity = ReturnType<typeof Activity>;
 export default Activity;
-type Activity = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Activity: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/airplay.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

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

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Airplay: import("svelte").Component<IconProps, {}, "">;
+type Airplay = ReturnType<typeof Airplay>;
 export default Airplay;
-type Airplay = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Airplay: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/alarm-clock-check.svelte

@@ -1,23 +1,16 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/alarm-clock-check.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const AlarmClockCheck: import("svelte").Component<IconProps, {}, "">;
+type AlarmClockCheck = ReturnType<typeof AlarmClockCheck>;
 export default AlarmClockCheck;
-type AlarmClockCheck = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const AlarmClockCheck: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/alarm-clock-off.svelte

@@ -1,23 +1,16 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
 		setTimeout(() => {
 			animate = false;

package/dist/icons/alarm-clock-off.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const AlarmClockOff: import("svelte").Component<IconProps, {}, "">;
+type AlarmClockOff = ReturnType<typeof AlarmClockOff>;
 export default AlarmClockOff;
-type AlarmClockOff = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const AlarmClockOff: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/alarm-clock.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

package/dist/icons/alarm-clock.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const AlarmClock: import("svelte").Component<IconProps, {}, "">;
+type AlarmClock = ReturnType<typeof AlarmClock>;
 export default AlarmClock;
-type AlarmClock = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const AlarmClock: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/align-horizontal-space-around.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

package/dist/icons/align-horizontal-space-around.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const AlignHorizontalSpaceAround: import("svelte").Component<IconProps, {}, "">;
+type AlignHorizontalSpaceAround = ReturnType<typeof AlignHorizontalSpaceAround>;
 export default AlignHorizontalSpaceAround;
-type AlignHorizontalSpaceAround = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const AlignHorizontalSpaceAround: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/align-vertical-space-around.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

package/dist/icons/align-vertical-space-around.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const AlignVerticalSpaceAround: import("svelte").Component<IconProps, {}, "">;
+type AlignVerticalSpaceAround = ReturnType<typeof AlignVerticalSpaceAround>;
 export default AlignVerticalSpaceAround;
-type AlignVerticalSpaceAround = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const AlignVerticalSpaceAround: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/anvil.svelte

@@ -1,25 +1,17 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
+		if (animate) return;
 		animate = true;
-
 		setTimeout(() => {
 			animate = false;
 		}, 500);

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

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Anvil: import("svelte").Component<IconProps, {}, "">;
+type Anvil = ReturnType<typeof Anvil>;
 export default Anvil;
-type Anvil = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Anvil: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/archive.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

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

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const Archive: import("svelte").Component<IconProps, {}, "">;
+type Archive = ReturnType<typeof Archive>;
 export default Archive;
-type Archive = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const Archive: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/arrow-big-down-dash.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

package/dist/icons/arrow-big-down-dash.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const ArrowBigDownDash: import("svelte").Component<IconProps, {}, "">;
+type ArrowBigDownDash = ReturnType<typeof ArrowBigDownDash>;
 export default ArrowBigDownDash;
-type ArrowBigDownDash = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const ArrowBigDownDash: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};

package/dist/icons/arrow-big-down.svelte

@@ -1,21 +1,13 @@
-<script>
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [color]
-	 * @property {number} [size]
-	 * @property {number} [strokeWidth]
-	 * @property {boolean} [animate]
-	 * @property {string} [class]
-	 */
+<script lang="ts">
+	import type { IconProps } from './types.js';
 
-	/** @type {Props} */
 	let {
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
 		animate = false,
 		class: className = ''
-	} = $props();
+	}: IconProps = $props();
 
 	function handleMouseEnter() {
 		animate = true;

package/dist/icons/arrow-big-down.svelte.d.ts

@@ -1,19 +1,4 @@
+import type { IconProps } from './types.js';
+declare const ArrowBigDown: import("svelte").Component<IconProps, {}, "">;
+type ArrowBigDown = ReturnType<typeof ArrowBigDown>;
 export default ArrowBigDown;
-type ArrowBigDown = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const ArrowBigDown: import("svelte").Component<{
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-}, {}, "">;
-type Props = {
-    color?: string;
-    size?: number;
-    strokeWidth?: number;
-    animate?: boolean;
-    class?: string;
-};