Всем привет. Делаю проект и в макете есть вот такие иконки
Ранее всегда делал иконки через icomoon, удобно - размеры и цвета все можно менять без каких либо проблем (речь про hover и focus). Здесь же как можете заметить одна и та же иконка имеет несколько цветов, да еще и градиенты есть. Нащел вариант что не менее популярен - добавить их как символы svg и использовать через id
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon" fill="none" viewBox="0 0 22 22">
<!-- сам код иконки -->
</symbol>
</svg>
а дальше ее вызывать так
<svg>
<use xlink:href="#icon">
</svg>
Cоответсвенно цвета можно задавать через css переменные --color: red
Но здесь я столкнулся с проблемами:
1) если указать display: none у svg то градиентные иконки отображают только ту часть что у них залита цветом, а градиентной части не видно тупо - решил просто обернуть в div который сделал размерами 1px на 1px и visibility hidden (всеровно кривое какое то решение)
2) возможно ли как то передавать цвет в иконку для смены градиента? если мне допустим необходимо его изменить при ховере
Возможно есть какие то более элегантные решения, но я не знаю
