Improving icon sass

geoff-winner · Oct 5, 2016 · c03506f · c03506f
1 parent 7fc267b
commit c03506f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 # Compiled files
 dest/
-source/_patterns/01-atoms/images/_icons.scss
+source/_patterns/01-atoms/images/_icons-settings.scss
 
 # OS generated files
 .DS_Store

diff --git a/gulpconfig.yml b/gulpconfig.yml
@@ -101,7 +101,7 @@ icons:
   templates:
     enabled: true
     css:
-      src: images/icons/templates/_icons.scss
+      src: images/icons/templates/_icons-settings.scss
       dest: source/_patterns/01-atoms/images/
     demo:
       src: images/icons/templates/icons.twig

diff --git a/images/icons/templates/_icons-settings.scss b/images/icons/templates/_icons-settings.scss
@@ -0,0 +1,7 @@
+$icon-font-base-name: "{{ fontName }}";
+$icon-font-path: "{{ fontPath }}";
+$icon-font-class-prefix: "{{ classNamePrefix }}";
+
+$font-icons: ({% _.each(glyphs, function(glyph) { %}
+  {{ glyph.name }}: "\{{ glyph.content }}",{% }); %}
+);
diff --git a/images/icons/templates/_icons.scss → source/_patterns/01-atoms/images/_icons.scss b/images/icons/templates/_icons.scss → source/_patterns/01-atoms/images/_icons.scss
@@ -1,21 +1,15 @@
-$icon-font-base-name: "{{ fontName }}";
-
 @font-face {
   font-family: $icon-font-base-name;
-  src: url("{{ fontPath }}{{ fontName }}.eot");
+  src: url("#{$icon-font-path}#{$icon-font-base-name}.eot");
   src: /* stylelint-disable-line declaration-colon-space-after */
-    url("{{ fontPath }}{{ fontName }}.eot?#iefix") format("eot"),
-    url("{{ fontPath }}{{ fontName }}.woff") format("woff"),
-    url("{{ fontPath }}{{ fontName }}.ttf") format("truetype"),
-    url("{{ fontPath }}{{ fontName }}.svg#{{ fontName }}") format("svg");
+    url("#{$icon-font-path}#{$icon-font-base-name}.eot?#iefix") format("eot"),
+    url("#{$icon-font-path}#{$icon-font-base-name}.woff") format("woff"),
+    url("#{$icon-font-path}#{$icon-font-base-name}.ttf") format("truetype"),
+    url("#{$icon-font-path}#{$icon-font-base-name}.svg#icons") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 
-$font-icons: ({% _.each(glyphs, function(glyph) { %}
-  {{ glyph.name }}: "\{{ glyph.content }}",{% }); %}
-);
-
 /**
  * Mixin - Icon
  *
@@ -95,14 +89,14 @@ $font-icons: ({% _.each(glyphs, function(glyph) { %}
 //  font-style: normal;
 //}
 
-// Everything with .{{ classNamePrefix }}--something has a base set of styles in order to view
-[class*="{{ classNamePrefix }}--"] {
+// Everything with .icon--something has a base set of styles in order to view
+[class*="#{$icon-font-class-prefix}--"] {
   @include font-icon-base;
 }
 
 // Print .icon--thingy classes using default :before for easy elements
 @each $icon-name, $icon-symbol in $font-icons {
-  .{{ classNamePrefix }}--#{$icon-name}::before {
+  .#{$icon-font-class-prefix}--#{$icon-name}::before {
     content: map-get($font-icons, $icon-name);
   }
 }