Iconography

Main library: Heroicons

We use Heroicons in SVG format wrapped in Blade components x-icon.*.

Creating a new icon (Storefront / Dashboard)

php artisan make:component Icon.chevron-up --view

1. Copy the SVG path into the generated file.
2. Keep the viewBox as 0 0 24 24.
3. Mark it as decorative by default:aria-hidden="true" and merge attributes:

<svg {{ $attributes->merge(['class' => 'tw-w-6 tw-h-6', 'aria-hidden' => 'true']) }}>
    <path d="..." />
</svg>

Usage:

<x-icon.chevron-up class="tw-text-violet-600" />

Icons in the Reader

Reader icons live in volpe/_shared_/images/icons and are rendered via <svg-icon icon="baseline-more_vert-24px" />.

Adding a new icon

1. Copy the SVG into the folder.
2. Ensure it has width="24" height="24" and fill="currentColor".

Migrating from <i class="ion-*">

• Replace each <i class="ion-chevron-right"> with <x-icon.chevron-right />.
• Do not strip styling; the new component inherits size via Tailwind classes.

Accessibility rules

• Decorative icons → aria-hidden="true".
• Functional icons → add a descriptive aria-label from the parent element.
• Ensure contrast: if the icon conveys state, pick colors that meet WCAG AA.

---

Last updated: 2025-07-14