[FEAT]: Improve preview in REPL

[bbtgnn]

Description

First of all, thanks for your work! It's super useful :)

One of the issues I encounter is with the REPL. It's always hard to find an icon and the matching name. Imo, it would be super useful if the icon name is displayed alongside the icon.

I suggest you this solution:

<script>
    import * as Icons from 'svelte-heros-v2';
    const random_hex_color_code = () => {
        let n = (Math.random() * 0xfffff * 1000000).toString(16);
        return '#' + n.slice(0, 6);
    };
</script>

<div class="container">
    {#each Object.entries(Icons) as [name, component]}
        <div class="icon">
            <svelte:component this={component} color={random_hex_color_code()} />
            {name}
        </div>
    {/each}
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .icon {
        display: flex;
        gap: 4px;
        align-items: center;
    }
</style>

Additional Information

No response

[shinokada]

Thanks. Where is the best place for the link to REPL?

I will add the link to here and docs.

[shinokada]

I add it to this page.

[bbtgnn]

Cool! Thank you so much for using it! :D