Icons

LesliAssets packages framework icons as SVG symbol sprites. A sprite keeps repeated icons lightweight and lets application markup reference each symbol by its stable identifier.

Icon groups

The main Lesli layout already renders the engines sprite. Render another sprite once near the application root before using symbols from that group:

<div class="hidden" aria-hidden="true">
    <%= render("lesli_assets/partials/application-lesli-icons-social") %>
</div>

Reference a symbol with an SVG use element:

<svg class="size-6" role="img" aria-label="Calendar">
    <use href="#engine-calendar"></use>
</svg>

For a decorative icon, hide it from assistive technology and keep the visible label outside the SVG:

<button class="inline-flex items-center gap-2">
    <svg class="size-5" aria-hidden="true">
        <use href="#engine-calendar"></use>
    </svg>
    Calendar
</button>

Adding icons

Add the source SVG to the appropriate folder under app/assets/icons/lesli_assets, then rebuild the sprites:

make build.icons

The build optimizes the source files and regenerates the ERB sprite partials in app/views/lesli_assets/partials. Treat those generated partials as build output rather than editing them directly.