npm package: @plusuidesign/iconiverse-svelte
Description: Svelte components for Iconiverse icon library
Latest version: 0.1.2

# @plusuidesign/iconiverse-svelte

A comprehensive Svelte icon library with **5,944+ icons** featuring both filled and outlined variants. Built for modern Svelte applications with full TypeScript support, tree-shaking, and zero dependencies.

## Features

✨ **5,944+ Icons** - Comprehensive collection across 43 categories  
🎨 **Dual Variants** - Both filled and outlined styles  
📦 **Tree-Shakeable** - Only bundle the icons you use  
🔷 **TypeScript First** - Full type safety and IntelliSense  
⚡ **Zero Dependencies** - Standalone package, no external runtime deps  
🎯 **Framework Optimized** - Built specifically for Svelte 4 & 5  
🌐 **SSR Compatible** - Works with SvelteKit and other Svelte SSR solutions  
♿ **Accessible** - Built-in accessibility features  

## Installation

```bash
npm install @plusuidesign/iconiverse-svelte
# or
pnpm add @plusuidesign/iconiverse-svelte
# or
yarn add @plusuidesign/iconiverse-svelte
```

## Usage

### Basic Usage

```svelte
<script lang="ts">
  import { HeartFilled, StarOutlined, UserFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<div>
  <HeartFilled />
  <StarOutlined class="text-yellow-500" />
  <UserFilled size={32} color="#ff0000" />
</div>
```

### With Tailwind CSS

```svelte
<script lang="ts">
  import { SearchOutlined, MenuFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<header class="flex items-center gap-4 p-4">
  <MenuFilled class="w-6 h-6 text-gray-700" />
  <SearchOutlined class="w-5 h-5 text-gray-500" />
</header>
```

### Props

All icon components accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string \| number` | `24` | Icon size (width & height) |
| `color` | `string` | `'currentColor'` | Icon color |
| `strokeWidth` | `string \| number` | `2` | Stroke width for outlined icons |
| `class` | `string` | `''` | CSS class names |
| `absoluteStrokeWidth` | `boolean` | `false` | Adjusts stroke width based on icon size |

Plus all standard SVG attributes (`on:click`, `style`, `aria-label`, etc.)

### Advanced Examples

#### Custom Size and Color

```svelte
<HeartFilled 
  size={48} 
  color="#e74c3c" 
  class="hover:scale-110 transition-transform"
/>
```

#### With Click Handler

```svelte
<script lang="ts">
  const handleClick = () => {
    console.log('Star clicked');
  };
</script>

<StarOutlined 
  size={24}
  on:click={handleClick}
  class="cursor-pointer"
/>
```

#### Accessible Icons

```svelte
<SearchOutlined 
  aria-label="Search"
  role="img"
  size={20}
/>
```

#### Dynamic Icons

```svelte
<script lang="ts">
  import { HeartFilled, StarFilled, UserFilled } from '@plusuidesign/iconiverse-svelte';
  
  export let iconName: 'heart' | 'star' | 'user';
  
  const iconMap = {
    heart: HeartFilled,
    star: StarFilled,
    user: UserFilled,
  };
  
  $: Icon = iconMap[iconName];
</script>

<svelte:component this={Icon} size={24} />
```

#### Reactive Props Example

```svelte
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  let liked = false;
  $: iconColor = liked ? '#e74c3c' : '#ccc';
  
  const toggleLike = () => {
    liked = !liked;
  };
</script>

<HeartFilled 
  size={32}
  color={iconColor}
  on:click={toggleLike}
  class="cursor-pointer transition-colors"
/>
```

#### Using with Stores

```svelte
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  import { writable } from 'svelte/store';
  
  const iconSize = writable(24);
  
  function increaseSize() {
    iconSize.update(n => n + 8);
  }
</script>

<button on:click={increaseSize}>
  <HeartFilled size={$iconSize} />
  Increase Size
</button>
```

## Icon Categories

Icons are organized into 43 categories:

- Animals, Arrows, Badges, Brand, Buildings
- Charts, Communication, Computers, Currencies, Database
- Design, Development, Devices, Document, E-commerce
- Electrical, Extensions, Food, Games, Gender
- Gestures, Health, Laundry, Letters, Logic
- Map, Math, Media, Misc, Mood
- Nature, Numbers, Photography, Shapes, Sport
- Symbols, System, Text, Vehicles, Version control
- Weather, Zodiac

## Icon Variants

Each icon comes in two variants:
- **Filled** - Solid, filled version (suffix: `Filled`)
- **Outlined** - Outlined version (suffix: `Outlined`)

Example:
```svelte
<script lang="ts">
  import { HeartFilled, HeartOutlined } from '@plusuidesign/iconiverse-svelte';
</script>
```

## Tree-Shaking

This package is optimized for tree-shaking. Only the icons you import will be included in your bundle:

```svelte
<!-- ✅ Good - Only HeartFilled is bundled -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<!-- ❌ Avoid - Imports everything -->
<script lang="ts">
  import * as Icons from '@plusuidesign/iconiverse-svelte';
</script>
```

## TypeScript

Full TypeScript support out of the box:

```svelte
<script lang="ts">
  import type { IconProps } from '@plusuidesign/iconiverse-svelte';
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  interface CustomIconProps extends IconProps {
    animated?: boolean;
  }
  
  export let size: CustomIconProps['size'] = 24;
  export let color: CustomIconProps['color'] = 'currentColor';
  export let animated: CustomIconProps['animated'] = false;
</script>

<div class:animated>
  <HeartFilled {size} {color} />
</div>
```

## SvelteKit

Works seamlessly with SvelteKit:

```svelte
<!-- routes/+page.svelte -->
<script lang="ts">
  import { StarFilled } from '@plusuidesign/iconiverse-svelte';
</script>

<div>
  <StarFilled size={32} />
</div>
```

### Server-Side Rendering

Icons work perfectly with SSR in SvelteKit. No special configuration needed!

```svelte
<!-- routes/+page.server.ts -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  export let data;
</script>

<HeartFilled size={24} />
```

## Performance Tips

1. **Import only what you need** - Leverage tree-shaking
2. **Use CSS classes** - Prefer `class` over inline styles
3. **Use reactive statements** - Optimize with `$:` for computed values
4. **Lazy load large sets** - Consider dynamic imports for icon pickers

```svelte
<script lang="ts">
  // Lazy loading example
  let IconComponent;
  
  async function loadIcon(name: string) {
    const module = await import('@plusuidesign/iconiverse-svelte');
    IconComponent = module[`${name}Filled`];
  }
  
  loadIcon('Heart');
</script>

{#if IconComponent}
  <svelte:component this={IconComponent} size={24} />
{/if}
```

## Svelte 5 Support

This package supports both Svelte 4 and Svelte 5:

```svelte
<!-- Svelte 5 Runes syntax -->
<script lang="ts">
  import { HeartFilled } from '@plusuidesign/iconiverse-svelte';
  
  let size = $state(24);
  let color = $state('currentColor');
  
  function increaseSize() {
    size += 8;
  }
</script>

<button onclick={increaseSize}>
  <HeartFilled {size} {color} />
  Increase
</button>
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Svelte 4.0+ or Svelte 5.0+

## Contributing

This is part of the Iconiverse icon library project. For issues, feature requests, or contributions, please visit our GitHub repository.

## License

MIT © PlusUI Design

## Related Packages

- `@plusuidesign/iconiverse-core` - Core icon data (for building other framework integrations)
- `@plusuidesign/iconiverse-react` - React icon components
- `@plusuidesign/iconiverse-vue` - Vue icon components

---

**Made with ❤️ by [Plus UI Design](https://www.plusuidesign.com/)**