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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
is bourbon necessary?