icon-wc
SVG icons with Lucide integration, consistent sizing, and automatic accessibility.
Overview
The <icon-wc> component provides a simple way to use SVG icons from the Lucide library or custom icon sets. Icons inherit the current text color and can be sized using preset values.
<icon-wc name="home"></icon-wc><icon-wc name="settings"></icon-wc><icon-wc name="user"></icon-wc><icon-wc name="search"></icon-wc><icon-wc name="mail"></icon-wc>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
name |
string | - | Icon name (required). Matches filename without .svg extension. |
set |
string | "lucide" |
Icon set directory. Use "custom" for project-specific icons. |
size |
string | "md" |
Size preset: xs, sm, md, lg, xl, 2xl |
label |
string | - | Accessible label for functional icons. When set, icon is announced to screen readers. |
base-path |
string | "/.assets/icons" |
Override the default icon path. |
Sizes
Use the size attribute to control icon dimensions. Sizes are relative to the current font size.
<icon-wc name="star" size="xs"></icon-wc> <!-- 1em (16px at base) --><icon-wc name="star" size="sm"></icon-wc> <!-- 1.25em (20px) --><icon-wc name="star" size="md"></icon-wc> <!-- 1.5em (24px) --><icon-wc name="star" size="lg"></icon-wc> <!-- 2em (32px) --><icon-wc name="star" size="xl"></icon-wc> <!-- 2.5em (40px) --><icon-wc name="star" size="2xl"></icon-wc> <!-- 3em (48px) -->Size Reference
| Size | Dimensions |
|---|---|
xs |
1em (16px at base) |
sm |
1.25em (20px) |
md |
1.5em (24px) |
lg |
2em (32px) |
xl |
2.5em (40px) |
2xl |
3em (48px) |
Colors
Icons inherit currentColor from their parent element. Change the parent's color property to change the icon color.
<span style="color: var(--color-text);"> <icon-wc name="circle" size="lg"></icon-wc></span><span style="color: var(--color-interactive);"> <icon-wc name="circle" size="lg"></icon-wc></span><span style="color: var(--color-success);"> <icon-wc name="circle" size="lg"></icon-wc></span>With Buttons
Icons work naturally inside buttons. For icon-only buttons, always include an accessible label.
<!-- Icon with text label --><button type="button"> <icon-wc name="plus"></icon-wc> Add Item</button> <!-- Icon-only button (needs label for accessibility) --><button type="button" class="ghost" aria-label="Settings"> <icon-wc name="settings" label="Settings"></icon-wc></button>Lucide Integration
The component uses the Lucide icon library by default. Lucide provides over 1,900 beautifully crafted open-source icons.
Icon Categories
| Purpose | Icon Names |
|---|---|
| Navigation | menu, x, arrow-left, arrow-right |
| Actions | plus, minus, edit, trash, save |
| Status | check, x, alert-circle, info |
| Media | play, pause, volume-2, image |
| User | user, users, settings, log-out |
| Files | file, folder, download, upload |
| Social | share, heart, star, message-circle |
Custom Icons
Add custom icons to the .assets/icons/custom/ directory and reference them with set="custom".
<!-- Using a custom icon --><icon-wc name="logo" set="custom"></icon-wc> <!-- Custom icon requirements: - SVG format with viewBox attribute - No fixed width/height (component handles sizing) - Use currentColor for strokes/fills-->Accessibility
Decorative vs Functional Icons
Icons can be either decorative (hidden from screen readers) or functional (announced to screen readers).
| Context | Pattern |
|---|---|
| Icon + visible text | No label needed (decorative) |
| Icon-only button | Add label attribute |
| Status indicator | Add label describing status |
| Purely decorative | No label needed |
<!-- Decorative - icon is hidden from screen readers --><button> <icon-wc name="save"></icon-wc> Save Document</button> <!-- Functional - icon is announced to screen readers --><button aria-label="Close dialog"> <icon-wc name="x" label="Close"></icon-wc></button>Styling
Icons can be styled using CSS. The component uses Shadow DOM but allows color inheritance.
/* Change icon color */.danger icon-wc { color: var(--color-error);} /* Custom sizing via CSS */icon-wc.hero-icon { width: 4rem; height: 4rem;} /* Hover effects */button:hover icon-wc { color: var(--color-interactive-hover);}JavaScript API
The component exposes properties that mirror its attributes.
const icon = document.querySelector('icon-wc'); // Read-only propertiesconsole.log(icon.name); // "menu"console.log(icon.set); // "lucide"console.log(icon.size); // "md"console.log(icon.label); // null or "Close"console.log(icon.basePath); // "/.assets/icons"console.log(icon.iconPath); // "/.assets/icons/lucide/menu.svg" // Change icon dynamicallyicon.setAttribute('name', 'settings');icon.setAttribute('size', 'lg');