@esvigy/vue

@esvigy/vue

UI illustrations as simple, tree-shakable, and developer-friendly as icons.
The "Lucide for illustrations" — 100% vector, zero-JS micro-animations, two-tone theming, and Vue 3 / Nuxt 3 ready.

🎨 Open the Interactive Illustration Studio (esvigy.vercel.app)
Preview all 30+ illustrations live, test two-tone palettes, toggle animations, and copy Vue code with one click.

💡 Why @esvigy/vue?

In modern web development, adding an icon takes 5 seconds: you install Lucide or Heroicons, and write <Search class="w-5 h-5" />.

Why should UI illustrations be any different?

Traditionally, sourcing illustrations meant:

1. 📥 Downloading random raw SVGs from asset libraries or design files.
2. 🍝 Copy-pasting 300 lines of messy XML directly into your templates or bloating your public/ folder.
3. 🎨 Wrestling with hardcoded #6C63FF colors that break as soon as your app switches to dark mode.
4. 🐘 Installing 60KB+ runtime JavaScript animation libraries (Lottie) just for a gentle floating card or hovering shadow.
5. ⚠️ Fighting with unstandardized viewBox coordinates, clipping masks, and unpredictable responsiveness.

@esvigy/vue eliminates this entire friction cycle.

<script setup>
import { EmptyCart } from "@esvigy/vue";
</script>

<template>
  <!-- Just like an icon. One line. Perfectly styled. -->
  <EmptyCart animated class="w-48 h-48" />
</template>

⚖️ The Comparison

📦 Installation

Install with your favorite package manager:

# pnpm (recommended)
pnpm add @esvigy/vue

# npm
npm install @esvigy/vue

# yarn
yarn add @esvigy/vue

# bun
bun add @esvigy/vue

Peer Dependency: Vue ^3.3.0 or higher.

📋 Prefer copying single-file components? ("The shadcn Way")

If you prefer dropping self-contained .vue Single File Components directly into your project's components/esvigy/ folder instead of installing a package, use our official CLI:

# Interactive wizard
pnpm dlx @esvigy/cli add

# Add specific component directly into your components folder
pnpm dlx @esvigy/cli add ActionCreate --framework vue

🚀 Quickstart

Using an Esvigy illustration in Vue 3 is as intuitive as using an icon:

<script setup>
import { EmptyCart } from "@esvigy/vue";
</script>

<template>
  <main class="flex min-h-screen items-center justify-center p-6 bg-slate-950 text-white">
    <div class="text-center">
      <!-- 1. Sized with standard Tailwind or CSS -->
      <EmptyCart class="w-56 h-56 mx-auto mb-4" />

      <h2 class="text-xl font-bold">Your cart is empty</h2>
      <p class="text-slate-400 text-sm mt-1">Looks like you haven't added anything yet.</p>
    </div>
  </main>
</template>

🎯 Core Features & Design Philosophy

1. 🎨 The Two-Tone Theming Engine

Real-world UI illustrations require depth and hierarchy. A single flat color looks like an icon, while arbitrary multi-color SVGs clash with your design system.

Every Esvigy illustration features a calculated dual-layer color system:

• Primary Accent (color): Controls the hero focal points, badges, buttons, active elements, and status indicators.
  • Defaults to "currentColor". This means wrapping your illustration in any Tailwind text utility (text-indigo-600 dark:text-indigo-400) automatically colors the illustration to match your theme!
• Secondary Depth (secondaryColor): Controls backgrounds, device chassis, shadow discs, metallic backdrops, and secondary structural cards.
  • Defaults to "transparent", which gracefully preserves the illustration's built-in neutral slate tones unless overridden.

Example: Dark Mode & Brand Theming

<script setup>
import { Search } from "@esvigy/vue";
</script>

<template>
  <!-- 1. Automatically adapts to text color in light & dark mode -->
  <div class="text-sky-600 dark:text-sky-400">
    <Search class="w-40 h-40" />
  </div>

  <!-- 2. Custom brand palette: Amber hero + Deep slate chassis -->
  <Search
    color="#F59E0B"
    secondaryColor="#0F172A"
    animated
    class="w-64 h-64"
  />
</template>

2. ✨ Micro-Animations (Zero-JS Overhead)

Every Esvigy illustration comes with handcrafted CSS keyframe animations designed to bring life to empty states, error screens, and success modals.

Pass the animated prop to activate them:

<StatusSuccess animated class="w-32 h-32" />
<StatusProcessing animated class="w-32 h-32" />
<StatusOffline animated class="w-32 h-32" />

• GPU-Accelerated: Transforms and opacity are animated using compositor-only properties (transform-box: fill-box; transform-origin: center;).
• Zero Runtime Dependencies: No Framer Motion, no Lottie runtime engine, no canvas element.
• Accessibility by Default: Micro-animations automatically disable themselves when users enable @media (prefers-reduced-motion: reduce) on their operating systems.

📖 Component API & Props

All illustrations share the standardized EsvigyProps interface:

All standard SVG attributes (width, height, aria-label, role, @click, etc.) fall through automatically to the underlying <svg> element.

🎨 Available Illustrations (30 Included)

Explore and test all illustrations live on the Esvigy Illustration Studio.

📄 License

MIT © Nick Frost. See LICENSE for full details.