Skip to content

Instantly share code, notes, and snippets.

Last active Aug 16, 2018
What would you like to do?
dry icon mixin
$icons: (
follow: 'a',
followed: 'b',
unfollow: 'c',
checkmark: 'e'
$Placeholder-Selectors: ();
@mixin icon($name, $color, $extend: true) {
@include icon-static($extend);
&:before {
content: map-get($icons, $name);
@if $color {
color: $color;
@mixin icon-static($extend: true) {
$icon-selector: map-get($Placeholder-Selectors, 'icon');
@if $extend == true {
@if $icon-selector == null {
$icon-selector: unique-id();
$Placeholder-Selectors: map-merge($Placeholder-Selectors, ('icon': $icon-selector)) !global;
@at-root %#{$icon-selector} {
@include icon-static(false);
@at-root (without: media){
@extend %#{$icon-selector};
@else {
&:before {
font-family: "iconfont" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment