Icons
Vanduo includes Phosphor Icons — a flexible icon family with 1,500+ icons in 6 weights. Icons are bundled locally with no external dependencies.
Icon Weights
6 distinct weights for different visual styles:
Note: The default css/vanduo.css bundle (and css/icons/icons.css) load only the regular and fill weights. The bold, light, thin, and duotone weights above require css/icons/icons-all.css — this documentation site loads it to preview every weight. See Import Options below.
Quick Start
Include the icons stylesheet and use <i> elements with the appropriate classes:
<!-- Include default weights (regular + fill) -->
<link rel="stylesheet" href="css/icons/icons.css">
<!-- Use icons -->
<i class="ph ph-heart"></i>
<i class="ph-fill ph-star"></i>
<i class="ph ph-house"></i>Import Options
<!-- Default (regular + fill) - Recommended -->
<link rel="stylesheet" href="css/icons/icons.css">
<!-- All 6 weights (~3MB) -->
<link rel="stylesheet" href="css/icons/icons-all.css">
<!-- Individual weights -->
<link rel="stylesheet" href="icons/phosphor/bold/style.css">
<link rel="stylesheet" href="icons/phosphor/light/style.css">Example Icons
Styling Icons
Icons are font-based — style them with CSS:
<!-- Size with font-size -->
<i class="ph ph-heart" style="font-size: 48px;"></i>
<!-- Color with color -->
<i class="ph-fill ph-star" style="color: gold;"></i>
<!-- Use CSS variables -->
<i class="ph ph-check" style="color: var(--vd-color-success);"></i>Icons in Buttons
Icons by Phosphor Icons — MIT Licensed
Accessibility
Phosphor icons render as empty <i> elements (the glyph is a font), so they carry no text for assistive tech. Two rules cover every case:
aria-hidden="true"; the label already speaks for it. aria-label="…". <!-- Decorative: label is visible, hide the icon -->
<button class="vd-btn vd-btn-primary">
<i class="ph ph-download-simple" aria-hidden="true"></i> Download
</button>
<!-- Icon-only: give the control an accessible name -->
<button class="vd-btn" aria-label="Close dialog">
<i class="ph ph-x" aria-hidden="true"></i>
</button>Also mind touch targets: keep icon-only controls at least 24×24px (WCAG 2.2). More in Accessibility Essentials.
Usage
<script setup lang="ts">
import { VdIcon } from "@vanduo-oss/vd3";
</script>
<template>
<VdIcon name="rocket" />
<VdIcon name="heart" filled size="lg" />
</template>Component API (Vue 3)
| Prop | Description |
|---|---|
:name | Phosphor icon name without the ph- prefix (e.g. "rocket"). |
:filled | Use the filled icon weight. |
:size | sm | md | lg (default md). |