npm package: @plusuidesign/iconiverse-vue
Description: Vue components for Iconiverse icon library
Latest version: 0.1.3

# @plusuidesign/iconiverse-vue

A comprehensive Vue icon library with **5,944+ icons** featuring both filled and outlined variants. Built for modern Vue 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 Vue 3  
🌐 **SSR Compatible** - Works with Nuxt.js and other Vue SSR solutions  
♿ **Accessible** - Built-in accessibility features  

## Installation

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

## Usage

### Basic Usage

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

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

### With Tailwind CSS

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

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

### 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 (`@click`, `style`, `aria-label`, etc.)

### Advanced Examples

#### Custom Size and Color

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

#### With Click Handler

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

<template>
  <StarOutlined 
    :size="24"
    @click="handleClick"
    class="cursor-pointer"
  />
</template>
```

#### Accessible Icons

```vue
<template>
  <SearchOutlined 
    aria-label="Search"
    role="img"
    :size="20"
  />
</template>
```

#### Dynamic Icons

```vue
<script setup lang="ts">
import { HeartFilled, StarFilled, UserFilled } from '@plusuidesign/iconiverse-vue';
import { computed } from 'vue';

const props = defineProps<{
  name: 'heart' | 'star' | 'user';
}>();

const iconMap = {
  heart: HeartFilled,
  star: StarFilled,
  user: UserFilled,
};

const Icon = computed(() => iconMap[props.name]);
</script>

<template>
  <component :is="Icon" :size="24" />
</template>
```

#### Composition API Example

```vue
<script setup lang="ts">
import { HeartFilled } from '@plusuidesign/iconiverse-vue';
import { ref } from 'vue';

const liked = ref(false);
const iconColor = computed(() => liked.value ? '#e74c3c' : '#ccc');

const toggleLike = () => {
  liked.value = !liked.value;
};
</script>

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

## 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:
```vue
<script setup lang="ts">
import { HeartFilled, HeartOutlined } from '@plusuidesign/iconiverse-vue';
</script>
```

## Tree-Shaking

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

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

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

## TypeScript

Full TypeScript support out of the box:

```vue
<script setup lang="ts">
import type { IconProps } from '@plusuidesign/iconiverse-vue';
import { HeartFilled } from '@plusuidesign/iconiverse-vue';

interface CustomIconProps extends IconProps {
  animated?: boolean;
}

defineProps<CustomIconProps>();
</script>

<template>
  <HeartFilled v-bind="$props" />
</template>
```

## Nuxt.js

Works seamlessly with Nuxt 3:

```vue
<!-- pages/index.vue -->
<script setup lang="ts">
import { StarFilled } from '@plusuidesign/iconiverse-vue';
</script>

<template>
  <div>
    <StarFilled :size="32" />
  </div>
</template>
```

### Auto-Import (Optional)

Add to your `nuxt.config.ts` for auto-imports:

```ts
export default defineNuxtConfig({
  imports: {
    dirs: ['~/node_modules/@plusuidesign/iconiverse-vue']
  }
})
```

## Performance Tips

1. **Import only what you need** - Leverage tree-shaking
2. **Use CSS classes** - Prefer `class` over inline styles
3. **Use v-once for static icons** - Optimize rendering for icons that don't change
4. **Lazy load large sets** - Consider dynamic imports for icon pickers

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

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Vue 3.3+ required

## 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-svelte` - Svelte icon components

---

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