@jis3r/icons 1.25.2 → 2.0.0

package/README.md

@@ -9,23 +9,25 @@
 
 ## Installation
 
-### 1. Install via npm
+There are three ways to install icons into your project:
+
+### Install via npm
 
 ```bash
 npm i @jis3r/icons
 ```
 
-### 2. Add via shadcn-svelte registry
+### Add via shadcn-svelte registry
 
-You can add icons to your project using the [shadcn registry](https://www.shadcn-svelte.com). Ensure shadcn-svelte is installed. To add an icon, simply copy the command from the website and run it in your terminal. Icons will be added to your project in the `src/lib/components/movingicons` directory.
+You can add icons to your project using the shadcn registry. Ensure shadcn-svelte is installed. To add an icon, simply copy the command from the website and run it in your terminal. Icons will be added to your project in the `src/lib/components/movingicons` directory.
 
 ```bash
 npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]
 ```
 
-### 3. Copy from Website
+### Copy from website
 
-You can download or copy icon components directly from [https://movingicons.dev](https://movingicons.dev) and paste them into your Svelte project.
+You can download or copy icon components directly from the [icons page](https://movingicons.dev/icons) and paste them into your Svelte project.
 
 ## Usage
 
@@ -40,15 +42,81 @@ Import icons as named Svelte components:
 <Star size={32} color="blue" />
 ```
 
-- All icons are available as named exports in PascalCase.
+- All icons are available as named exports in PascalCase and are identical to the respective Lucide icon names.
 - Compatible with SvelteKit and Svelte projects.
 
 ## Props
 
-- `size` (number, default: 24)
-- `color` (string, default: 'currentColor')
-- `strokeWidth` (number, default: 2)
-- `class` (string, optional)
+| 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
+
+Control icon animations from parent elements by binding the `animate` prop to your own hover state:
+
+```svelte
+<script>
+	import { Bell } from '@jis3r/icons';
+
+	let animate = $state(false);
+</script>
+
+<button
+	onmouseenter={() => animate = true}
+	onmouseleave={() => animate = false}
+	class="flex items-center gap-2"
+>
+	<Bell size={16} animate={animate} />
+	<span>Notifications</span>
+</button>
+```
+
+When building navigation or sidebar components, it might come in handy to create a reusable wrapper component. With snippets, you can pass the hover state to the children, allowing icons to animate on hover:
+
+```svelte
+<!-- HoverableItem.svelte -->
+<script>
+	let { children, class: className = '' } = $props();
+	let isHovered = $state(false);
+</script>
+
+<div
+	class={className}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
+>
+	{@render children(isHovered)}
+</div>
+```
+
+Use the wrapper component in your navigation:
+
+```svelte
+<script>
+	import HoverableItem from './HoverableItem.svelte';
+	import { Home, Settings } from '@jis3r/icons';
+</script>
+
+<nav class="flex flex-col gap-2">
+	<HoverableItem class="flex items-center gap-2 p-2 rounded">
+		{#snippet children(isHovered)}
+			<Home size={16} animate={isHovered} />
+			<span>Home</span>
+		{/snippet}
+	</HoverableItem>
+	<HoverableItem class="flex items-center gap-2 p-2 rounded">
+		{#snippet children(isHovered)}
+			<Settings size={16} animate={isHovered} />
+			<span>Settings</span>
+		{/snippet}
+	</HoverableItem>
+</nav>
+```
 
 ## Contributing
 

package/dist/icons/accessibility.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,15 +13,15 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		if (!isHovered) {
-			isHovered = true;
+		if (!animate) {
+			animate = true;
 			setTimeout(() => {
-				isHovered = false;
+				animate = false;
 			}, 1400);
 		}
 	}
@@ -39,7 +39,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="accessibility-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<circle cx="16" cy="4" r="1" class="accessibility-circle" />
 		<g class="accessibility-group1">

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

@@ -7,13 +7,13 @@ declare const Accessibility: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

package/dist/icons/activity.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,15 +13,15 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 
 		setTimeout(() => {
-			isHovered = false;
+			animate = false;
 		}, 600);
 	}
 </script>
@@ -38,7 +38,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="activity-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<path
 			d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"

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

@@ -7,13 +7,13 @@ declare const Activity: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

package/dist/icons/airplay.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,16 +13,16 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 	}
 
 	function handleMouseLeave() {
-		isHovered = false;
+		animate = false;
 	}
 </script>
 
@@ -49,7 +49,7 @@
 			d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"
 			class="airplay-path1"
 		/>
-		<path d="m12 15 5 6H7Z" class="airplay-path2" class:hovered={isHovered} />
+		<path d="m12 15 5 6H7Z" class="airplay-path2" class:hovered={animate} />
 	</svg>
 </div>
 

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

@@ -7,13 +7,13 @@ declare const Airplay: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

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

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,14 +13,14 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 		setTimeout(() => {
-			isHovered = false;
+			animate = false;
 		}, 500);
 	}
 </script>
@@ -37,7 +37,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="alarm-clock-check-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<circle cx="12" cy="13" r="8" />
 		<path d="M5 3 2 6" />

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

@@ -7,13 +7,13 @@ declare const AlarmClockCheck: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

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

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,14 +13,14 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 		setTimeout(() => {
-			isHovered = false;
+			animate = false;
 		}, 600);
 	}
 </script>
@@ -37,7 +37,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="alarm-clock-off"
-		class:animate={isHovered}
+		class:animate
 	>
 		<path d="M6.87 6.87a8 8 0 1 0 11.26 11.26" />
 		<path d="M19.9 14.25a8 8 0 0 0-9.15-9.15" />

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

@@ -7,13 +7,13 @@ declare const AlarmClockOff: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

package/dist/icons/alarm-clock.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,16 +13,16 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 	}
 
 	function handleMouseLeave() {
-		isHovered = false;
+		animate = false;
 	}
 </script>
 
@@ -44,7 +44,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="alarm-clock-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<path d="M18 20.5L19.5 22" class="primary-path" />
 		<path d="M6 20.5L4.5 22" class="primary-path" />

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

@@ -7,13 +7,13 @@ declare const AlarmClock: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

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

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,16 +13,16 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 	}
 
 	function handleMouseLeave() {
-		isHovered = false;
+		animate = false;
 	}
 </script>
 
@@ -44,7 +44,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="align-horizontal-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<rect class="rectangle" width={6} height={10} x={9} y={7} rx={2} />
 		<path class="left-line" d="M4 22V2" />

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

@@ -7,13 +7,13 @@ declare const AlignHorizontalSpaceAround: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

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

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,16 +13,16 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 	}
 
 	function handleMouseLeave() {
-		isHovered = false;
+		animate = false;
 	}
 </script>
 
@@ -44,7 +44,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="align-vertical-icon"
-		class:animate={isHovered}
+		class:animate
 	>
 		<rect class="rectangle" width={10} height={6} x={7} y={9} rx={2} />
 		<path class="top-line" d="M22 4H2" />

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

@@ -7,13 +7,13 @@ declare const AlignVerticalSpaceAround: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

package/dist/icons/anvil.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,15 +13,15 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 
 		setTimeout(() => {
-			isHovered = false;
+			animate = false;
 		}, 500);
 	}
 </script>
@@ -43,7 +43,7 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 		class="anvil-icon overflow-hidden"
-		class:animate={isHovered}
+		class:animate
 	>
 		<path d="M7 10H6a4 4 0 0 1-4-4 1 1 0 0 1 1-1h4" />
 		<path d="M7 5a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1 7 7 0 0 1-7 7H8a1 1 0 0 1-1-1z" />

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

@@ -7,13 +7,13 @@ declare const Anvil: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };

package/dist/icons/archive.svelte

@@ -4,7 +4,7 @@
 	 * @property {string} [color]
 	 * @property {number} [size]
 	 * @property {number} [strokeWidth]
-	 * @property {boolean} [isHovered]
+	 * @property {boolean} [animate]
 	 * @property {string} [class]
 	 */
 
@@ -13,16 +13,16 @@
 		color = 'currentColor',
 		size = 24,
 		strokeWidth = 2,
-		isHovered = false,
+		animate = false,
 		class: className = ''
 	} = $props();
 
 	function handleMouseEnter() {
-		isHovered = true;
+		animate = true;
 	}
 
 	function handleMouseLeave() {
-		isHovered = false;
+		animate = false;
 	}
 </script>
 
@@ -44,9 +44,9 @@
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	>
-		<rect width="20" height="5" x="2" y="3" rx="1" class:animate-rect={isHovered} />
-		<path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" class:animate-path={isHovered} />
-		<path d="M10 12h4" class:animate-path={isHovered} />
+		<rect width="20" height="5" x="2" y="3" rx="1" class:animate-rect={animate} />
+		<path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" class:animate-path={animate} />
+		<path d="M10 12h4" class:animate-path={animate} />
 	</svg>
 </div>
 

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

@@ -7,13 +7,13 @@ declare const Archive: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 }, {}, "">;
 type Props = {
     color?: string;
     size?: number;
     strokeWidth?: number;
-    isHovered?: boolean;
+    animate?: boolean;
     class?: string;
 };