<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class={{if @closed "eye-closed"}} ...attributes>
    <title>eye open close</title>
    <g stroke-linecap="round" fill="none" stroke="currentColor" stroke-linejoin="round"
        class="nc-icon-wrapper">
        <g class="js-nc-int-icon nc-int-eye-open-close">
            <path d="M15.1786 12C15.1786 13.6244 13.7887 15 12 15C10.2112 15 8.82141 13.6244 8.82141 12C8.82141 10.3756 10.2112 9 12 9C13.7887 9 15.1786 10.3756 15.1786 12Z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M1 12C1 12 5.71429 20 12 20C18.2857 20 23 12 23 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="none"/>
            <path d="M1 12C1 12 5.71429 4 12 4C18.2857 4 23 12 23 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="none"/>
            <path d="M9.46058 3.82026L8.51379 0.937256" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="butt" opacity="0"/>
            <path d="M14.5394 3.82026L15.4862 0.937256" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="butt" opacity="0"/>
            <path d="M4.58522 6.17225L2.68222 3.8615" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="butt" opacity="0"/>
            <path d="M19.4148 6.17225L21.3178 3.8615" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-cap="butt" opacity="0"/>
        </g>
        <style data-cap="butt">
            .nc-int-eye-open-close {
                --transition-duration: .2s;
                perspective: 100px
            }

            .nc-int-eye-open-close :nth-child(1) {
                transform-origin: 16px 22px;
                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1)
            }

            .nc-int-eye-open-close :nth-child(3) {
                transform-origin: 50% 50%;
                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1)
            }

            .nc-int-eye-open-close :nth-child(4),
            .nc-int-eye-open-close :nth-child(5),
            .nc-int-eye-open-close :nth-child(6),
            .nc-int-eye-open-close :nth-child(7) {
                transform-origin: 50% 50%;
                transition: transform var(--transition-duration) cubic-bezier(.65, .05, .36, 1), opacity 0s calc(var(--transition-duration)/2)
            }

            .eye-closed .nc-int-eye-open-close :nth-child(1) {
                transform: scale(0)
            }

            .eye-closed .nc-int-eye-open-close :nth-child(3),
            .eye-closed .nc-int-eye-open-close :nth-child(4),
            .eye-closed .nc-int-eye-open-close :nth-child(5),
            .eye-closed .nc-int-eye-open-close :nth-child(6),
            .eye-closed .nc-int-eye-open-close :nth-child(7) {
                transform: rotateX(180deg);
                opacity: 1
            }
        </style>
    </g>
</svg>


