Source code
src/showcase/pages/components/icons.html
This file is included in this documentation build. It is displayed as code and is not executed.
<!--
Browse complete local icon collections and preview accessible usage in shared controls.
@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentIcons" class="component-library icon-gallery">
<include src="partials/components/page-header.html" locals='{"title":"componentIcons"}'></include>
<p class="text-muted" x-text="$t('galleryIconsIntro')"></p>
<div class="icon-workbench">
<article class="card icon-browser">
<header class="card-header">
<h2 x-text="$t('galleryIconsBrowse')"></h2>
<span class="badge" x-text="entries.length"></span>
</header>
<div class="card-body">
<div class="icon-filters">
<div>
<label class="form-label" for="icon-family" x-text="$t('galleryIconsFamily')"></label>
<select id="icon-family" class="form-select" x-model="source" @change="changeSource">
<option value="" x-text="$t('galleryIconsAll')"></option>
<template x-for="family in sources" :key="family.name">
<option :value="family.name" x-text="family.label"></option>
</template>
</select>
</div>
<div>
<label class="form-label" for="icon-style" x-text="$t('galleryIconsStyle')"></label>
<select id="icon-style" class="form-select" x-model="prefix" @change="filter">
<option value="" x-text="$t('galleryIconsAllStyles')"></option>
<template x-for="style in prefixes" :key="style">
<option :value="style" x-text="style"></option>
</template>
</select>
</div>
<div class="icon-search">
<label class="form-label" for="icon-search" x-text="$t('galleryIconsSearch')"></label>
<input
id="icon-search"
class="form-control"
type="search"
x-model="query"
@input="filter"
/>
</div>
</div>
<p class="form-text" role="status" aria-live="polite">
<span x-text="matches.length"></span>
<span x-text="$t('galleryIconsResults')"></span>
</p>
<div class="icon-results">
<template x-for="entry in visible" :key="entry.id">
<button
type="button"
class="icon-tile"
:aria-pressed="selected.id === entry.id"
@click="select(entry)"
>
<span :class="entry.classes" aria-hidden="true"></span>
<span class="icon-tile-name" x-text="entry.name"></span>
<span class="icon-tile-prefix" x-text="entry.prefix"></span>
</button>
</template>
</div>
<p
class="text-muted py-4"
x-show="matches.length === 0"
x-text="$t('galleryIconsEmpty')"
></p>
<nav class="icon-pagination" :aria-label="$t('galleryIconsPagination')">
<button
type="button"
class="btn btn-secondary btn-sm"
:disabled="page === 1"
@click="paginate(-1)"
x-text="$t('previous')"
></button>
<span>
<span x-text="page"></span>
/
<span x-text="pages"></span>
</span>
<button
type="button"
class="btn btn-secondary btn-sm"
:disabled="page === pages"
@click="paginate(1)"
x-text="$t('next')"
></button>
</nav>
</div>
</article>
<article class="card icon-details">
<header class="card-header"><h2 x-text="$t('galleryIconsPreview')"></h2></header>
<div class="card-body">
<div class="icon-stage" :style="previewStyle"><span x-icon="previewIcon"></span></div>
<h3 class="h6" x-text="selected.id"></h3>
<p class="text-muted" x-text="selected.label"></p>
<div class="icon-filters mb-3">
<div>
<label class="form-label" for="icon-size" x-text="$t('galleryIconsSize')"></label>
<select id="icon-size" class="form-select" x-model="size">
<option value="16">16 px</option>
<option value="24">24 px</option>
<option value="32">32 px</option>
<option value="48">48 px</option>
<option value="64">64 px</option>
</select>
</div>
<div>
<label class="form-label" for="icon-tone" x-text="$t('galleryIconsColor')"></label>
<select id="icon-tone" class="form-select" x-model="tone">
<option value="accent" x-text="$t('galleryIconsAccent')"></option>
<option value="text" x-text="$t('galleryIconsText')"></option>
</select>
</div>
</div>
<h3 class="h6" x-text="$t('galleryIconsClasses')"></h3>
<pre class="icon-snippet"><code x-text="selected.classes"></code></pre>
<button
type="button"
class="btn btn-secondary btn-sm mb-3"
@click="copy(selected.classes)"
x-text="$t('galleryIconsCopyClasses')"
></button>
<h3 class="h6">HTML</h3>
<pre class="icon-snippet"><code x-text="markup"></code></pre>
<button
type="button"
class="btn btn-secondary btn-sm mb-3"
@click="copy(markup)"
x-text="$t('galleryIconsCopyHtml')"
></button>
<h3 class="h6">Alpine · x-icon</h3>
<pre class="icon-snippet"><code x-text="directive"></code></pre>
<button
type="button"
class="btn btn-secondary btn-sm"
@click="copy(directive)"
x-text="$t('galleryIconsCopyAlpine')"
></button>
<p
class="form-text mt-2"
role="status"
aria-live="polite"
x-text="feedback ? $t(feedback) : ''"
></p>
</div>
</article>
</div>
<div class="catalog-grid mt-4">
<article class="card">
<header class="card-header"><h2 x-text="$t('galleryIconsControls')"></h2></header>
<div class="card-body">
<div class="demo-row">
<button type="button" class="btn btn-primary" @click="copy(selected.classes)">
<span x-icon="previewIcon"></span>
<span x-text="$t('galleryIconsCopyClasses')"></span>
</button>
<button
type="button"
class="btn btn-secondary icon-button"
:aria-label="$t('galleryIconsCopyClasses')"
@click="copy(selected.classes)"
>
<span x-icon="previewIcon"></span>
</button>
<span class="badge">
<span x-icon="previewIcon"></span>
<span x-text="selected.name"></span>
</span>
</div>
<p class="form-text mt-3" x-text="$t('galleryIconsAccessibility')"></p>
</div>
</article>
<article class="card">
<header class="card-header"><h2 x-text="$t('galleryIconsSetup')"></h2></header>
<div class="card-body">
<p x-text="$t('galleryIconsSetupHelp')"></p>
<pre class="icon-snippet"><code>import 'virtual:atrium/icons/boxicons.css';
import 'virtual:atrium/icons/font-awesome7.css';
import 'virtual:atrium/icons/lucide.css';</code></pre>
<p class="form-text" x-text="$t('galleryIconsLicenses')"></p>
</div>
</article>
<article class="card full">
<header class="card-header"><h2 x-text="$t('galleryIconsBuiltins')"></h2></header>
<div class="card-body">
<p class="form-text" x-text="$t('galleryIconsBuiltinsHelp')"></p>
<div class="catalog-icons">
<template x-for="icon in builtins" :key="icon">
<div>
<span x-icon="icon"></span>
<code x-text="icon"></code>
</div>
</template>
</div>
</div>
</article>
</div>
</section>