Module «input-search». Input с иконкой поиска

Демо:

https://codepen.io/ildar-meyker/pen/yLRqVjG

Плагины:

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

//

Разметка:

//

<div class="input-search">
    <input type="text" placeholder="Поиск по названию или артикулу и ОЕМ" />
    <svg class="icon">
        <use xlink:href="img/sprite-icons.svg#search"></use>
    </svg>
</div>

Стили:

//

.input-search {
    position: relative;
    font-size: 1.6rem;

    input {
        width: 100%;
        padding: calc(12 / 16) + em calc(19 / 16) + em;
        border: 1px solid #204a8f;
        border-radius: 0.5rem;
        font-family: inherit;
        font-weight: 500;
        font-size: 1em;
        line-height: calc(20 / 16);
        letter-spacing: 0.02em;
        color: currentColor;
        outline: none;

        &::placeholder {
            color: #204a8f;
        }
    }

    .icon {
        position: absolute;
        top: 50%;
        right: calc(23 / 16) + em;
        transform: translateY(-50%);
        font-size: calc(17 / 16) + em;
        width: 1em;
        height: 1em;
    }
}

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

//

Демо:

Плагины:

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

//

Разметка:

//

Стили:

//

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

//