Друзья, всем привет!
Использую svg в css (scss) вот таким вот образом:
.class {
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22ht...') center no-repeat;
background-size: contain;
height: 30px;
width: 30px;
}
Такой подход нравится тем, что svg файла, как такового нет (нет лишнего запроса), но самое главное, что я могу менять свойства height и width и иконка будет масштабироваться.
На данный момент проблема в том, что мне приходится обрабатывать svg файл вручную, т.е. понятное дело, что привести иконку в порядок нужно будет в любом случае (например, задать цвет), но дальше: открыть в редакторе, скопировать код, прогнать его через
URL Decoder/Encoder и только потом вставить в css, это занимает очень много времени. Такой подход использования svg спрайта встречаю на очень многих сайтах (причем довольно серьезных), даже элементарно на вот
этом и, думаю, вряд ли они такую работу делают вручную, вроде меня.
Использую еще svg спрайт в html, а потом через use вызываю, но такой подход не нравится, css мне больше по душе.
На данный момент присмотрел gulp плагин
gulp-svg-sprite но что-то не могу настроить для использования в том виде, который описал выше.
Может кто знает другие плагины, позволяющие это реализовать, либо может тот же
svg-sprite всё-таки позволяет это сделать, а я просто невнимателен (читай рукожоп)?
Спасибо!
Простой
Средний
