Font icons implementation

src/components/Button/SButton.vue

@@ -13,7 +13,7 @@
       :icon="elementIcon"
       @click="handleClick"
     >
-      <i v-if="availableIcon" :class="[availableIcon]"></i>
+      <s-icon v-if="availableIcon" :name="availableIcon" />
       <slot></slot>
     </el-button>
   </s-tooltip>
@@ -24,11 +24,12 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 
+import { SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
 import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
 
 @Component({
-  components: { STooltip }
+  components: { SIcon, STooltip }
 })
 export default class SButton extends Vue {
   readonly ButtonTypes = ButtonTypes
@@ -138,9 +139,8 @@ export default class SButton extends Vue {
       this.elementIcon = this.icon
       return ''
     }
-    // TODO: add checks for invalid icons
     this.elementIcon = ''
-    return `s-icon-${this.icon}`
+    return this.icon
   }
 
   get isLoading (): boolean {
@@ -235,31 +235,60 @@ export default class SButton extends Vue {
 .action {
   &.big {
     width: $size-big;
+    i {
+      font-size: 20px;
+    }
   }
   &.medium {
     width: $size-medium;
+    i {
+      font-size: 18px;
+    }
   }
   &.small {
     width: $size-small;
+    i {
+      font-size: 16px;
+      margin-left: -2px;
+      margin-top: -2px;
+    }
   }
+  color: $color-basic-black;
   background-color: $color-neutral-placeholder;
   border-color: $color-neutral-placeholder;
   &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    color: $color-basic-black;
     background-color: $color-neutral-hover;
     border-color: $color-neutral-hover;
   }
+  &:disabled, &:disabled:hover {
+    color: $color-neutral-inactive;
+  }
   &.alternative {
     background-color: $color-basic-white;
     border-color: $color-neutral-border;
     &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+      color: $color-basic-black;
       background-color: $color-neutral-placeholder;
       border-color: $color-neutral-placeholder;
     }
+    &:disabled, &:disabled:hover {
+      color: $color-neutral-inactive;
+    }
   }
 }
 
-button > span > i {
-  top: -10px;
-  left: -10px;
+button {
+  > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      display: inline-block;
+      color: inherit;
+    }
+  }
+  &:not(.action) > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      margin-right: 6px;
+    }
+  }
 }
 </style>

src/components/Collapse/SCollapseItem.vue

@@ -53,7 +53,7 @@ export default class SCollapseItem extends Vue {
 
 <style lang="scss">
 @import "../../styles/variables.scss";
-// @import "../../styles/icons.scss";
+@import "../../styles/icons.scss";
 
 .without-border {
   > div > .el-collapse-item__header,
@@ -74,24 +74,17 @@ export default class SCollapseItem extends Vue {
     &.is-active {
       border-bottom-color: transparent;
     }
-    // TODO: fix it. @extend doesn't work in the current implementation
     .el-icon-arrow-right {
-      // @extend .s-icon-arrow-top;
-      padding: 10px;
-      // padding: 8px;
+      font-family: 'soramitsu-icons' !important;
+      @extend .s-icon-chevron-top;
+      font-size: 16px;
+      padding: 8px;
       width: 32px;
       height: 32px;
       background-color: $color-neutral-placeholder;
       border-radius: 50%;
-      &::before {
-        // content: '';
-        color: $color-basic-black; // TODO: remove these lines
-        font-weight: bold;
-      }
-      transform: rotate(90deg); // TODO: remove it
       &.is-active {
-        // transform: rotate(180deg);
-        transform: rotate(270deg);
+        transform: rotate(180deg);
       }
     }
   }

src/components/Dropdown/SDropdown.vue

@@ -29,7 +29,7 @@
         <i class="el-icon-arrow-down el-icon--right"></i>
       </s-button>
       <el-tooltip v-else :disabled="!this.$slots.default || willTooltipBeDisabled">
-        <i class="s-icon-more"></i>
+        <i class="s-icon-more-horizontal"></i>
         <template slot="content">
           <slot></slot>
         </template>
@@ -222,9 +222,8 @@ export default class SDropdown extends Vue {
   > i {
     cursor: pointer;
   }
-}
-.ellipsis.el-popper[x-placement^=bottom] {
-  margin-top: 25px;
-  margin-left: 12px;
+  .s-icon-more-horizontal {
+    font-size: 24px;
+  }
 }
 </style>

src/components/Form/SFormItem.vue

@@ -179,9 +179,10 @@ export default class SFormItem extends Vue {
     }
     .s-icon-error {
       position: absolute;
-      width: 21px;
-      height: 21px;
-      background-position: 4px bottom;
+      bottom: 0;
+      left: 4px;
+      font-size: 16px;
+      color: $color-error;
     }
   }
 }

src/components/Icon/SIcon.vue

@@ -0,0 +1,50 @@
+<template>
+  <i v-if="computedClass" :class="computedClass" :style="computedStyles"></i>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { Icons } from './consts'
+
+@Component
+export default class SIcon extends Vue {
+  /**
+   * Size property for Icon component.
+   * It should be `number/string` value which will be used as font-size.
+   */
+  @Prop() readonly size!: number | string
+  /**
+   * CSS class name from soramitsu-ui-library without prefix, like
+   *
+   * `"s-icon-refresh"` -> `name="refresh"`.
+   *
+   * Also, you can use element-ui icons from here: https://element.eleme.io/#/en-US/component/icon
+   *
+   * For instance: `name="el-icon-plus"`
+   */
+  @Prop({ type: String, required: true }) readonly name!: string
+
+  get computedClass (): string {
+    if (!this.name) {
+      return ''
+    }
+    if (this.name.startsWith('el-icon')) {
+      return this.name
+    }
+    if (!(Object.values(Icons) as Array<string>).includes(this.name)) {
+      console.warn(`'${this.name}' was not found`)
+      return ''
+    }
+    return `s-icon-${this.name}`
+  }
+
+  get computedStyles () {
+    const styles = {} as any
+    if (this.size) {
+      styles.fontSize = typeof this.size === 'number' ? `${this.size}px` : this.size
+    }
+    return styles
+  }
+}
+</script>