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

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

https://wordpress.org/plugins/extended-categories-widget/似乎在讨论类似的问题。

Answer 2

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

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

相同的图标与gulp svg精灵不同的大小？

2 个答案: