Как поменять размер иконок в svg-спрайте?

#svg #svg_спрайт

Использую на проекте svg-спрайт. Спрайт собирал с помощью gulp и плагинов (gulp-svg-symbols,
gulp-svgmin, gulp-cheerio). Проблема в том, что при изменение размера иконки в CSS,
она изменяется в непонятных мне пропорциях. Я задал иконке width: 46px, но она не увеличилась
на 46px. На скриншоте видно, как поле вокруг иконки стало размером 46px, а сама иконка
нет. Как правильно контролировать размер иконок в svg-спрайте? 


Ссылка на картинку

Пример кода, который я использую:



.nav__icon-check {
  width: 46px;
  height: 46px;
  outline: 1px solid red;
}







Пример на codepan.
    

Ответы

Ответ 1

В общем-то, у вас при увеличении SVG-элемента иконка увеличивается, но она изначально
не занимает всё полотно, потому это слабо заметно. Вам надо изменить значение viewbox-атрибута
на, скажем "0 0 25 25". А дальше увеличивайте/уменьшайте иконку сколько душе угодно.



.nav__icon-check {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
}