Added icon showcase to test www

Author: EranNL

src/components/Icon/IconName.ts

@@ -3,26 +3,26 @@ export type IconName =
     | 'alert-circle'
     | 'alert-triangle'
     | 'archive'
-    | 'arrow-back'
+    | 'arrow-left'
     | 'arrow-circle-down'
     | 'arrow-circle-left'
     | 'arrow-circle-right'
     | 'arrow-circle-up'
+    | 'sort-down'
     | 'arrow-down'
-    | 'arrow-downward'
-    | 'arrow-forward'
-    | 'arrow-ios-back'
-    | 'arrow-ios-downward'
-    | 'arrow-ios-forward'
-    | 'arrow-ios-upward'
-    | 'arrow-left'
     | 'arrow-right'
+    | 'arrow-alt-left'
+    | 'arrow-alt-down'
+    | 'arrow-alt-right'
+    | 'arrow-alt-up'
+    | 'sort-left'
+    | 'sort-right'
+    | 'sort-up'
     | 'arrow-up'
-    | 'arrow-upward'
-    | 'arrowhead-down'
-    | 'arrowhead-left'
-    | 'arrowhead-right'
-    | 'arrowhead-up'
+    | 'chevron-double-down'
+    | 'chevron-double-left'
+    | 'chevron-double-right'
+    | 'chevron-double-up'
     | 'at'
     | 'attach-2'
     | 'attach'
@@ -166,11 +166,11 @@ export type IconName =
     | 'pause-circle'
     | 'people'
     | 'percent'
-    | 'person-add'
-    | 'person-delete'
-    | 'person-done'
-    | 'person'
-    | 'person-remove'
+    | 'user-add'
+    | 'user-delete'
+    | 'user-done'
+    | 'user'
+    | 'user-remove'
     | 'phone-call'
     | 'phone-missed'
     | 'phone-off'
@@ -207,8 +207,8 @@ export type IconName =
     | 'shopping-cart'
     | 'shuffle-2'
     | 'shuffle'
-    | 'skip-back'
-    | 'skip-forward'
+    | 'step-backward'
+    | 'step-forward'
     | 'slash'
     | 'smartphone'
     | 'smiling-face'

src/style/base/_typography.scss

@@ -95,17 +95,6 @@
     url('../fonts/icons/cui-icons.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-.cui-icon {
-    font: {
-        family: 'Cui-Icons';
-        weight: normal;
-    }
-
-    line-height: 1.2rem;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-
 h1 {
     font-size: 2rem;
     color: mixins.color('gray', 900);

src/style/components/_icons.scss

@@ -11,6 +11,12 @@
     .cui-icon-activity:before {
 
     }
+
+    @for $i from 1 through 12 {
+        &.cui-icon-size-#{$i} {
+            font-size: #{$i * variables.$base-gutter-steps}rem;
+        }
+    }
 }
 
 @each $name, $icon in variables.$icons {

src/style/layout/_helpers.scss

@@ -65,3 +65,23 @@
 .background-primary-light {
     background: var(--primary-color-light-background);
 }
+
+.d-flex {
+    display: flex;
+}
+
+.d-inline-flex {
+    display: inline-flex;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.justify-content-center {
+    justify-content: center;
+}
+
+.flex-direction-column {
+    flex-direction: column;
+}