Один и тот же значок разных размеров с gulp svg sprite?

Question

Я использую gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite

Можно ли использовать один и тот же значок разных размеров? До спрайтов это было легко и фактически было одной из вещей, которые мне больше всего нравятся в SVG:

http://codepen.io/anon/pen/qZQvYN

.icon-small,
.icon-large {
    background-image: url(https://lincolnloop.com/static/assets/img/lincolnloop-mark.9b93136b4561.svg);
    background-size: 100% 100%;
}

.icon-small {
    width: 50px;
    height: 50px;
}

.icon-large {
    width: 100px;
    height: 100px;
}

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

http://codepen.io/anon/pen/JXezaK

.icon-small,
.icon-large {
    background-image: url(https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg?v1.11);
  background-size: auto 400px;
  border: 1px solid grey;
}

.icon-small {
    width: 50px;
    height: 50px;
}

.icon-large {
    width: 100px;
    height: 100px;
}

Answer 1

Я полагаю, у вас нет текста на SVG. Затем с помощью transform: scale(2) следует это исправить:

.icon-large {
  width: 50px;
  height: 50px;
  transform: scale(2)
}

Этот ТАК вопрос, кажется, обсуждает похожую проблему.

Answer 2

Другой вариант - указать ваши ширину и высоту в ems, а затем использовать размер шрифта для масштабирования вашего значка.

Более подробную информацию можно прочитать в этом блоге: https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/