@pilolin
HTML программист

Как бы вы сделали svg иконки в проекте?

Всем привет. Делаю проект и в макете есть вот такие иконки
5e7ef2e423c01818346095.png

Ранее всегда делал иконки через 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) возможно ли как то передавать цвет в иконку для смены градиента? если мне допустим необходимо его изменить при ховере

Возможно есть какие то более элегантные решения, но я не знаю
  • Вопрос задан
  • 293 просмотра
Решения вопроса 1
Мы вставляем иконки в разметку, не подключая из стороннего файла, как делает, например, гитхаб: https://github.blog/2016-02-22-delivering-octicons...

Для posthtml вот такой плагин есть: https://github.com/andrey-hohlov/posthtml-inline-svg

Про градиенты тут хорошо расписано https://fvsch.com/svg-gradient-fill/ , мне нравится вариант с fill: url... в css.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Все верно, через символьные ссылки вставлять иконки самое удобное. Но при этом надо следить чтоб id градиентов и прочих элементов не пересекались с другими. Иначе получишь непонятные вещи. Ну а корень твоей проблемы исходит из fill="none", который говорит - "ничего не заливать", а градиент добавляется через заливку.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы