Moving Icons

https://movingicons.dev
Admin
Moving Icons is an animated icon library for Svelte 5 providing over 500 customizable,...
Tokens:2,828
Snippets:20
Trust Score:5.8
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Install via npm

Source: https://movingicons.dev

Install the icons package via npm.

```bash
npm i @jis3r/icons
```

--------------------------------

### npm install @jis3r/icons

Source: https://movingicons.dev

Install the Moving Icons library via npm to use the animated Svelte icon components.

```APIDOC
## npm install @jis3r/icons

### Description
Install the Moving Icons library via npm to use the animated Svelte icon components.

### Method
npm install

### Endpoint
npm i @jis3r/icons

### Parameters
None

### Request Example
```bash
npm i @jis3r/icons
```

### Response
#### Success Response
Installation completes successfully.

#### Response Example
```
added 1 package
```
```

--------------------------------

### Add via shadcn-svelte registry

Source: https://movingicons.dev

Add an icon to your project using the shadcn-svelte registry. Ensure shadcn-svelte is installed first. Icons are added to src/lib/components/movingicons.

```bash
npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]
```

--------------------------------

### Import and use icons

Source: https://movingicons.dev

Import icons as named Svelte components. All icons are named exports in PascalCase, identical to Lucide icon names. Compatible with SvelteKit and Svelte projects.

```svelte
<script>
	import { Activity, Star } from '@jis3r/icons';
</script>

<Activity size={32} color="orange" strokeWidth={2.5} />
<Star size={32} color="blue" />
```

--------------------------------

### Import icons as named Svelte components

Source: https://movingicons.dev

Import icons as named Svelte components from the @jis3r/icons package. All icons are available as named exports in PascalCase.

```APIDOC
## Import icons as named Svelte components

### Description
Import icons as named Svelte components from the @jis3r/icons package. All icons are available as named exports in PascalCase.

### Method
Import

### Endpoint
import { Activity, Star } from '@jis3r/icons';

### Parameters
None

### Request Example
```svelte
<script>
	import { Activity, Star } from '@jis3r/icons';
</script>

<Activity size={32} color="orange" strokeWidth={2.5} />
<Star size={32} color="blue" />
```

### Response
#### Success Response
Icons are rendered as Svelte components.

#### Response Example
```html
<svg>...</svg>
```
```

--------------------------------

### npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]

Source: https://movingicons.dev

Add individual icons to your project using the shadcn-svelte registry. This command copies the icon component into your project's src/lib/components/movingicons directory.

```APIDOC
## npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]

### Description
Add individual icons to your project using the shadcn-svelte registry. This command copies the icon component into your project's src/lib/components/movingicons directory.

### Method
npx command

### Endpoint
npx shadcn-svelte@latest add https://movingicons.dev/r/[icon-name]

### Parameters
#### Path Parameters
- **icon-name** (string) - Required - The name of the icon to add.

### Request Example
```bash
npx shadcn-svelte@latest add https://movingicons.dev/r/activity
```

### Response
#### Success Response
Icon component added to the project.

#### Response Example
```
✔ Done
```
```

--------------------------------

### Icon component props

Source: https://movingicons.dev

Documentation for the props accepted by all icon components in the Moving Icons library.

```APIDOC
## Icon component props

### Description
Documentation for the props accepted by all icon components in the Moving Icons library.

### Method
Component Props

### Endpoint
<Icon />

### Parameters
#### Component Props
- **size** (number) - Optional - Icon size in pixels. Default: 24
- **color** (string) - Optional - Stroke color (CSS color value). Default: 'currentColor'
- **strokeWidth** (number) - Optional - SVG stroke width. Default: 2
- **class** (string) - Optional - Optional additional CSS classes.
- **animate** (boolean) - Optional - Controls icon animation state. Default: false

### Request Example
```svelte
<Activity size={32} color="orange" strokeWidth={2.5} />
```

### Response
#### Success Response
Icon component renders with the specified props.

#### Response Example
```html
<svg>...</svg>
```
```

--------------------------------

### Advanced usage: wrapper component with snippets

Source: https://movingicons.dev

Create a reusable wrapper component using Svelte snippets to pass hover state to children, allowing icons to animate on hover.

```APIDOC
## Advanced usage: wrapper component with snippets

### Description
Create a reusable wrapper component using Svelte snippets to pass hover state to children, allowing icons to animate on hover.

### Method
Component Usage

### Endpoint
<HoverableItem> ... </HoverableItem>

### Parameters
#### Component Props
- **children** (snippet) - Required - A snippet that receives the hover state.
- **class** (string) - Optional - Additional CSS classes.

### Request Example
```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>
```

### Response
#### Success Response
Icons animate when the wrapper is hovered.

#### Response Example
```html
<nav>...</nav>
```
```

--------------------------------

### Create HoverableItem wrapper component

Source: https://movingicons.dev

A reusable wrapper component that passes hover state to its children via snippets, 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 HoverableItem in navigation

Source: https://movingicons.dev

Use the HoverableItem wrapper component in a navigation, passing the hover state to icons via snippets.

```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>
```

--------------------------------

### Bind animate prop to hover state

Source: https://movingicons.dev

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>
```

--------------------------------

### Advanced usage: binding animate prop

Source: https://movingicons.dev

Control icon animations from parent elements by binding the animate prop to your own hover state.

```APIDOC
## Advanced usage: binding animate prop

### Description
Control icon animations from parent elements by binding the animate prop to your own hover state.

### Method
Component Usage

### Endpoint
<Bell animate={animate} />

### Parameters
#### Component Props
- **animate** (boolean) - Required - The animation state, typically bound to a hover state.
- **size** (number) - Optional - Icon size in pixels.

### Request Example
```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>
```

### Response
#### Success Response
Icon animates when the parent element is hovered.

#### Response Example
```html
<button>...</button>
```
```
Tokens:
Raw