Merge pull request #77 from SAP/bug/72

#72 Iconfont problem when using the SCSS source
SAP · Feb 15, 2018 · 5a850d1 · 5a850d1
2 parents 362da34 + 3640545
commit 5a850d1
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -131,7 +131,16 @@ At the time this version was released, there are no known limitations
 
 # Known Issues
 
-At the time this version was released, there are no known issues.
+### Configuring icons path when importing SCSS
+
+If you are importing .scss files in your project, the icons path needs to be configured in your project's .scss file before the Fundamental UI scss import as described below. Please note that the path variable name has to be `$fd-icons-path` in order to override the default value set in `scss/icons/icon.scss`.
+
+```
+$fd-icons-path : "../node_modules/fundamental-ui/scss/icons/"; // should be declared before the scss import
+
+@import "../node_modules/fundamental-ui/scss/all.scss";
+
+```
 
 
 # How to obtain support
@@ -141,7 +150,7 @@ If you encounter an issue, you can [create a ticket](https://github.com/SAP/fund
 
 # Contributing
 
-Details of where and how to start developing the new component can be found in test/README.MD file.
+Details of where and how to start developing the new component can be found in `test/README.MD` file.
 New branches should include the type (feature, bug, or hotfix) and the issue number or release number.
 
 ```

diff --git a/docs/_data/icons.yml b/docs/_data/icons.yml
@@ -1,39 +1,39 @@
-  - name: add
-  - name: arrow
-  - name: backarrow
-  - name: caution
-  - name: change
-  - name: checked
-  - name: chevron
-  - name: clone
-  - name: close
-  - name: collapse
-  - name: delete
-  - name: done
-  - name: doublechevron
-  - name: dragdroplist
-  - name: dragdropobject
-  - name: edit
-  - name: expand
-  - name: feedback
-  - name: filter
-  - name: filterremove
-  - name: grid
-  - name: help
-  - name: infoon
-  - name: link
-  - name: list
-  - name: localization
-  - name: lock
-  - name: maximize
-  - name: minimize
-  - name: more
-  - name: noimage
-  - name: options
-  - name: search
-  - name: sort
-  - name: sync
-  - name: top
-  - name: visibilityoff
-  - name: visibilityon
-  - name: warning
+  - name: add 
+  - name: arrow 
+  - name: backarrow 
+  - name: caution 
+  - name: change 
+  - name: checked 
+  - name: chevron 
+  - name: clone 
+  - name: close 
+  - name: collapse 
+  - name: delete 
+  - name: done 
+  - name: doublechevron 
+  - name: dragdroplist 
+  - name: dragdropobject 
+  - name: edit 
+  - name: expand 
+  - name: feedback 
+  - name: filter 
+  - name: filterremove 
+  - name: grid 
+  - name: help 
+  - name: infoon 
+  - name: link 
+  - name: list 
+  - name: localization 
+  - name: lock 
+  - name: maximize 
+  - name: minimize 
+  - name: more 
+  - name: noimage 
+  - name: options 
+  - name: search 
+  - name: sort 
+  - name: sync 
+  - name: top 
+  - name: visibilityoff 
+  - name: visibilityon 
+  - name: warning 
diff --git a/docs/css/fundamental-ui.css b/docs/css/fundamental-ui.css
diff --git a/icons/icons-template.scss b/icons/icons-template.scss
@@ -2,10 +2,16 @@
 @import "../core/mixins";
 @import "../core/functions";
 
+$fd-scss-icons-path : ""!default;
+
+@if variable-exists(iconsPath) {
+    $fd-scss-icons-path : $icons-path ;
+}
+
 @font-face {
     font-family: "<%= fontName %>";
-    src: url("<%= fontName %>.woff2") format("woff2"),
-        url("<%= fontName %>.woff") format("woff");
+    src: url("#{$fd-scss-icons-path}<%= fontName %>.woff2") format("woff2"),
+        url("#{$fd-scss-icons-path}<%= fontName %>.woff") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -37,10 +43,10 @@ $block: ns(<%= className %>);
 // }
 
 .#{$block} {
-    $tn-icon-size: 1.125rem !default;         //18px
-    $tn-icon-size--medium: 1.625rem !default; //26px
-    $tn-icon-size--large: 2rem !default;      //32px
-    font-size: $tn-icon-size;
+    $fd-icon-size: 1.125rem !default;         //18px
+    $fd-icon-size--medium: 1.625rem !default; //26px
+    $fd-icon-size--large: 2rem !default;      //32px
+    font-size: $fd-icon-size;
     font-family: "<%= fontName %>";
     line-height: 1;
     font-style: normal;
@@ -53,10 +59,10 @@ $block: ns(<%= className %>);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     &--medium {
-        font-size: $tn-icon-size--medium;
+        font-size: $fd-icon-size--medium;
     }
     &--large {
-        font-size: $tn-icon-size--large;
+        font-size: $fd-icon-size--large;
     }
     &::before {
         display: inline;

diff --git a/scss/icons/FundamentalIcons.woff b/scss/icons/FundamentalIcons.woff
diff --git a/scss/icons/FundamentalIcons.woff2 b/scss/icons/FundamentalIcons.woff2
diff --git a/scss/icons/icon.scss b/scss/icons/icon.scss
@@ -2,16 +2,22 @@
 @import "../core/mixins";
 @import "../core/functions";
 
+$fd-scss-icons-path : ""!default;
+
+@if variable-exists(fd-icons-path) {
+    $fd-scss-icons-path : $fd-icons-path ;
+}
+
 @font-face {
     font-family: "FundamentalIcons";
-    src: url("FundamentalIcons.woff2") format("woff2"),
-        url("FundamentalIcons.woff") format("woff");
+    src: url("#{$fd-scss-icons-path}FundamentalIcons.woff2") format("woff2"),
+        url("#{$fd-scss-icons-path}FundamentalIcons.woff") format("woff");
     font-weight: normal;
     font-style: normal;
 }
 
 //icon map
-$tn-icons: (
+$fd-icons: (
 
     add: "\ea01",
 
@@ -98,13 +104,13 @@ $block: ns(icon);
 
 //TODO: finish mixin
 // @mixin icon($key, $size) {
-//     @if map-has-key($tn-icons, $size) {
+//     @if map-has-key($fd-icons, $size) {
 //         &::before {
-//             content: map-get($tn-icons, $key);
+//             content: map-get($fd-icons, $key);
 //             @content;
 //         }
 //     } @else {
-//         @warn "Unknown `#{$key}` in $tn-icons map";
+//         @warn "Unknown `#{$key}` in $fd-icons map";
 //     }
 // }
 
@@ -113,10 +119,10 @@ $block: ns(icon);
 // }
 
 .#{$block} {
-    $tn-icon-size: 1.125rem !default;         //18px
-    $tn-icon-size--medium: 1.625rem !default; //26px
-    $tn-icon-size--large: 2rem !default;      //32px
-    font-size: $tn-icon-size;
+    $fd-icon-size: 1.125rem !default;         //18px
+    $fd-icon-size--medium: 1.625rem !default; //26px
+    $fd-icon-size--large: 2rem !default;      //32px
+    font-size: $fd-icon-size;
     font-family: "FundamentalIcons";
     line-height: 1;
     font-style: normal;
@@ -129,17 +135,17 @@ $block: ns(icon);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     &--medium {
-        font-size: $tn-icon-size--medium;
+        font-size: $fd-icon-size--medium;
     }
     &--large {
-        font-size: $tn-icon-size--large;
+        font-size: $fd-icon-size--large;
     }
     &::before {
         display: inline;
         text-align: center;
     }
 
-    @each $key, $value in $tn-icons {
+    @each $key, $value in $fd-icons {
         &--#{$key} {
             &::before {
                 content: $value;

diff --git a/test/templates/icon/data.json b/test/templates/icon/data.json
@@ -14,4 +14,4 @@
 
     }
 
-}
+}