Skip to content

Instantly share code, notes, and snippets.

@mhed89

mhed89/mixin-icons.scss

Created January 24, 2023 11:14
Show Gist options
  • Save mhed89/fbf58cecf0c038a012e38727e5e33a8c to your computer and use it in GitHub Desktop.
Save mhed89/fbf58cecf0c038a012e38727e5e33a8c to your computer and use it in GitHub Desktop.
Download ZIP
scss mixin for icon element
Raw
mixin-icons.scss
@mixin svg-icon($name, $height: 24, $width: 24, $color: $color-primary) {
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
height: calc($height / $base-font-size) + rem;
width: calc($width / $base-font-size) + rem;
background-color: $color;
mask-image: url(~@images/icons/#{$name}.svg);
background-size: cover;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment