Add svg dimensions to sprite object
See original GitHub issueWhen 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.
Thanks!
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@galymax, thanks again for the suggestion and PR. This feature has been released in version
2.7.0
. 🚀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.