А как вы вставлять будете иконку через псевдоэлемент? Так:
content: url(path/to/your.svg);
:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");
}
.block {
&::before {
// разное нужное
mask: var(--icon-name) no-repeat center;
bg: red;
}
}.elem {
--width: 50px;
bg: linear-gradient(to right, transparent var(--width), white var(--width));
&::before {
width: var(--width);
}
}closest для поиска нужно элемента.
var items = 5;
var elements = document.getElementsByClassName("elem");
var length = (items < elements.length) ? items : elements.length;
for (var i = 0; i < length; i++) {
elements[i].classList.add("red");
}<div class="swiper-slide home-slider__slide">
<div class="home-slider__bg" data-swiper-parallax="20%"
style="background-image: url(../../images/dist/slide-images/1.jpg);"></div>
<div class="home-slider__text">
<h2 class="home-slider__title">
Регистрация бизнеса удаленно в соответствии с законодательством
</h2>
<p class="home-slider__descr">Поможем вам быстро и без лишних хлопот зарегистрировать вашу компанию в
соответствии с законодательством</p>
<button class="btn">Оставить заявку</button>
</div>
</div>