Icon

A symbol from the Lucide sprite, inheriting currentColor.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<!-- Beside a label: decorative -->
<svg class="wsu-icon" aria-hidden="true"><use href="/assets/wayne-ui/icons.svg#wsu-calendar"/></svg>

<!-- Carrying meaning on its own: named -->
<svg class="wsu-icon" role="img" aria-labelledby="i-open"><title id="i-open">Open</title>
  <use href="/assets/wayne-ui/icons.svg#wsu-circle-check"/></svg>

<x-wsu::icon name="calendar" />

<x-wsu::icon name="circle-check" label="Open" />

<Icon name="calendar" />

<Icon name="circle-check" label="Open" />

<!-- The sprite URL is provided once, by the plugin -->
<!-- app.use(WayneUI, { sprite: '/assets/wayne-ui/icons.svg' }) -->

Why it works this way

One sprite of the icons actually in use, about 11 kB. 1.x shipped Font Awesome 4.7, six font files and roughly 1.2 MB, to draw a handful of glyphs.
Decorative by default: aria-hidden="true" and no name, because the icon sits next to a label that already says the same thing. Give it a label only when the icon is the whole control, and then it becomes role="img" with a title.
The search glass is mirrored in the sprite to match the official Wayne State icon. On a public page both are visible at once and two magnifiers facing opposite ways reads as a mistake.

Accessibility

aria-hidden by default, so an icon beside a label is not read twice (1.1.1).
With a label it becomes role="img" with a title element.
currentColor, so it meets whatever contrast its text meets.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
`name`	`required`	Lucide name without the wsu- prefix.
`label`	`null`	Set only when the icon is the whole meaning.

Vue

Prop	Type and default	What it does
`name`	`String, required`	Lucide name without the wsu- prefix.
`label`	`String, ''`	Set only when the icon is the whole meaning.

Icon ​