Edvoy Icons

A comprehensive icon library with 4,317+ icons exported as Vue 3 components, optimized for tree-shaking.

Installation

npm install edvoy-icons

Usage

Style-Based Imports (Recommended)

Import icons by style for better organization and performance:

// Stroke icons (952 icons)
import {
  UserDefaultStroke,
  AwardMedalStroke,
  ChatDefaultStroke,
} from 'edvoy-icons/stroke'

// Solid icons (813 icons)
import {
  UserDefaultSolid,
  AwardMedalSolid,
} from 'edvoy-icons/solid'

// Contrast icons (819 icons)
import { UserDefaultContrast } from 'edvoy-icons/contrast'

// DuoStroke icons (913 icons)
import { UserDefaultDuoStroke } from 'edvoy-icons/duo-stroke'

// DuoSolid icons (789 icons)
import { UserDefaultDuoSolid } from 'edvoy-icons/duo-solid'

Direct Imports (Maximum Performance)

For the smallest bundle size, import individual files:

import UserDefaultStroke from 'edvoy-icons/UserDefaultStroke'
import AwardMedalSolid from 'edvoy-icons/AwardMedalSolid'

In Vue Components

<template>
  <div>
    <UserDefaultStroke class="w-6 h-6 text-blue-500" />
    <AwardMedalSolid class="w-6 h-6 text-gray-700" />
  </div>
</template>

<script setup>
import { UserDefaultStroke } from 'edvoy-icons/stroke'
import { AwardMedalSolid } from 'edvoy-icons/solid'
</script>

Icon Naming Convention

Icons are organized by style and named using PascalCase:

• Stroke: UserDefaultStroke, AwardMedalStroke
• Solid: UserDefaultSolid, AwardMedalSolid
• Contrast: UserDefaultContrast, AwardMedalContrast
• DuoStroke: UserDefaultDuoStroke, AwardMedalDuoStroke
• DuoSolid: UserDefaultDuoSolid, AwardMedalDuoSolid

Numeric icons have the "Icon" prefix: Icon01Stroke, Icon01Solid

Customization

All icons use currentColor for fills and strokes, making them easy to style:

<UserDefaultStroke
  class="w-8 h-8 text-red-500 hover:text-red-700"
/>

Or with inline styles:

<UserDefaultStroke
  style="width: 32px; height: 32px; color: #3b82f6;"
/>

Tree-Shaking

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

✅ Good - Tree-shakeable

// Loads only stroke icons index (~952 icons)
import { UserDefaultStroke, AwardMedalStroke } from 'edvoy-icons/stroke'

// Loads only one file
import UserDefaultStroke from 'edvoy-icons/UserDefaultStroke'

❌ Bad - Imports everything

// Loads all 4300+ icons
import * as Icons from 'edvoy-icons'

Nuxt 3 Configuration

Remove any components config that scans the entire package:

// ❌ Remove this from nuxt.config.ts
components: [
  {
    path: 'node_modules/edvoy-icons/dist',
    pattern: '**/*.vue',
  }
]

Instead, use direct or style-based imports in your components.

Development

Fetching Icons from Figma

# Fetch all icons
node fetch-icons.js

# Fetch only new icons
node fetch-icons.js --new-only

Building the Package

node build.js

This will:

1. Optimize all SVGs in icons/svg/
2. Generate Vue components in dist/
3. Create dist/index.js with all exports

Icon Playground

A visual playground is available in the playground/ directory:

cd playground
npm install
npm run dev

Features:

• Browse all 4,317+ icons
• Search by name
• Filter by style (Solid, Stroke, DuoSolid, DuoStroke, Contrast)
• Copy component usage to clipboard

License

ISC