<template>
    <div>
        <div class="space-y-8">
            <div class="panel flex items-center overflow-x-auto whitespace-nowrap p-3 text-primary lg:col-span-2">
                <div class="rounded-full bg-primary p-1.5 text-white ring-2 ring-primary/30 ltr:mr-3 rtl:ml-3">
                    <icon-bell />
                </div>
                <span class="ltr:mr-3 rtl:ml-3">Documentation: </span>
                <a
                    href="https://www.figma.com/file/agsPUbJSO4OcokUIxJRZvw/Solar-Icon-Set-(Community)?node-id=0%3A1&t=Xr5s4CqZbVgAQU9X-0"
                    target="_blank"
                    class="block hover:underline"
                    >https://www.figma.com/file/agsPUbJSO4OcokUIxJRZvw/Solar-Icon-Set-(Community)?node-id=0%3A1&t=Xr5s4CqZbVgAQU9X-0</a
                >
            </div>
            <div class="panel">
                <h5 class="font-semibold text-lg dark:text-white-light mb-5">Solar Icon</h5>
                <div class="mb-5">
                    <p class="mb-5">
                        Solar is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity,
                        consistency and usability.
                    </p>
                    <div class="bg-[#009688]/[.26] text-[#009688] py-1 px-2 rounded inline-block text-base mb-5">Line Duotone</div>
                    <div class="flex items-center flex-wrap gap-10 mb-5">
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-airplay class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-archive class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-arrow-backward class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-arrow-forward class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-arrow-left class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-at class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-award class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-bar-chart class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-bell class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-bell-bing class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-bolt class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-book class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-bookmark class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-box class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-calendar class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-camera class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-caret-down class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-carets-down class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-cash-banknotes class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-chart-square class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-chat-dot class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-chat-dots class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-chat-notification class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-checks class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-chrome class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-circle-check class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-clipboard-text class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-clock class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-cloud-download class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-code class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-coffee class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-copy class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-cpu-bolt class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-credit-card class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-desktop class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-dollar-sign class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-dollar-sign-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-download class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-dribbble class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-droplet class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-edit class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-info-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-eye class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-facebook class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-file class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-folder class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-folder-minus class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-folder-plus class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-gallery class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-github class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-globe class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-heart class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-help-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-home class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-horizontal-dots class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-inbox class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-info-hexagon class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-info-triangle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-instagram class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-laptop class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-layout class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-layout-grid class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-link class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-linkedin class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-list-check class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-loader class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-lock class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-lock-dots class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-login class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-logout class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-mail class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-mail-dot class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-map-pin class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-message class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-message-2 class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-message-dots class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-messages-dot class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-microphone-off class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-minus class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-minus-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-mood-smile class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-moon class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-multiple-forward-right class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-notes class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-notes-edit class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-open-book class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-paperclip class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-pencil class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-pencil-paper class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-phone class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-phone-call class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-play-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-plus class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-plus-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-printer class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-refresh class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-restore class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-router class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-safari class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-save class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-search class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-send class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-server class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-settings class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-share class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-shopping-bag class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-shopping-cart class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-square-check class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-square-rotated class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-star class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-sun class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-tag class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-thumb-up class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-trash class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-trash-lines class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-trending-up class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-twitter class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-user class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-user-plus class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-users class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-users-group class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-video class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-wheel class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-x class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-x-circle class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-zip-file class="w-6 h-6" />
                        </div>
                    </div>
                    <div class="bg-[#009688]/[.26] text-[#009688] py-1 px-2 rounded inline-block text-base mb-5">Bold Duotone</div>
                    <div class="flex items-center flex-wrap gap-10 mb-5">
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-apps class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-authentication class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-calendar class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-charts class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-chat class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-components class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-contacts class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-dashboard class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-datatables class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-documentation class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-drag-and-drop class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-elements class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-font-icons class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-forms class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-invoice class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-mailbox class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-more class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-notes class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-pages class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-scrumboard class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-tables class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-todo class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-users class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-menu-widgets class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-airplay :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-box :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-desktop :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-dollar-sign-circle :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-info-circle :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-layout :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-lock-dots :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-mail :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-message-dots :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-minus-circle :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-pencil :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-phone-call :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-play-circle :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-router :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-twitter :fill="true" class="w-6 h-6" />
                        </div>
                        <div class="grid place-content-center w-14 h-14 border border-white-dark/20 dark:border-[#191e3a] rounded-md">
                            <icon-user :fill="true" class="w-6 h-6" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { useMeta } from '@/composables/use-meta';

    import IconBell from '@/components/icon/icon-bell.vue';
    import IconAirplay from '@/components/icon/icon-airplay.vue';
    import IconArchive from '@/components/icon/icon-archive.vue';
    import IconArrowBackward from '@/components/icon/icon-arrow-backward.vue';
    import IconArrowForward from '@/components/icon/icon-arrow-forward.vue';
    import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
    import IconAt from '@/components/icon/icon-at.vue';
    import IconAward from '@/components/icon/icon-award.vue';
    import IconBarChart from '@/components/icon/icon-bar-chart.vue';
    import IconBolt from '@/components/icon/icon-bolt.vue';
    import IconBellBing from '@/components/icon/icon-bell-bing.vue';
    import IconBook from '@/components/icon/icon-book.vue';
    import IconBookmark from '@/components/icon/icon-bookmark.vue';
    import IconBox from '@/components/icon/icon-box.vue';
    import IconCalendar from '@/components/icon/icon-calendar.vue';
    import IconCamera from '@/components/icon/icon-camera.vue';
    import IconCaretDown from '@/components/icon/icon-caret-down.vue';
    import IconCashBanknotes from '@/components/icon/icon-cash-banknotes.vue';
    import IconChartSquare from '@/components/icon/icon-chart-square.vue';
    import IconChatDot from '@/components/icon/icon-chat-dot.vue';
    import IconChatDots from '@/components/icon/icon-chat-dots.vue';
    import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
    import IconChecks from '@/components/icon/icon-checks.vue';
    import IconChrome from '@/components/icon/icon-chrome.vue';
    import IconCircleCheck from '@/components/icon/icon-circle-check.vue';
    import IconClipboardText from '@/components/icon/icon-clipboard-text.vue';
    import IconClock from '@/components/icon/icon-clock.vue';
    import IconCloudDownload from '@/components/icon/icon-cloud-download.vue';
    import IconCode from '@/components/icon/icon-code.vue';
    import IconCoffee from '@/components/icon/icon-coffee.vue';
    import IconCopy from '@/components/icon/icon-copy.vue';
    import IconCpuBolt from '@/components/icon/icon-cpu-bolt.vue';
    import IconCreditCard from '@/components/icon/icon-credit-card.vue';
    import IconDesktop from '@/components/icon/icon-desktop.vue';
    import IconDollarSign from '@/components/icon/icon-dollar-sign.vue';
    import IconDollarSignCircle from '@/components/icon/icon-dollar-sign-circle.vue';
    import IconDownload from '@/components/icon/icon-download.vue';
    import IconDribbble from '@/components/icon/icon-dribbble.vue';
    import IconDroplet from '@/components/icon/icon-droplet.vue';
    import IconEdit from '@/components/icon/icon-edit.vue';
    import IconInfoCircle from '@/components/icon/icon-info-circle.vue';
    import IconEye from '@/components/icon/icon-eye.vue';
    import IconFacebook from '@/components/icon/icon-facebook.vue';
    import IconFile from '@/components/icon/icon-file.vue';
    import IconFolder from '@/components/icon/icon-folder.vue';
    import IconFolderMinus from '@/components/icon/icon-folder-minus.vue';
    import IconFolderPlus from '@/components/icon/icon-folder-plus.vue';
    import IconGallery from '@/components/icon/icon-gallery.vue';
    import IconGithub from '@/components/icon/icon-github.vue';
    import IconGlobe from '@/components/icon/icon-globe.vue';
    import IconHeart from '@/components/icon/icon-heart.vue';
    import IconHelpCircle from '@/components/icon/icon-help-circle.vue';
    import IconHome from '@/components/icon/icon-home.vue';
    import IconHorizontalDots from '@/components/icon/icon-horizontal-dots.vue';
    import IconInbox from '@/components/icon/icon-inbox.vue';
    import IconInfoHexagon from '@/components/icon/icon-info-hexagon.vue';
    import IconInfoTriangle from '@/components/icon/icon-info-triangle.vue';
    import IconInstagram from '@/components/icon/icon-instagram.vue';
    import IconLaptop from '@/components/icon/icon-laptop.vue';
    import IconLayout from '@/components/icon/icon-layout.vue';
    import IconLayoutGrid from '@/components/icon/icon-layout-grid.vue';
    import IconLink from '@/components/icon/icon-link.vue';
    import IconLinkedin from '@/components/icon/icon-linkedin.vue';
    import IconListCheck from '@/components/icon/icon-list-check.vue';
    import IconLoader from '@/components/icon/icon-loader.vue';
    import IconLock from '@/components/icon/icon-lock.vue';
    import IconLockDots from '@/components/icon/icon-lock-dots.vue';
    import IconLogin from '@/components/icon/icon-login.vue';
    import IconLogout from '@/components/icon/icon-logout.vue';
    import IconMail from '@/components/icon/icon-mail.vue';
    import IconMailDot from '@/components/icon/icon-mail-dot.vue';
    import IconMapPin from '@/components/icon/icon-map-pin.vue';
    import IconMenu from '@/components/icon/icon-menu.vue';
    import IconMessage from '@/components/icon/icon-message.vue';
    import IconMessage2 from '@/components/icon/icon-message-2.vue';
    import IconMessageDots from '@/components/icon/icon-message-dots.vue';
    import IconMessagesDot from '@/components/icon/icon-messages-dot.vue';
    import IconMicrophoneOff from '@/components/icon/icon-microphone-off.vue';
    import IconMinus from '@/components/icon/icon-minus.vue';
    import IconMinusCircle from '@/components/icon/icon-minus-circle.vue';
    import IconMoodSmile from '@/components/icon/icon-mood-smile.vue';
    import IconMoon from '@/components/icon/icon-moon.vue';
    import IconMultipleForwardRight from '@/components/icon/icon-multiple-forward-right.vue';
    import IconNotes from '@/components/icon/icon-notes.vue';
    import IconNotesEdit from '@/components/icon/icon-notes-edit.vue';
    import IconOpenBook from '@/components/icon/icon-open-book.vue';
    import IconPaperclip from '@/components/icon/icon-paperclip.vue';
    import IconPencil from '@/components/icon/icon-pencil.vue';
    import IconPencilPaper from '@/components/icon/icon-pencil-paper.vue';
    import IconPhone from '@/components/icon/icon-phone.vue';
    import IconPhoneCall from '@/components/icon/icon-phone-call.vue';
    import IconPlayCircle from '@/components/icon/icon-play-circle.vue';
    import IconPlus from '@/components/icon/icon-plus.vue';
    import IconPlusCircle from '@/components/icon/icon-plus-circle.vue';
    import IconPrinter from '@/components/icon/icon-printer.vue';
    import IconRefresh from '@/components/icon/icon-refresh.vue';
    import IconRestore from '@/components/icon/icon-restore.vue';
    import IconRouter from '@/components/icon/icon-router.vue';
    import IconSafari from '@/components/icon/icon-safari.vue';
    import IconSave from '@/components/icon/icon-save.vue';
    import IconSearch from '@/components/icon/icon-search.vue';
    import IconSend from '@/components/icon/icon-send.vue';
    import IconServer from '@/components/icon/icon-server.vue';
    import IconSettings from '@/components/icon/icon-settings.vue';
    import IconShare from '@/components/icon/icon-share.vue';
    import IconShoppingBag from '@/components/icon/icon-shopping-bag.vue';
    import IconShoppingCart from '@/components/icon/icon-shopping-cart.vue';
    import IconSquareCheck from '@/components/icon/icon-square-check.vue';
    import IconSquareRotated from '@/components/icon/icon-square-rotated.vue';
    import IconStar from '@/components/icon/icon-star.vue';
    import IconSun from '@/components/icon/icon-sun.vue';
    import IconTag from '@/components/icon/icon-tag.vue';
    import IconThumbUp from '@/components/icon/icon-thumb-up.vue';
    import IconTrash from '@/components/icon/icon-trash.vue';
    import IconTrashLines from '@/components/icon/icon-trash-lines.vue';
    import IconTrendingUp from '@/components/icon/icon-trending-up.vue';
    import IconTwitter from '@/components/icon/icon-twitter.vue';
    import IconUser from '@/components/icon/icon-user.vue';
    import IconUserPlus from '@/components/icon/icon-user-plus.vue';
    import IconUsers from '@/components/icon/icon-users.vue';
    import IconUsersGroup from '@/components/icon/icon-users-group.vue';
    import IconVideo from '@/components/icon/icon-video.vue';
    import IconWheel from '@/components/icon/icon-wheel.vue';
    import IconX from '@/components/icon/icon-x.vue';
    import IconZipFile from '@/components/icon/icon-zip-file.vue';
    import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
    import IconMenuAuthentication from '@/components/icon/menu/icon-menu-authentication.vue';
    import IconMenuCalendar from '@/components/icon/menu/icon-menu-calendar.vue';
    import IconMenuCharts from '@/components/icon/menu/icon-menu-charts.vue';
    import IconMenuChat from '@/components/icon/menu/icon-menu-chat.vue';
    import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
    import IconMenuContacts from '@/components/icon/menu/icon-menu-contacts.vue';
    import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
    import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
    import IconMenuDocumentation from '@/components/icon/menu/icon-menu-documentation.vue';
    import IconMenuDragAndDrop from '@/components/icon/menu/icon-menu-drag-and-drop.vue';
    import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
    import IconMenuFontIcons from '@/components/icon/menu/icon-menu-font-icons.vue';
    import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
    import IconMenuInvoice from '@/components/icon/menu/icon-menu-invoice.vue';
    import IconMenuMailbox from '@/components/icon/menu/icon-menu-mailbox.vue';
    import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
    import IconMenuNotes from '@/components/icon/menu/icon-menu-notes.vue';
    import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
    import IconMenuScrumboard from '@/components/icon/menu/icon-menu-scrumboard.vue';
    import IconMenuTables from '@/components/icon/menu/icon-menu-tables.vue';
    import IconMenuTodo from '@/components/icon/menu/icon-menu-todo.vue';
    import IconMenuUsers from '@/components/icon/menu/icon-menu-users.vue';
    import IconMenuWidgets from '@/components/icon/menu/icon-menu-widgets.vue';
    import IconCaretsDown from '@/components/icon/icon-carets-down.vue';
    import IconXCircle from '@/components/icon/icon-x-circle.vue';

    useMeta({ title: 'Font Icons' });
</script>
