index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>icon.gl - Development</title>
        <link rel="icon" href="/doc/favicon.ico" />
        <!-- stylescape (dev-only, served from node_modules by vite.config.js) -->
        <link rel="stylesheet" href="/vendor/stylescape/stylescape.css" />
        <link rel="stylesheet" href="/dist/css/icon.gl.css" />
        <style>
            /* Icon grid cells: the only demo-specific styling stylescape has no equivalent for. */
            .icon-grid {
                grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
                contain: layout style;
            }
            .icon-cell {
                align-items: center;
                gap: var(--ss-spacing-2);
                padding: var(--ss-spacing-3) var(--ss-spacing-2);
                font: inherit;
                text-align: center;
                /* Critical for performance with many items */
                content-visibility: auto;
                contain-intrinsic-size: 6.25rem 5.625rem;
            }
            .icon-cell svg {
                width: var(--icon-size, 2rem);
                height: var(--icon-size, 2rem);
                fill: currentColor;
            }
        </style>
    </head>
    <body>
        <header class="ss-l-container ss-l-region ss-l-region-sm ss-u-text-center">
            <h1 class="ss-t-h1">icon.gl</h1>
            <p class="ss-t-lead ss-u-m-auto">Development Server</p>
            <div class="ss-c-stats ss-u-mt-4">
                <div class="ss-c-stat">
                    <div class="ss-c-stat__title">Icons</div>
                    <div class="ss-c-stat__value" id="total-icons">-</div>
                </div>
                <div class="ss-c-stat">
                    <div class="ss-c-stat__title">Categories</div>
                    <div class="ss-c-stat__value" id="total-categories">-</div>
                </div>
            </div>
        </header>

        <div class="ss-u-sticky ss-u-top-0 ss-u-z-sticky ss-a-surface ss-a-border-b ss-u-py-3" role="search">
            <div class="ss-l-container ss-c-toolbar ss-u-flex-wrap">
                <div class="ss-c-formfield">
                    <label class="ss-c-label" for="category">Category</label>
                    <select class="ss-c-select" id="category">
                        <option value="">All Categories</option>
                    </select>
                </div>
                <div class="ss-c-formfield">
                    <label class="ss-c-label" for="weight">Weight</label>
                    <select class="ss-c-select" id="weight">
                        <option value="normal" selected>Normal</option>
                        <option value="bold">Bold</option>
                    </select>
                </div>
                <div class="ss-c-formfield ss-u-flex-grow-1">
                    <label class="ss-c-label" for="search">Search</label>
                    <input class="ss-c-input" type="search" id="search" placeholder="Search icons..." />
                </div>
                <div class="ss-c-formfield">
                    <label class="ss-c-label" for="size">Size</label>
                    <select class="ss-c-select" id="size">
                        <option value="1.5rem">Small</option>
                        <option value="2rem" selected>Medium</option>
                        <option value="3rem">Large</option>
                        <option value="4rem">X-Large</option>
                    </select>
                </div>
            </div>
        </div>

        <main class="ss-l-container ss-l-region ss-l-region-sm">
            <p class="ss-t-small ss-u-text-center" id="status" role="status">Loading icons...</p>
            <div id="icon-container"></div>
        </main>

        <ul class="ss-c-toast-region" data-position="bottom-right" aria-live="polite">
            <li class="ss-c-toast ss-c-toast--success" id="toast" hidden>Copied!</li>
        </ul>

        <footer class="ss-l-container ss-l-region ss-l-region-sm ss-a-border-t ss-u-text-center">
            <p class="ss-t-small">
                icon.gl Development Server | <a href="/dist/svg/icongl.sprite.svg">SVG sprite</a> |
                <a href="/exa/font_demo.html">Font demo (every i_* class)</a> |
                <a href="/exa/index.html">Font gallery</a>
            </p>
        </footer>

        <script type="module">
            // Eagerly load ALL SVGs at build time using Vite's glob import
            const svgModules = import.meta.glob('/dist/svg/**/*.svg', {
                eager: true,
                query: '?raw',
                import: 'default',
            })

            // Create a map for fast lookup: name -> SVG content
            const svgMap = new Map()
            for (const [path, content] of Object.entries(svgModules)) {
                // Extract filename without extension
                // e.g., "/dist/svg/lucide/lucide_search.svg" -> "lucide_search"
                // e.g., "/dist/svg/arrows/arrow_up.svg" -> "arrow_up"
                const match = path.match(/\/([^/]+)\.svg$/)
                if (match) {
                    // Inlined SVGs share one document, so their <style> rules
                    // (".cls-1 { fill: #fff }" in one icon, "fill: none" in
                    // another) would clash. Scope the class names per icon.
                    svgMap.set(match[1], content.replace(/\bcls-/g, `${match[1]}__cls-`))
                }
            }

            console.log(`[icon.gl] Loaded ${svgMap.size} SVGs via import.meta.glob`)

            // Load metadata
            const [lucideMetadata, iconGlMetadata] = await Promise.all([
                fetch('/dist/json/lucide/index.json').then((r) => r.json()),
                fetch('/dist/json/icongl/index.json').then((r) => r.json()),
            ])

            const container = document.getElementById('icon-container')
            const searchInput = document.getElementById('search')
            const sizeSelect = document.getElementById('size')
            const categorySelect = document.getElementById('category')
            const weightSelect = document.getElementById('weight')
            const statusEl = document.getElementById('status')
            const toast = document.getElementById('toast')

            // Build icon list from metadata
            const allIcons = []

            // Add original icon.gl icons
            for (const [cat, icons] of Object.entries(iconGlMetadata.categories)) {
                for (const name of icons) {
                    allIcons.push({
                        name,
                        cleanName: name,
                        category: cat,
                        tags: [],
                        source: 'icongl',
                    })
                }
            }

            // Add Lucide icons (both weights)
            for (const [baseName, data] of Object.entries(lucideMetadata.icons)) {
                allIcons.push({
                    name: data.normal,
                    cleanName: baseName,
                    category: 'lucide',
                    tags: data.tags || [],
                    lucideCategories: data.categories || [],
                    source: 'lucide',
                    weight: 'normal',
                })
                allIcons.push({
                    name: data.bold,
                    cleanName: baseName,
                    category: 'lucide',
                    tags: data.tags || [],
                    lucideCategories: data.categories || [],
                    source: 'lucide',
                    weight: 'bold',
                })
            }

            // Group by category
            const iconsByCategory = {}
            allIcons.forEach((icon) => {
                if (!iconsByCategory[icon.category]) iconsByCategory[icon.category] = []
                iconsByCategory[icon.category].push(icon)
            })

            // Populate category dropdown
            const categories = Object.keys(iconsByCategory).sort()
            categories.forEach((cat) => {
                const opt = document.createElement('option')
                opt.value = cat
                const uniqueCount = iconsByCategory[cat].filter((i) => i.weight !== 'bold').length
                opt.textContent = `${cat} (${uniqueCount})`
                categorySelect.appendChild(opt)
            })

            // Update stats
            const uniqueIconCount = allIcons.filter((i) => i.weight !== 'bold').length
            document.getElementById('total-icons').textContent = uniqueIconCount.toLocaleString()
            document.getElementById('total-categories').textContent = categories.length

            let toastTimeout

            // Render icons - all at once, browser handles visibility optimization
            function renderIcons(filter = '') {
                const size = sizeSelect.value
                const selectedCategory = categorySelect.value
                const selectedWeight = weightSelect.value
                document.documentElement.style.setProperty('--icon-size', size)

                // Filter icons
                const filteredIcons = allIcons.filter((icon) => {
                    if (selectedCategory && icon.category !== selectedCategory) return false
                    if (icon.source === 'lucide' && icon.weight !== selectedWeight) return false
                    if (filter) {
                        const searchLower = filter.toLowerCase()
                        const matchesName = icon.cleanName.toLowerCase().includes(searchLower)
                        const matchesTags = icon.tags.some((t) =>
                            t.toLowerCase().includes(searchLower),
                        )
                        if (!matchesName && !matchesTags) return false
                    }
                    return true
                })

                statusEl.textContent = `Showing ${filteredIcons.length.toLocaleString()} icons`

                // Use DocumentFragment for efficient DOM insertion
                const fragment = document.createDocumentFragment()
                const grid = document.createElement('div')
                grid.className = 'ss-l-grid ss-l-grid-gap-sm icon-grid'

                for (const icon of filteredIcons) {
                    const svg =
                        svgMap.get(icon.name) ||
                        '<svg viewBox="0 0 864 864"><text x="432" y="432" text-anchor="middle" fill="#666">?</text></svg>'

                    const item = document.createElement('button')
                    item.type = 'button'
                    item.className = 'ss-c-card ss-c-card--interactive icon-cell'
                    item.title = icon.name
                    item.innerHTML = `
                    ${svg}
                    <span class="ss-t-caption ss-u-break-all">${icon.cleanName}</span>
                `
                    item.onclick = () => {
                        navigator.clipboard.writeText(icon.name)
                        toast.hidden = false
                        clearTimeout(toastTimeout)
                        toastTimeout = setTimeout(() => (toast.hidden = true), 1500)
                    }
                    grid.appendChild(item)
                }

                fragment.appendChild(grid)
                container.innerHTML = ''
                container.appendChild(fragment)
            }

            // Debounce search for performance
            let searchTimeout
            searchInput.addEventListener('input', (e) => {
                clearTimeout(searchTimeout)
                searchTimeout = setTimeout(() => renderIcons(e.target.value), 150)
            })

            sizeSelect.addEventListener('change', () => renderIcons(searchInput.value))
            categorySelect.addEventListener('change', () => renderIcons(searchInput.value))
            weightSelect.addEventListener('change', () => renderIcons(searchInput.value))

            // Initial render
            renderIcons()
        </script>
    </body>
</html>