Нормально ли так делать?

Question

[maaestr0]

Здравствуйте. Делаю сайт, на сайте есть раздел с категориями, у каждой категории есть своя иконка. При приведении иконка меняется на другую. У каждой иконки есть своя вторая версия с таким же названием и приставкой 2. Чтобы не писать в css файле стили для всех категорий (а их достаточно много 10+) решил сделать через JS и data атрибуты.
Подскажите, насколько это костыльно, если очень дайте совет как лучше. Спасибо.
Так выглядит код одной из категорий

<div class="categories__img " data-name="design"> </div>

JS

let categoriesIcon = document.querySelectorAll('.categories__img');

categoriesIcon.forEach(element => {
    element.style.background = `url(../img/${element.dataset.name}.png) center / cover`;

    element.addEventListener('mouseout', ()=> {
        element.style.background = `url(../img/${element.dataset.name}.png) center / cover`;
    });

    element.addEventListener('mouseover', ()=> {
        element.style.background = `url(../img/${element.dataset.name}2.png) center / cover`;
    });
});

Comments

[Ankhena]

Это очень странное решение при наличии кастомных свойств.
https://jsfiddle.net/ks7rcudm/

А что, иконка серьезно меняется прям на другую?

[maaestr0]

Ankhena, Извините, моя ошибка, я забыл указать, что у каждой иконки есть своя вторая версия с таким же названием, и приставкой 2.

[Rst0]

вообше, при первой загрузке этих вторых _2 картинок еще нет на клиенте.
при первом ховере они будут загружаться и это должно быть заметно.

[maaestr0]

Спасибо за ответ. Лучше сделать обычный ховер через css? Это примерно 50 строк однотипного кода.

[Ankhena]

maaestr0, в чем разница у этих иконок?
Черно-белые?
Цвет меняется?

[maaestr0]

Ankhena,

[Rst0]

судя по иконам тут спрайт svg напрашивается

[Ankhena]

maaestr0, собираете все svg в спрайт и используете.
Для фона спрайт должен быть не из symbol, а из комбинации symbol+view+use либо из svg.
Альтернатива спрайту: инлайном в css, причем можно записать в переменные.

Другой вариант использования спрайтов и кастомных свойств для замены цвета https://jsfiddle.net/Ankhena/zLm8sqb5/

Но js тут всё равно не нужен.

[Rst0]

еще более гибкий вариант с SVG ) , но JS нужен:

Answer 1

[Виталий Першин]

Зачем прописывать в css, то что можно вывести в разметку, еще и анимировать можно: