Module «nav-social». Структура для social icons.

Source:

https://html.ildar-meyker.ru/html-kgeu/components.html?tab=tab-navs

Демо:

Плагины:

Подключение:

//

Разметка:

//

<nav class="nav-social">
    <ul>
        <li>
            <a href="#">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/social/sprite.svg#1"
                    ></use>
                </svg>
            </a>
        </li>

        <li>
            <a href="#">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/social/sprite.svg#2"
                    ></use>
                </svg>
            </a>
        </li>

        <li>
            <a href="#">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/social/sprite.svg#3"
                    ></use>
                </svg>
            </a>
        </li>

        <li>
            <a href="#">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/social/sprite.svg#4"
                    ></use>
                </svg>
            </a>
        </li>

        <li>
            <a href="#">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/social/sprite.svg#5"
                    ></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

Стили:

//

.nav-social {
    ul {
        display: flex;
        gap: 2rem;
    }

    svg {
        width: 2rem;
        height: 2rem;
        fill: currentColor;
    }

    a {
        color: #899ab7;

        &:hover {
            color: #0047ba;
        }
    }

    &--white {
        a {
            &:hover {
                color: #fff;
            }
        }
    }
}

Инициализация:

//