Skip to content

Instantly share code, notes, and snippets.

@wesleytodd
Last active September 4, 2020 15:45
Embed
What would you like to do?
Using a list to dynamically create classes for an icon font
// All of our icons
$icons: (
(exclaim, "\21"),
(x, "\78"),
(play, "\25b7"),
(user, "\2603"),
(search, "\2604"),
(menu, "\2637"),
(loading, "\2668"),
(flag, "\2690"),
(speech, "\1f4ac"),
(heart, "\2764"),
(arrow-down, "\2193"),
(arrow-up, "\2191"),
(trending, "\2197"),
(clock, "\29d6"),
(popular, "\260d"),
(dollabills, "\24"),
(thumbs-down, "\1f44e"),
(thumbs-up, "\1f44d"),
(circle-right, "\21e8"),
(circle-left, "\21e6"),
(circle-down, "\21e9"),
(circle-up, "\21e7"),
(globe, "\1f310"),
(check, "\2713"),
(mic, "\1f3a4"),
(carrot-down, "\21a7"),
(disk, "\1f4be"),
(eye, "\1f638"),
(trash, "\74"),
(paper, "\1f4f0")
);
// Mixin for use inside media queries
@mixin icon($char: false, $defaults: false) {
@if($defaults == false) {
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@if ($char) {
content: iconChar($char);
}
}
// Helper function to get a character code
@function iconChar($key) {
@each $i in $icons {
@if nth($i, 1) == $key {
@return nth($i, 2)
}
}
}
// Base Icon transparent class to extend from
%icon {
@include icon();
}
// Declare transparent classes
@each $i in $icons {
%icon-#{nth($i, 1)} {
content: nth($i, 2);
@extend %icon;
}
}
.my-thing {
&:before {
@extend %icon-exclaim;
}
}
@media (min-width: 50em) {
// My thing in a media query cannot extend, so uses the iconChar function
.my-thing {
&:before {
content: iconChar('flag');
// This can also be written this way if the content doesn't
// already have the base icon styles
// @include icon('flag')
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment