具有 gulp svg sprite 的相同图标不同大小？

Question

我正在使用 gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite

是否可以在不同尺寸下使用相同的图标？在 spriting 之前这很容易，事实上这是我最喜欢 SVG 的事情之一：

.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;
}

但是现在我使用的是 sprite，我不能使用这个解决方案，因为背景大小来自 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)
}

This SO question 似乎在讨论类似的问题。

Answer 2

另一种选择是以 em 为单位指定宽度和高度，然后使用 font-size 来缩放图标。

可以在此博客上阅读更多信息 post： https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/

具有 gulp svg sprite 的相同图标不同大小？

Same icon different sizes with gulp svg sprite?

css

gulp

css-sprites

svg-sprite