Add new icons font & update typography

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.14",
+  "version": "0.8.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/DatePicker/SDatePicker.vue

@@ -31,7 +31,7 @@
     >
       <slot name="range-separator" slot="range-separator"></slot>
     </el-date-picker>
-    <i v-if="!isInputType" class="s-icon-chevron-bottom"></i>
+    <s-icon v-if="!isInputType" name="chevron-down-rounded-16" />
   </div>
 </template>
 
@@ -42,11 +42,14 @@ import { ElFormItem } from 'element-ui/types/form-item'
 
 // TODO: ask do we need size prop for the component?
 // Prev comment => TODO: ask design team
+import { SIcon } from '../Icon'
 import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
-@Component
+@Component({
+  components: { SIcon }
+})
 export default class SDatePicker extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.

src/components/Dropdown/SDropdown.vue

@@ -49,7 +49,7 @@ import { ElDropdown } from 'element-ui/types/dropdown'
 import SizeMixin from '../../mixins/SizeMixin'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { ButtonTypes, SButton } from '../Button'
-import { Icons, SIcon } from '../Icon'
+import { Icons24, SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
 import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
 
@@ -73,7 +73,7 @@ export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
    *
    * By default, it's set to `"more-horizontal"`
    */
-  @Prop({ type: String, default: Icons.MoreHorizontal }) readonly icon!: string
+  @Prop({ type: String, default: Icons24.BasicMoreHorizontal }) readonly icon!: string
   /**
    * Button type of dropdown component. It can be used with `type="button"`.
    * Possible values: `"primary"`, `"secondary"`, `"tertiary"`.

src/components/Form/SFormItem.vue

@@ -13,20 +13,21 @@
   >
     <slot slot="label" name="label"></slot>
     <slot></slot>
-    <i v-if="willMessageBeShown && errorState" class="s-icon-error"></i>
+    <s-icon v-if="willMessageBeShown && errorState" name="status-error" />
   </el-form-item>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { ElForm } from 'element-ui/types/form'
-import cloneDeep from 'lodash/cloneDeep'
 import isArray from 'lodash/isArray'
 
-import { LabelPosition } from './consts'
+import { SIcon } from '../Icon'
 
-@Component
+@Component({
+  components: { SIcon }
+})
 export default class SFormItem extends Vue {
   /**
    * A key of `model` - form property.

src/components/Icon/SIcon.vue

@@ -4,8 +4,9 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
+import last from 'lodash/fp/last'
 
-import { Icons } from './consts'
+import { Icons16, Icons24, StatusIcons } from './consts'
 
 @Component
 export default class SIcon extends Vue {
@@ -38,7 +39,10 @@ export default class SIcon extends Vue {
     if (this.name.startsWith('el-icon')) {
       return this.name
     }
-    if (!(Object.values(Icons) as Array<string>).includes(this.name)) {
+    const is16Size = (Object.values(Icons16) as Array<string>).includes(this.name)
+    const is24Size = (Object.values(Icons24) as Array<string>).includes(this.name)
+    const isStatusIcon = (Object.values(StatusIcons) as Array<string>).includes(this.name)
+    if (!(is16Size || is24Size || isStatusIcon)) {
       console.warn(`'${this.name}' was not found`)
       return ''
     }
@@ -49,6 +53,9 @@ export default class SIcon extends Vue {
     const styles = {} as any
     if (this.size) {
       styles.fontSize = !isNaN(+this.size) ? `${this.size}px` : this.size
+    } else if (this.name.includes('16') || this.name.includes('24')) {
+      const words = this.name.split('-')
+      styles.fontSize = `${last(words)}px`
     }
     if (!this.visible) {
       styles.color = 'transparent'