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 properties console.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 dynamically icon.setAttribute('name', 'settings'); icon.setAttribute('size', 'lg');