Skip to content

Instantly share code, notes, and snippets.

@finteractive
Last active August 29, 2015 14:28
Show Gist options
  • Save finteractive/bca7fe4edfac44d5ad82 to your computer and use it in GitHub Desktop.
Save finteractive/bca7fe4edfac44d5ad82 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="button">
<!-- I don't use img tags but svg like below doesn't work here??? -->
<img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
<!-- This is the correct way...
<svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
</svg> -->
</div>
// ----
// libsass (v3.2.5)
// ----
// Fixed size, centered SVG in fixed size container
// Include from container
@mixin svg-centered($svg-width, $svg-height, $wrapper-width, $wrapper-height, $svg-class: svg) {
@if ($wrapper-width < $svg-width or $wrapper-height < $svg-height) {
@error ('Wrapper can not be larger the the svg');
}
position: relative;
width: $wrapper-width;
height: $wrapper-height;
.#{$svg-class} {
position: absolute;
top: ($wrapper-height - $svg-height) / 2;
left: ($wrapper-width - $svg-width) / 2;
width: $svg-width;
height: $svg-height;
}
}
.button {
@include svg-centered(
$svg-width: 3em,
$svg-height: 3em,
$wrapper-width: 4em,
$wrapper-height: 5em,
$svg-class: svg-img
);
background-color:red;
}
svg {
fill: currentColor;
}
// Needed for img, but not svg elements
.svg-img {
display:block;
}
.button {
position: relative;
width: 4em;
height: 5em;
background-color: red;
}
.button .svg-img {
position: absolute;
top: 1em;
left: 0.5em;
width: 3em;
height: 3em;
}
svg {
fill: currentColor;
}
.svg-img {
display: block;
}
<div class="button">
<!-- I don't use img tags but svg like below doesn't work here??? -->
<img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
<!-- This is the correct way...
<svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
</svg> -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment