@vuecs/icon

@vuecs/icon

<VCIcon> — the icon runtime of vuecs. A thin, vuecs-namespaced wrapper around @iconify/vue's <Icon> that renders any of 200,000+ Iconify icons from a single string prop.

✨ What's inside

• 🪶 One prop, every icon set — name="lucide:plus", name="fa6-solid:user", name="mdi:home"; all other attrs forward to the underlying SVG.
• 🔌 Powers vuecs's semantic icon slots — components like <VCPagination> and <VCButton> take Iconify-name props and render them through <VCIcon>; icon presets fill those slots app-wide.
• 📦 No bundled icon data — you choose the delivery mechanism: @nuxt/icon (Nuxt), addCollection() from an @iconify-json/* package (Vite/SPA), or Iconify's runtime CDN as the zero-config fallback.

📦 Installation

npm install @vuecs/icon

⚡ Usage

<VCIcon name="lucide:chevron-left" />
<VCIcon name="fa6-solid:rocket" class="text-xl" />

// Vite / SPA — bundle a collection offline (no CDN requests)
import { addCollection } from '@iconify/vue';
import { icons as lucide } from '@iconify-json/lucide';

addCollection(lucide);

📚 Documentation

Full reference + delivery recipes (Nuxt, Vite SSR, Vite SPA): vuecs.dev/components/icon · Icon setup guide

License

Made with 💚

Published under Apache 2.0 License.