@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

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

Usage

Basic Usage

<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

<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

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

With Click Handler

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

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

Accessible Icons

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

Dynamic Icons

<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

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

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

<!-- ✅ 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:

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

<!-- 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:

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

<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