@casoon/dragonfly/icons/heroicons.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Heroicons CSS
 * 
 * Diese Datei enthält die CSS-Klassen für die Heroicons.
 * Die Styles sind in @layer components organisiert.
 */


    /* Base Icon */
    .heroicon {
        background-color: currentcolor;
        display: var(--display-inline-block);
        height: var(--spacing-6);
        mask-position: var(--position-center);
        mask-repeat: var(--bg-no-repeat);
        mask-size: var(--position-100);
        vertical-align: var(--position-middle);
        width: var(--spacing-6);
    }

    /* Icon Sizes */
    .heroicon-xs {
        height: var(--spacing-4);
        width: var(--spacing-4);
    }

    .heroicon-sm {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .heroicon-lg {
        height: var(--spacing-7);
        width: var(--spacing-7);
    }

    .heroicon-xl {
        height: var(--spacing-8);
        width: var(--spacing-8);
    }

    .heroicon-2xl {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    /* Icon Alignment */
    .heroicon-baseline {
        vertical-align: var(--position-baseline);
    }

    .heroicon-top {
        vertical-align: var(--position-top);
    }

    .heroicon-middle {
        vertical-align: var(--position-middle);
    }

    .heroicon-bottom {
        vertical-align: var(--position-bottom);
    }

    /* Icon Animation */
    .heroicon-spin {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* Heroicons */
    .hi,
    .hi-icon {
        background-color: currentcolor;
        display: var(--display-inline-block);
        height: var(--spacing-6);
        mask-position: var(--position-center);
        mask-repeat: var(--bg-no-repeat);
        mask-size: var(--position-100);
        vertical-align: var(--position-middle);
        width: var(--spacing-6);
    }

    .hi-home {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
    }

    .hi-menu {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
    }

    .hi-x {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
    }

    .hi-search {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    }

    /* Icon Sizes */
    .hi-xs {
        height: var(--spacing-4);
        width: var(--spacing-4);
    }

    .hi-sm {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

    .hi-lg {
        height: var(--spacing-7);
        width: var(--spacing-7);
    }

    .hi-xl {
        height: var(--spacing-8);
        width: var(--spacing-8);
    }

    .hi-2xl {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }

    /* Icon Alignment */
    .hi-baseline {
        vertical-align: var(--position-baseline);
    }

    .hi-top {
        vertical-align: var(--position-top);
    }

    .hi-middle {
        vertical-align: var(--position-middle);
    }

    .hi-bottom {
        vertical-align: var(--position-bottom);
    }

    /* Icon Animation */
    .hi-spin {
        animation: spin 1s linear infinite;
    }