Same icon different sizes with gulp svg sprite?

Question

Im using gulp-svg-sprite https://github.com/jkphl/gulp-svg-sprite

Is it possible to use the same icon at different sizes? Prior to spriting this was easy and in fact was one of the things I like most about SVGs:

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

However now that I'm using a sprite I cant use this solution as the background-size comes from the mixin. Even if I overwrote this then the background-position would be made wrong.

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

can you post your sample svg sprite instead of the png example? — Thoran, May 03 '16 at 13:35
could transform-scale work? http://codepen.io/hkh222/pen/xVQBMO or do you want a more proper solution? — Thoran, May 03 '16 at 14:37

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

I suppose you don't have text on your svg. Then using transform: scale(2) should fix it:

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

This SO question seem to be discussing similar issue.

edited May 23 '17 at 11:58

Community

1
1

answered May 03 '16 at 14:48

Thoran

8,884
7
41
50

score 0 · Answer 2 · answered Jun 17 '16 at 12:13

0

The other option is to specify your width and height in ems, and then use font-size to scale your icon.

More information can be read on this blog post: https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/

answered Jun 17 '16 at 12:13

mikestreety

833
6
28

Same icon different sizes with gulp svg sprite?

2 Answers2