### Install project dependencies

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Installs all necessary dependencies for the project.

```bash
npm i
```

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

### Test the application

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Builds the application and starts a local preview server.

```bash
npm run build

npm run preview
```

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

### Tree Shaking Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

Demonstrates how to import only the necessary icons to leverage tree shaking for better performance. It shows a 'good' example of selective imports and an 'avoid' example of importing the entire library.

```svelte
<!-- Good: Only imports Activity and Heart -->
import { Activity, Heart } from '@jis3r/icons';

<!-- Avoid: Imports entire icon library -->
import * from '@jis3r/icons';
```

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

### Install via npm

Source: https://github.com/jis3r/icons/blob/main/README.md

Install the `@jis3r/icons` package using npm.

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

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

### Svelte Usage Examples

Source: https://github.com/jis3r/icons/blob/main/_autodocs/types.md

Examples demonstrating how to use icons in Svelte components with various props.

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

<!-- Basic usage with default props -->
<Activity />

<!-- Custom size and color -->
<Heart size={32} color="red" />

<!-- Override stroke width -->
<Settings size={24} strokeWidth={1.5} />

<!-- Apply CSS classes -->
<Activity class="text-blue-500 hover:scale-110" />

<!-- Controlled animation -->
<script>
	let isAnimating = $state(false);
</script>

<Heart size={24} animate={isAnimating} color="currentColor" />
<button onclick={() => (isAnimating = !isAnimating)}>
	Toggle Animation
</button>
```

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

### Installation

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Command to install the @jis3r/icons package.

```bash
npm install @jis3r/icons
```

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

### Tree Shaking Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Demonstrates how to import icons for full tree-shaking versus importing all icons.

```typescript
// Only Activity is included in bundle
import { Activity } from '@jis3r/icons';

// Avoid: Includes all 550 icons
import * as Icons from '@jis3r/icons';
```

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

### Usage Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Demonstrates how to import and use icon components with default and custom properties.

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

<!-- Default size and color -->
<Activity />

<!-- Custom properties -->
<Heart size={32} color="red" strokeWidth={2.5} />

<!-- With animation -->
<Settings animate={true} />

<!-- With CSS classes -->
<Activity class="text-blue-500 hover:scale-110" />
```

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

### Download Icon Usage Examples

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Examples demonstrating how to use the downloadIcon function to trigger a browser download of an icon's Svelte source code.

```typescript
// Download an icon with pre-loaded source
const icon: IconWithSource = {
	name: 'activity',
	source: '...'
};
await downloadIcon(icon);

// Download an icon without source (loads first)
const icon: IconWithSource = { name: 'bell' };
await downloadIcon(icon); // Loads then downloads

// In a Svelte component with button
<script lang="ts">
	import { downloadIcon, getIconSource } from '@jis3r/icons/utils';
	
	interface IconData {
		name: string;
		source?: string;
	}
	
	const handleDownload = async (name: string) => {
		try {
			const icon: IconData = { name };
			icon.source = await getIconSource(name);
			await downloadIcon(icon as IconWithSource);
		} catch (error) {
			alert(`Failed to download: ${error.message}`);
		}
	};
</script>

<button onclick={() => handleDownload('activity')}> 
	Download Activity Icon
</button>

// In an icon grid with download buttons
<script lang="ts">
	import { ICONS_LIST } from '@jis3r/icons';
	import { downloadIcon, getIconSource } from '@jis3r/icons/utils';
	
	const downloadFromGrid = async (iconName: string) => {
		const source = await getIconSource(iconName);
		await downloadIcon({ name: iconName, source });
	};
</script>

<div class="grid">
	{#each ICONS_LIST as icon}
		<div class="icon-card">
			<svelte:component this={icon.component} size={32} />
			<p>{icon.name}</p>
			<button onclick={() => downloadFromGrid(icon.name)}>
				Download
			</button>
		</div>
	{/each}
</div>
```

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

### Vite Environment Variables Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Example of environment variables defined in .env files and how they are accessed in TypeScript code via import.meta.env.

```env
# .env
VITE_SITE_URL=https://movingicons.dev

# .env.local (not committed)
VITE_API_KEY=...
```

```typescript
const siteUrl = import.meta.env.VITE_SITE_URL;
```

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

### Import Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Example of importing multiple icons from the library.

```typescript
import { Activity, Heart, Settings } from '@jis3r/icons';
```

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

### Basic Usage

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

Example of importing and rendering multiple icon components in Svelte.

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

<Activity />
<Heart />
<Settings />
```

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

### Import Patterns

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Examples of how to import icons and types from the library.

```typescript
// Import specific icons (recommended)
import { Activity, Heart, Settings } from '@jis3r/icons';

// Import with type
import type { IconProps, IconName } from '@jis3r/icons';

// Dynamic import (rare, not recommended)
const { Activity } = await import('@jis3r/icons');
```

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

### Styling With CSS Classes

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows how to style icons using CSS classes, including examples with Tailwind CSS, CSS Modules, and multiple class applications.

```svelte
<script>
	import { Search } from '@jis3r/icons';
</script>

<!-- Tailwind classes -->
<Search class="text-blue-500 hover:text-blue-700" />

<!-- CSS modules -->
<Search class={styles.icon} />

<!-- Multiple classes -->
<Search class="text-lg drop-shadow-lg transition-colors" />
```

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

### CSS Animation Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

An example of using global CSS selectors to apply animations to icons, specifically targeting the 'bell-icon' and its paths.

```css
:global(.bell-icon) {
	overflow: visible;
}

:global(.bell-icon.animate .bell-path) {
	animation: drawPath 0.6s ease-in-out forwards;
}
```

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

### Tree Shaking Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Demonstrates the recommended way to import icons for tree shaking.

```typescript
// ✅ Good - Only Activity is included
import { Activity } from '@jis3r/icons';

// ❌ Avoid - All icons are bundled
import * as Icons from '@jis3r/icons';
```

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

### Icon Component File Structure Example

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Illustrates the file structure within the src/lib/icons/ directory.

```bash
src/lib/icons/
├── types.ts                 # Type definitions (IconProps interface)
├── standalone-props.js      # Props replacement constants for inlining
├── activity.svelte          # Icon component
├── alarm-clock-check.svelte # Icon component
├── alarm-clock-off.svelte   # Icon component
├── alarm-clock.svelte       # Icon component
// ... 546+ more icon components
└── zap-off.svelte          # Icon component
```

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

### Medium Icon (Navigation)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Example of using an icon with medium dimensions, suitable for navigation elements.

```svelte
<Settings size={24} strokeWidth={2} />
```

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

### Type-only imports

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Example of importing types for icon props.

```typescript
// Type-only imports
import type { IconProps } from '@jis3r/icons';
```

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

### Control Animation

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Example demonstrating how to control icon animations using a Svelte state variable.

```svelte
<script>
	let isAnimating = $state(false);
</script>

<Bell animate={isAnimating} />
<button onclick={() => (isAnimating = !isAnimating)}>
	Toggle Animation
</button>
```

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

### Type Definitions Export

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Example of type definitions exported from the library.

```typescript
export type { IconProps } from './icons/types.js';
export type IconName = 'activity' | 'alarm-clock' | ... // 550+ names
```

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

### Memoize Dynamic Icon Components

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Provides a TypeScript example for memoizing dynamically imported icon components to avoid repeated imports and improve performance.

```typescript
const iconCache = new Map();

function getIcon(name: string) {
	if (!iconCache.has(name)) {
		iconCache.set(name, import(`@jis3r/icons/${name}.svelte`));
	}
	return iconCache.get(name);
}
```

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

### Override Styles

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Provides an example of how to override default icon styles using global CSS selectors, including custom animations.

```css
:global(.activity-icon) {
	overflow: visible;
}

:global(.activity-icon.animate .activity-path) {
	animation: customDrawPath 1s ease-in-out forwards;
}

@keyframes customDrawPath {
	0% {
		stroke-dashoffset: 50;
	}
	100% {
		stroke-dashoffset: 100;
	}
}
```

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

### Basic debounce

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using the debounce utility for a search input handler.

```typescript
import { debounce } from '@jis3r/icons/utils';

const handleSearch = debounce((query: string) => {
	console.log('Searching for:', query);
}, 300);
```

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

### Navigation with Animated Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

An example of creating a navigation bar where icons animate when they are the active route.

```svelte
<script>
	import { Home, Settings, User } from '@jis3r/icons';
	
type NavItem = {
		icon: any;
		label: string;
		href: string;
	};
	
	let activeRoute = $state('home');
	
	const items: NavItem[] = [
		{ icon: Home, label: 'Home', href: '/' },
		{ icon: Settings, label: 'Settings', href: '/settings' },
		{ icon: User, label: 'Profile', href: '/profile' }
	];
</script>

<nav class="flex gap-2">
	{#each items as item}
		<a
			href={item.href}
			class={activeRoute === item.label ? 'active' : ''}
		>
			<svelte:component
				this={item.icon}
				size={24}
				animate={activeRoute === item.label}
			/>
			<span>{item.label}</span>
		</a>
	{/each}
</nav>
```

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

### Debounce with window resize

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using debounce to handle window resize events and recalculate layout.

```typescript
const handleResize = debounce(() => {
	console.log('Window resized to', window.innerWidth);
	recalculateLayout();
}, 250);

window.addEventListener('resize', handleResize);
```

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

### ESM-only imports

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Example of importing an icon using ESM syntax.

```typescript
// ESM-only imports (no CommonJS)
import { Activity } from '@jis3r/icons';
```

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

### Manual Animation Control

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Example of manually controlling icon animations, allowing for triggering animations on demand and tracking counts.

```svelte
<script>
	import { Bell } from '@jis3r/icons';
	let animate = $state(false);
	let animationCount = 0;
	
	const triggerAnimation = async () => {
		animate = true;
		animationCount++;
		// Animation auto-completes and resets animate to false
	};
</script>

<Bell animate={animate} />
<button onclick={triggerAnimation}>Animate ({animationCount})</button>
```

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

### Use in Template

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Examples of how to use icon components directly in a Svelte template.

```svelte
<Activity size={24} color="currentColor" />
<Heart size={32} color="red" />
<Settings size={24} strokeWidth={2} />
```

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

### Conditional Imports (Dynamic)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Provides an example of dynamically importing an icon component based on a variable, useful for conditional rendering.

```svelte
<script>
	const iconName = 'activity';
	const IconComponent = (await import('@jis3r/icons')).Activity;
</script>

<svelte:component this={IconComponent} />
```

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

### Usage Examples

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Demonstrates various ways to use the `cn` utility for conditional class merging and Tailwind conflict resolution.

```typescript
import { cn } from '@jis3r/icons/utils';

// Basic merging
cn('px-2', 'py-3'); // 'px-2 py-3'

// Conditional classes
cn(
	'btn',
	isActive && 'bg-blue-500',
	isDisabled && 'opacity-50'
); // 'btn bg-blue-500' or 'btn opacity-50'

// Tailwind conflict resolution
cn('w-4', 'w-8'); // 'w-8' (not both)

// Merging variants
const buttonVariants = (variant: string) => {
	return cn(
		'px-4 py-2 rounded font-semibold',
		{
			'bg-blue-500 text-white': variant === 'primary',
			'bg-gray-200 text-gray-900': variant === 'secondary'
		}
	);
};

buttonVariants('primary'); // 'px-4 py-2 rounded font-semibold bg-blue-500 text-white'

// In a Svelte component
<script lang="ts">
	import { cn } from '@jis3r/icons/utils';
	
	let { variant = 'default', disabled = false, class: className = '' } = $props();
</script>

<button
	class={cn(
		'px-3 py-2 rounded transition',
		{
			'bg-blue-500 text-white hover:bg-blue-600': variant === 'primary',
			'bg-gray-200 text-gray-900 hover:bg-gray-300': variant === 'secondary'
		},
		disabled && 'opacity-50 cursor-not-allowed',
		className
	)}
	{disabled}
>
	<slot />
</button>
```

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

### Small Icon (Status Indicator)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Example of using an icon with small dimensions, suitable for status indicators.

```svelte
<Activity size={16} strokeWidth={2.5} />
```

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

### Large Icon (Hero/Feature)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Example of using an icon with large dimensions, suitable for hero sections or feature highlights.

```svelte
<Rocket size={64} strokeWidth={1.5} color="#3b82f6" />
```

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

### npm run prep Commands

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Sequence of commands for complete preparation before a release, covering indexing, re-exporting, building the registry, SvelteKit app, packaging, and formatting.

```bash
npm run index
npm run reexport
npm run registry:build
npm run build
npm run package
npm run format
```

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

### Manual Publishing Commands

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Commands for manually preparing and publishing the package to npm.

```bash
# Manual publishing
npm run prep           # Full preparation
npm publish           # Upload to npm (triggers prepublishOnly)
```

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

### Development Scripts (`package.json`)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Scripts for running the development server and previewing the production build.

```json
{
	"scripts": {
		"dev": "vite dev",
		"preview": "vite preview"
	}
}
```

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

### Build the project

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Builds the project, reexports icons, creates registry for shadcn-svelte, and formats the project.

```bash
npm run prep
```

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

### Not Recommended: Import All Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Illustrates import patterns that are not recommended because they import the entire icon library, potentially increasing bundle size.

```typescript
// ❌ Avoid - Imports entire library
import * as Icons from '@jis3r/icons';

// ❌ Avoid - Also imports entire library
import * from '@jis3r/icons';
```

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

### npm run registry:build Commands

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Commands to build the icon registry for the website, including updating exports, data, and generating the registry.json file.

```bash
npm run reexport
node scripts/updateRegistry.js
node scripts/buildRegistry.js
```

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

### Vitest Configuration

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Configuration for Vitest, setting up the testing environment.

```javascript
import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		globals: true,
		environment: 'jsdom'
	}
});
```

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

### Icon Generation Scripts (`package.json`)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Scripts for generating icon metadata, exports, and registry.

```json
{
	"scripts": {
		"index": "tsx scripts/indexIcons.ts && prettier --write src/lib-docs/icons-meta.ts",
		"reexport": "tsx scripts/generateIconExports.ts",
		"registry:build": "npm run reexport && node scripts/updateRegistry.js && node scripts/buildRegistry.js",
		"prep": "npm run index && npm run reexport && npm run registry:build && npm run build && npm run package && npm run format"
	}
}
```

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

### Other Scripts in package.json

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

JSON object containing script definitions for formatting, linting, and testing.

```json
{
	"scripts": {
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint .",
		"test:unit": "vitest",
		"test": "npm run test:unit -- --run"
	}
}
```

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

### Alias imports

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Example of using alias imports for utility functions.

```typescript
// Alias imports
import { cn } from '$lib-docs/utils.js';
import { getIconSource } from '$lib-docs/utils/icons.ts';
```

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

### All Icon Components

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Illustrates how to import a large number of icon components from the library. The library exports over 550 named icons in PascalCase, corresponding to kebab-case file names.

```typescript
import {
	Accessibility,
	Activity,
	AlarmClock,
	AlarmClockCheck,
	AlarmClockOff,
	// ... 545+ more icons
	Zap,
	ZapOff
} from '@jis3r/icons';
```

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

### Production Build Scripts (`package.json`)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Scripts for building the project for production and packaging it for npm distribution.

```json
{
	"scripts": {
		"build": "vite build",
		"package": "svelte-kit sync && svelte-package && publint",
		"prepublishOnly": "npm run package"
	}
}
```

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

### Icon Components Export

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Example of named exports for icon components from the library.

```typescript
export { default as Activity } from './icons/activity.svelte';
export { default as AlarmClock } from './icons/alarm-clock.svelte';
// ... 548+ more icons
```

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

### Basic Usage

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Import and render icon components directly. You can pass props like `size` and `color` to customize their appearance.

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

<Activity />
<Heart size={32} color="red" />
<Settings strokeWidth={2.5} />
```

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

### Key Dev Dependencies in package.json

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Lists key development dependencies for the project, including SvelteKit, Vite, TypeScript, Prettier, ESLint, and Vitest.

```json
{
	"devDependencies": {
		"@sveltejs/adapter-auto": "^6.0.1",
		"@sveltejs/kit": "^2.26.1",
		"@sveltejs/package": "^2.0.0",
		"svelte": "^5.0.0",
		"tailwindcss": "^4.1.16",
		"typescript": "^5.3.2",
		"vite": "^6.3.5",
		"vitest": "^3.1.1",
		"prettier": "^3.3.2",
		"eslint": "^9.7.0",
		"tsx": "^4.21.0"
	}
}
```

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

### Recommended: Import Only Used Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows the recommended way to import icons by only importing the ones that are actually used, which is beneficial for tree shaking.

```typescript
// ✅ Good - Only imports these icons
import { Activity, Heart, Settings } from '@jis3r/icons';
```

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

### Debounce auto-complete search

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using debounce for an auto-complete search input in a Svelte component.

```typescript
let searchResults: any[] = [];
let searchQuery = $state('');

const fetchResults = debounce(async (query: string) => {
	if (query.length < 2) {
		searchResults = [];
		return;
	}
	const response = await fetch(`/api/autocomplete?q=${query}`);
	searchResults = await response.json();
}, 300);

const handleSearchInput = (query: string) => {
	searchQuery = query;
	fetchResults(query);
};

<input
	type="text"
	value={searchQuery}
	oninput={(e) => handleSearchInput(e.currentTarget.value)}
	placeholder="Type to search..."
/>

<ul>
	{#each searchResults as result}
		<li>{result.name}</li>
	{/each}
</ul>
```

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

### Navigate to the project directory

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Changes the current directory to the project's root.

```bash
cd icons
```

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

### Debounce with complex operations

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using debounce for an auto-save functionality triggered by form changes.

```typescript
const debouncedSave = debounce((data: FormData) => {
	api.saveForm(data).then(() => {
		showNotification('Saved!');
	});
}, 1000);

form.addEventListener('change', () => {
	const formData = new FormData(form);
	debouncedSave(formData);
});
```

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

### Loading/Spinner Style (via Animation)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows how to apply a loading or spinner animation to an icon using the `animate` prop and CSS classes.

```svelte
<script>
	import { RotateCw } from '@jis3r/icons';
	let isLoading = $state(true);
</script>

<RotateCw animate={isLoading} class="animate-spin" />
```

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

### Publishing via CI

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Command for publishing to npm, typically triggered via a CI workflow on a git tag.

```bash
npm publish
```

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

### Icon with Label

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

An example of combining an icon with accompanying text to create a labeled element, such as an error message.

```svelte
<script>
	import { AlertCircle } from '@jis3r/icons';
</script>

<div class="flex items-center gap-2 text-sm text-red-600">
	<AlertCircle size={18} />
	<span>An error occurred</span>
</div>
```

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

### Build Scripts

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Common npm scripts for development, building, and packaging the project.

```bash
npm run dev              # Start development server
npm run build           # Build SvelteKit app
npm run package         # Package for npm distribution
npm run prep            # Full preparation before release
```

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

### Clone the forked repository

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Clones the forked repository to your local machine.

```bash
git clone https://github.com/your-username/icons.git
```

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

### Debounce with Svelte component

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using debounce within a Svelte component for handling input events and making API calls.

```typescript
import { debounce } from '@jis3r/icons/utils';

let query = $state('');

const search = debounce((q: string) => {
	fetch(`/api/search?q=${q}`).then(res => res.json());
}, 500);

const handleInput = (e: Event) => {
	const input = e.target as HTMLInputElement;
	query = input.value;
	search(query);
};

<input
	type="text"
	value={query}
	oninput={handleInput}
	placeholder="Search..."
/>
```

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

### getIconSource() In a Svelte Component

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Example of using getIconSource within a Svelte component to dynamically load and display icon source code.

```svelte
<script lang="ts">
	import { getIconSource } from '@jis3r/icons/utils';
	
	let sourceCode = $state('');
	let isLoading = $state(false);
	
	const loadIcon = async (name: string) => {
		isLoading = true;
		try {
			sourceCode = await getIconSource(name);
		} catch (error) {
			console.error('Failed to load:', error);
		} finally {
			isLoading = false;
		}
	};
</script>

<button onclick={() => loadIcon('activity')}>
	{isLoading ? 'Loading...' : 'Load Activity Icon'}
</button>

{#if sourceCode}
	<pre><code>{sourceCode}</code></pre>
{/if}
```

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

### Dynamic Sizing

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Demonstrates how to dynamically change an icon's size using a state variable bound to an input range slider.

```svelte
<script>
	let size = $state(24);
</script>

<Activity size={size} />
<input type="range" min="16" max="64" bind:value={size} />
```

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

### Animation Control

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

Example of controlling the animation prop of an icon component using Svelte state and event listeners for hover effects.

```svelte
<script>
	import { Bell } from '@jis3r/icons';
	let isAnimating = $state(false);
</script>

<div
	onmouseenter={() => (isAnimating = true)}
	onmouseleave={() => (isAnimating = false)}
>
	<Bell size={24} animate={isAnimating} />
</div>
```

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

### Programmatic Icon Selection

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Demonstrates how to dynamically select and render an icon component based on a string name. It includes a helper function `toPascalCase` to convert kebab-case names to PascalCase for importing from the icon library.

```svelte
<script>
	import * as Icons from '@jis3r/icons';
	
	let selectedIconName = 'activity';
	
	// Convert kebab-case to PascalCase
	function toPascalCase(str: string) {
		return str
			.split('-')
			.map(word => word.charAt(0).toUpperCase() + word.slice(1))
			.join('');
	}
	
	$: SelectedIcon = Icons[toPascalCase(selectedIconName)];
</script>

<svelte:component this={SelectedIcon} size={32} />
<select bind:value={selectedIconName}>
	<option value="activity">Activity</option>
	<option value="bell">Bell</option>
	<option value="settings">Settings</option>
</select>
```

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

### Component Props Type Reference

Source: https://github.com/jis3r/icons/blob/main/_autodocs/types.md

Illustrates the common IconProps interface accepted by all icon components and provides examples of individual icon component signatures.

```typescript
interface ActivityIcon extends SvelteComponent<IconProps> {}
interface AlarmClock extends SvelteComponent<IconProps> {}
// ... all 550+ icon components
```

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

### Documentation Utilities File Structure

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

File structure for the documentation utilities directory.

```bash
src/lib-docs/
├── utils/
│   ├── icons.ts      # Icon source loading and downloading
│   └── debounce.js   # Function debouncing utility
├── utils.js          # Class name merging utility
├── icons-meta.ts     # Icon metadata and list
└── components/       # Documentation website components (not public API)
```

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

### Debounce Function

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

A utility function for debouncing, which limits the rate at which a function can fire. This example shows debouncing an input event to optimize API calls.

```typescript
import { debounce } from '$lib-docs/utils/debounce.js';

const debouncedSearch = debounce((query: string) => {
	fetch(`/api/search?q=${query}`);
}, 300);

input.addEventListener('input', (e) => {
	debouncedSearch(e.target.value);
});
```

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

### Download Icon

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Utility function to download an icon as a `.svelte` file. It requires the icon name and its source code.

```typescript
import { downloadIcon } from '$lib-docs/utils/icons.ts';

const icon = { name: 'bell', source: await getIconSource('bell') };
await downloadIcon(icon); // Downloads bell.svelte
```

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

### Svelte Kit Configuration (`svelte.config.js`)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Configuration for Svelte Kit, including the adapter and path aliases.

```javascript
import adapter from '@sveltejs/adapter-auto';

const config = {
	kit: {
		adapter: adapter(),
		alias: {
			'$lib-docs': 'src/lib-docs',
			'$lib-docs/*': 'src/lib-docs/*'
		}
	}
};

export default config;
```

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

### Manual Animation Trigger

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Example of controlling icon animation manually using a boolean state variable. The `animate` prop on the icon component is toggled to trigger the animation.

```svelte
<script>
	import { Bell } from '@jis3r/icons';
	let animate = $state(false);
</script>

<Bell animate={animate} />
<button onclick={() => animate = true}>Animate</button>
```

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

### Browser Download Pattern

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Demonstrates the standard browser download pattern using Blob, URL.createObjectURL, and a synthetic link element.

```typescript
const blob = new Blob([sourceCode], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${iconName}.svelte`;
link.click();
URL.revokeObjectURL(url);
```

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

### IconName Type Union

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows the `IconName` type, which is a union of all available icon names represented as kebab-case strings. Examples of assigning specific icon names to this type are provided.

```typescript
import type { IconName } from '@jis3r/icons';

type SelectedIcon = IconName; // One of 550+ icon names as kebab-case strings

// Examples:
const icon1: IconName = 'activity';
const icon2: IconName = 'alarm-clock';
const icon3: IconName = 'bell-ring';
```

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

### Animation

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Shows how to enable and control icon animations using mouse events.

```svelte
<script>
	import { Bell } from '@jis3r/icons';
	let animate = $state(false);
</script>

<div onmouseenter={() => (animate = true)} onmouseleave={() => (animate = false)}>
	<Bell animate={animate} />
</div>
```

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

### Semantic Icon Usage

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Illustrates best practices for semantic icon usage, including associating icons with text labels for accessibility.

```html
<!-- ✅ Good: Icon with aria-label or label text -->
<div class="flex items-center gap-2">
	<Settings size={20} />
	<span>Settings</span>
</div>

<!-- ✅ Good: Icon with title -->
<Settings size={20} title="Open settings" />

<!-- ✅ Good: Icon with visible label -->
<button>
	<Trash size={20} />
	Delete
</button>
```

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

### Lazy Load Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows how to lazy load icon components using Svelte's `lazy` function, improving initial load performance.

```svelte
<script>
	import { lazy } from 'svelte';
	const Activity = lazy(() => import('@jis3r/icons').then(m => ({ default: m.Activity })));
</script>

<svelte:component this={Activity} />
```

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

### Preload Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to preload a list of icons and handle potential errors during the batch loading process.

```typescript
// Preload a list of icons
const iconList: Icon[] = [
	{ name: 'activity', ... },
	{ name: 'bell', ... },
	{ name: 'settings', ... }
];

const iconsWithSource = await preloadIconSources(iconList);

// Preload with error handling
try {
	const loaded = await preloadIconSources(iconList);
	loaded.forEach(icon => {
		console.log(icon.name, icon.source ? 'loaded' : 'failed');
	});
} catch (error) {
	console.error('Batch load failed:', error.message);
}
```

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

### Index and test icon addition

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Scripts to add an icon and test it locally, assuming lucide repository is cloned in the same directory.

```bash
npm run index

npm run dev
```

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

### Icon-Only Buttons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Shows how to implement icon-only buttons while maintaining accessibility by providing `aria-label` or `title` attributes.

```svelte
<script>
	import { Settings } from '@jis3r/icons';
</script>

<!-- Add label context for screen readers -->
<button
	aria-label="Settings"
	title="Open settings"
>
	<Settings size={24} />
</button>
```

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

### Package Metadata

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

The package.json file contains essential metadata for the npm package.

```json
{
	"name": "@jis3r/icons",
	"version": "2.7.0",
	"description": "beautifully crafted, moving icons. for svelte.",
	"author": "jis3r",
	"license": "MIT",
	"repository": {
		"type": "git",
		"url": "git+https://github.com/jis3r/icons.git"
	},
	"keywords": ["svelte", "icons", "lucide", "animated"],
	"type": "module"
}
```

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

### Package.json Exports

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Configuration showing the main entry point export for the package.

```json
{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	}
}
```

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

### ESLint Configuration

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Configuration for ESLint, enforcing modern JavaScript, TypeScript strict mode, Svelte best practices, and Prettier formatting.

```javascript
import globals from 'globals';
import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';

export default [
	js.configs.recommended,
	...ts.configs.recommended,
	...svelte.configs['flat/recommended'],
	...svelte.configs['flat/prettier'],
	prettier
];
```

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

### Export Configuration

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Defines the entry points for the package, including ESM conditional exports and Svelte-specific entry points.

```json
{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	},
	"svelte": "./dist/index.js",
	"types": "./dist/index.d.ts"
}
```

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

### Preload Multiple Icons

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Utility function to asynchronously preload the source code for multiple icons. The loaded sources are added to the icon objects.

```typescript
import { preloadIconSources } from '$lib-docs/utils/icons.ts';

const icons = [
	{ name: 'activity' },
	{ name: 'bell' },
	{ name: 'settings' }
];

const loaded = await preloadIconSources(icons);
// Each icon now has optional 'source' property
```

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

### Icon File Organization

Source: https://github.com/jis3r/icons/blob/main/_autodocs/icon-catalog.md

Illustrates the flat directory structure for storing individual Svelte icon components.

```bash
src/lib/icons/
├── types.ts                     # IconProps interface
├── standalone-props.js          # Props replacement utilities
├── accessibility.svelte
├── activity.svelte
├── airplay.svelte
├── alarm-clock-check.svelte
├── alarm-clock-off.svelte
├── alarm-clock.svelte
├── align-horizontal-space-around.svelte
├── align-vertical-space-around.svelte
// ... 540+ more icon files
└── zap-off.svelte
```

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

### Customization

Source: https://github.com/jis3r/icons/blob/main/_autodocs/README.md

Illustrates advanced customization of icon properties and CSS classes for styling.

```svelte
<Activity 
	size={48}
	color="#3b82f6"
	strokeWidth={1.5}
	class="hover:text-red-500 transition-colors"
/>
```

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

### npm package.json files configuration

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Configuration within package.json specifying which files are included in the npm package, primarily the 'dist/' directory.

```json
{
	"files": [
		"dist",
		"!dist/**/*.test.*",
		"!dist/**/*.spec.*	"
	]
}
```

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

### Prettier Configuration

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Configuration for Prettier, including settings for Svelte component formatting and Tailwind class sorting.

```json
{
	"printWidth": 100,
	"tabWidth": 2,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"plugins": [
		"prettier-plugin-svelte",
		"prettier-plugin-tailwindcss"
	]
}
```

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

### Documentation Organization

Source: https://github.com/jis3r/icons/blob/main/_autodocs/INDEX.md

The directory structure of the documentation.

```bash
/workspace/home/output/
├── README.md                          # Main entry point
├── types.md                           # Type definitions
├── modules.md                         # Module structure
├── build-and-configuration.md         # Build system
├── icon-catalog.md                    # Icon directory
└── api-reference/
    ├── quick-reference.md             # Code examples
    ├── icon-components.md             # Component docs
    └── utilities.md                   # Utility functions

```

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

### TypeScript Configuration (`tsconfig.json`)

Source: https://github.com/jis3r/icons/blob/main/_autodocs/build-and-configuration.md

Standard TypeScript configuration generated by Svelte Kit.

```json
{
	"compilerOptions": {
		"target": "ES2020",
		"lib": ["ES2020", "DOM", "DOM.Iterable"],
		"module": "ESNext",
		"moduleResolution": "bundler",
		"resolveJsonModule": true,
		"allowJs": true,
		"strict": true,
		"noImplicitAny": true
	},
	"include": ["src"],
	"exclude": ["node_modules", "build", "dist"]
}
```

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

### Create a new branch

Source: https://github.com/jis3r/icons/blob/main/CONTRIBUTING.md

Creates a new branch for feature or bug fix development.

```bash
git checkout -b your-branch-name
```

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

### Usage of Reusable Icon Wrapper

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/icon-components.md

Demonstrates how to use the `IconButton` component with different icons and props.

```svelte
<script>
	import IconButton from './IconButton.svelte';
	import { Settings, Bell, LogOut } from '@jis3r/icons';
</script>

<IconButton icon={Settings} label="Settings" />
<IconButton icon={Bell} label="Notifications" color="blue" />
<IconButton icon={LogOut} label="Sign Out" color="red" />
```

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

### IconProps Type

Source: https://github.com/jis3r/icons/blob/main/_autodocs/api-reference/quick-reference.md

Demonstrates how to import and use the `IconProps` type for defining props, showing default values.

```typescript
import type { IconProps } from '@jis3r/icons';

const defaultProps: IconProps = {
	color: 'currentColor',
	size: 24,
	strokeWidth: 2,
	animate: false,
	class: ''
};
```

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

### Development Dependencies

Source: https://github.com/jis3r/icons/blob/main/_autodocs/modules.md

Key development dependencies for building and documentation.

```json
{
	"@lucide/svelte": "^0.575.0",
	"svelte": "^5.0.0",
	"@sveltejs/kit": "^2.26.1",
	"@sveltejs/package": "^2.0.0",
	"vite": "^6.3.5"
}
```