Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add svg dimensions to sprite object

See original GitHub issue

When using the svg sprite in sass as background, the container dimensions or background size need to be used to scale the svg. Often the svg needs to be used in ins original dimensions, so it would be really helpful to be able to access these in sass. Could you consider changing the generated sprite object like so:

$sprites: (
    'mySVG': (
	svg: "data:image/svg+xml,%3csvg xmlns...",
	width: 14.5,
	height: 5

The mixin would need to be changed like so:

@mixin sprite($name) {
    $obj: map-get($sprites, $name);
    $sprite: map-get($obj, svg);
    background: url($sprite) center no-repeat;

That would add the possibility to overwrite the mixin with a custom one that uses the original dimensions of the svg:

@mixin sprite($name) {
    $obj: map-get($sprites, $name);
    $sprite: map-get($obj, svg);
    background: url($sprite) center no-repeat;
    background-size: map-get($obj, width)px map-get($obj, height)px;

You could also consider adding an optional parameter to the mixin that sets the svg to it’s original size.


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

cascornelissencommented, Jul 15, 2018

@galymax, thanks again for the suggestion and PR. This feature has been released in version 2.7.0. 🚀

cascornelissencommented, Jun 8, 2018

Agreed (we can always change it in a future major release), if you want you’re free to submit a PR, if not I’ll take a look at this when I have some more time.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Use SVG Image Sprites - SitePoint
This tutorial describes two ways to create sprites containing many images. However, it uses SVG rather than the more well-known bitmap ...
Read more >
How to Create and Manage SVG Sprites - Webdesigner Depot
Creating an SVG sprite can be done manually. You will need a vector design program that can generate SVG code. For this, I'll...
Read more >
How to get auto width for SVG icon inside a sprite?
In add attribute preserveAspectRatio="xMinYMin meet". Use em. scss template: ... .icon-medal { font-size: 1em; width: 1.32em; height: 1em; }.
Read more >
How to Scale SVG | CSS-Tricks
If you use an <object> , <embed> , or <iframe> to embed your SVG, setting height and width on the <svg> won't change...
Read more >
svg-sprite - npm
If you don't provide a configuration object altogether, svg-sprite uses built-in defaults for these properties, so in fact, they are all ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found