css - 相同的图标大小与 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;
}

然而，现在我使用的是精灵，我不能使用这个解决方案，因为背景大小来自 mixin。即使我覆盖了它，那么背景位置也会出错。

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)
}

这个 SO question似乎正在讨论类似的问题。

Answer 2

另一个选项是以 ems 指定宽度和高度，然后使用 font-size 来缩放图标。

更多信息可以阅读这篇博文： https ://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/