Skip to content

Instantly share code, notes, and snippets.

@mistergraphx mistergraphx/icon-set.scss
Last active Feb 17, 2016

Embed
What would you like to do?
icon-map & iconify mixin
// ----
// libsass (v3.1.0)
// ----
@import "bourbon/bourbon";
$icon-family-name: 'icons' !default;
$icon-prefix: 'icon' !default;
$icon-set-map: (
bullet: '\e001',
chevron-down: '\e002',
chevron-large: '\e003',
chevron-left: '\e004',
chevron-right: '\e005',
chevron-up: '\e006',
close: '\e007',
cog: '\e008',
exclamation: '\e00a',
google-dev: '\e00b',
hash: '\e00c',
introduction-to-media: '\e00d',
lessons: '\e00e',
menu: '\e00f',
minus: '\e010',
multi-device-layouts: '\e011',
performance: '\e012',
plus: '\e013',
question: '\e014',
slash: '\e015',
star: '\e016',
tick: '\e017',
user-input: '\e018',
twitter: '\e800',
github: '\e801',
facebook: '\e802',
gplus: '\e803',
folder-open: '\e804',
rss: '\e805',
html5: '\e806',
phone: '\e807',
folder: '\e808',
address: '\e809',
email: '\e80a',
globe: '\e80b',
user: '\e80c',
calendar: '\e80d',
search: '\e80e',
resize-full: '\e80f',
chat: '\e810',
tag: '\e811',
chevron-double-right: '\e812',
quotation-mark-right: '\e813',
basket: '\e814',
filter: '\e815',
);
/* # Icon set
http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
http://frontendgods.com/sass-mixins-with-default-parameters-using-maps/
Styleguide components.icons.icon-set
*/
@mixin icon-set-init($icon-set-map: null){
@if $icon-set-map{
@each $name, $code in $icon-set-map{
.icon-#{$name}:before{
content:$code;
}
}
}
@else{
@error "Vous n'avez pas fourni de icon-map";
}
}
@include icon-set-init($icon-set-map);
/* # @mixin iconify
Markup:
<a href="" class="btn test-btn">Link Text</a>
@mixin iconify
@param $icon {string} - icon name
@param $position [before !default, after] - Position of the icon
@param $margin (5px default) - Si avant ou après le contenu, il est possible de gérer l'espace
@param $replace {boolean} (false !default) - Remplace le contenu
@see - Inspiré de <http://jshak.es/easy-icomoon-icons-with-sass/>
$icon-family-name ('icons' !default) - Nom de l'icon font ex:`font-awesome, icomoon`
$icon-prefix ('icon' !default) - Prefix des classes css sans le tiret ex:`icn, icone, icon`
Styleguide components.icons.icon-utils
*/
@mixin iconify($icon, $position: "before", $margin: 5px, $replace: false) {
// on récupère l'icone dans la maps icon-set
@if map-has-key($icon-set-map,$icon){
// If we're replacing the text, set font-size to 0
@if $replace {
font-size: 0;
}
// Pseudo-element properties
&:#{$position} {
/*@extend .#{$icon-prefix}-#{$icon};*/
content: map-get($icon-set-map,$icon);
font-family: #{$icon-family-name};
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
@if $replace==false{
@if $position=="before"{
margin-right: $margin;
}
@if $position=="after"{
margin-left: $margin;
}
}
@if $replace {
font-size: 1rem;
}
@content;
}
}@else {
@error '@mixin Iconify : Impossible de trouver l\'icone '+$icon ;
}
}
.test-btn {
// Visually replace the contents of the element with the search icon
@include iconify("email", "after", 15px) {
font-size: 20px;
}
}
@Turqueso

This comment has been minimized.

Copy link

Turqueso commented Jul 15, 2015

is bourbon necessary?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.