adding icon sizes

change dir

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",

scss/components/_icon.scss

@@ -1,28 +0,0 @@
-/**
- * icon
- *
- * use svg as icon
- *
- * <svg class="icon">
- *     <use src="#"></use>
- * </svg>
- *
- *
- * @author Björn Hase
- *
- */
-
-
-$icon__vertical-align: middle !default;
-$icon__margin: 0 2px !default;
-
-@mixin crispy-boilerplate-icon() {
-    .icon {
-        display: inline-block;
-        position: relative;
-        vertical-align: $icon__vertical-align;
-        margin: $icon__margin;
-
-        @content;
-    }
-}

scss/_mixins.scss → src/_mixins.scss

@@ -11,6 +11,25 @@
     font-size: pxToRem($font-size);
 }
 
+/**
+ * add modificators for font-size from a map
+ *
+ *
+ * @param {map} $font-sizes
+ *
+ */
+@mixin font-sizes($font-sizes) {
+    @each $name, $font-size in $font-sizes {
+       @if ($name == 'default') {
+           @include font-size($font-size);
+       } @else {
+           &--#{$name} {
+               @include font-size($font-size);
+           }
+       }
+   }
+}
+
 /**
  * clearfix to end floating
  *

src/components/_icon.scss

@@ -0,0 +1,102 @@
+/**
+ * icon
+ *
+ * use svg as icon
+ *
+ * <svg class="icon">
+ *     <use src="#"></use>
+ * </svg>
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+
+$icon__vertical-align: middle !default;
+$icon__margin: 0 2px !default;
+
+// width & height
+$icon__sizes: (
+    'default': 18px,
+    'small': 14px,
+    'large': 28px
+) !default;
+
+// colors
+$icon__colors: (
+    'default' : black,
+    'secondary' : grey,
+) !default;
+
+@mixin crispy-boilerplate-icon() {
+    .icon {
+        display: inline-block;
+        position: relative;
+        vertical-align: $icon__vertical-align;
+        margin: $icon__margin;
+
+        @content;
+    }
+}
+
+/**
+ * add modificators for icons as fill from map
+ *
+ *
+ * @param {map} $colors
+ *
+ */
+@mixin crispy-boilerplate-icon-colors($colors) {
+     @each $name, $color in $colors {
+        @if ($name == 'default') {
+             @include crispy-boilerplate-icon-color($color);
+        } @else {
+            &--#{$name} {
+                @include crispy-boilerplate-icon-color($color);
+            }
+        }
+    }
+}
+
+/**
+ * add color as fill
+ *
+ *
+ * @param {color} $color
+ *
+ */
+@mixin crispy-boilerplate-icon-color($color) {
+    fill: $color;
+}
+
+/**
+ * adding sizes for icons from map
+ *
+ *
+ * @param {map} $sizes
+ *
+ */
+@mixin crispy-boilerplate-icon-sizes($sizes) {
+     @each $name, $size in $sizes {
+        @if ($name == 'default') {
+             @include crispy-boilerplate-icon-size($size);
+        } @else {
+            &--#{$name} {
+                @include crispy-boilerplate-icon-size($size);
+            }
+        }
+    }
+}
+
+/**
+ * add size for icon as width and height
+ *
+ *
+ * @param {px} $size
+ *
+ */
+@mixin crispy-boilerplate-icon-size($size) {
+    width: $size;
+    height: $size;
+}