Как масштабировать иконку из SVG-спрайта выведенную в background?

Question

[Emptyform]

Запаковал все свои SVG-иконки в один спрайт. Хочу вывести одну из иконок в background размером меньше чем в самой SVG прописано, но не получается.

Единственное что сработало - вывести как выводится, а потом применить transform: scale();

Вот так примерно:

.my-div:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    height: 72px;
    width: 72px;
    background-image: url('../img/icons.svg');
    background-repeat: no-repeat;
    background-position: 0 -397px;
    transform: scale(0.52);
  }

Но мне думается, что это полнейшая лажа.
Что скажете? Как это сделать правильно?

Answer 1

[Rad1calDreamer]

Размер блока + background-size

Comments

[Emptyform]

Rad1calDreamer
Методом тыка подобрал height: 35px; width: 36px; background-size: 148px;, ну и background-position: -1px -196px; тоже методом научного тыка.
Можно как-то упростить подбор размеров? Простое умножение на 0.52 не помогло..

[Rad1calDreamer]

Сделайте пример на codepen, чтобы проще было помочь

[Emptyform]

Rad1calDreamer: Я вечером дома сделаю, и отпишусь здесь

[Александр Борисович]

Emptyform, два года ждем