CODEWITHSUNDEEP
cssgulpcss-spritessvg-sprite
Evanss
Evanss

Reputation: 23142

Same icon different sizes with gulp svg sprite?

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

Upvotes: 2

Views: 1842

Answers (2)

mikestreety
mikestreety

Reputation: 841

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/

Upvotes: 0

Thoran
Thoran

Reputation: 9480

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.

Upvotes: 1

Related Questions